Flutterでライセンスページの背景色を変更する

概要

本記事では、ライセンスページの背景色を変更する方法について記載します。

Flutterでアプリ作成すると、もはやOSSを使わない選択肢がないと言えるでしょう。
そうなると、アプリをリリースする際、OSSの著作権表示する必要性が出てきます。

FlutterでOSSの著作権表示するには、標準のLicensePageウィジェットが非常に便利です。
ただし、themeを入れると、LicensePageクラスだけ世界観が異なってしまったり、
場合によっては見えなくなってしまいます(ex.アプリ全体の文字色を白色にする)。

アプリ全体の世界観を変えず、ライセンスを適切に表示する方法を記します。
参考:stackoverflow

環境

$ flutter --version
Flutter 2.10.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7e9793dee1 (6 weeks ago) • 2022-03-02 11:23:12 -0600
Engine • revision bd539267b4
Tools • Dart 2.16.1 • DevTools 2.9.2

事前準備

プロジェクト作成【作成済であれば不要】

プロジェクト名やオプションについては、適宜変更してください。

$ flutter create flutter_license_sample

実装

まず、MaterialAppにテーマを入れます。
次に、LicensePageウィジェットをThemeウィジェットでラップします。
このThemeウィジェットのdataオプションにおけるcardColorがLicensePageの背景を扱うようなのでCopyWithで上書きします(下記の例では、primaryの色を設定している)。

lib/main.dart

import 'package:flutter/material.dart';
import 'package:license_text_color_sample/theme.dart';

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: buildLightTheme(),     // ⇦✨✨アプリ全体にテーマを当てている
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                // ↓✨✨Theme widgetでラップして、cardColorオプションを設定するのがポイント
                builder: (context) => Theme(
                  data: Theme.of(context)
                      .copyWith(cardColor: Theme.of(context).primaryColor),
                  child: const LicensePage(),
                ),
              ),
            );
          },
          child: const Text('ライセンス表示'),
        ),
      ),
    );
  }
}

参考までに、theme.dartも記載します。

lib/theme.dart

ThemeData buildLightTheme() {
  final typography = Typography.material2018();
  final textTheme = typography.englishLike.merge(typography.white).copyWith(
        headline1: const TextStyle(color: Colors.white),
        headline2: const TextStyle(color: Colors.white),
        headline3: const TextStyle(color: Colors.white),
        headline4: const TextStyle(color: Colors.white),
        headline5: const TextStyle(color: Colors.white),
        headline6: const TextStyle(color: Colors.white),
        subtitle1: const TextStyle(color: Colors.white),
        bodyText1: const TextStyle(color: Colors.white),
        bodyText2: const TextStyle(color: Colors.white),
        caption: const TextStyle(color: Colors.white),
        overline: const TextStyle(color: Colors.white),
      );
  return ThemeData.from(
    textTheme: textTheme,
    colorScheme: const ColorScheme.light(
      primary: Color(0xFF2F1C59),
      // onPrimary: Colors.white,
      secondary: Color(0xFFBF6363),
      // onSecondary: Color(0xFF112F52),
      background: Color(0xFF072B59),
      // surface: Colors.white,
      // onSurface: Color(0xFF000000),
      // error: Color(0xFFE54F2B),
      // onError: Color(0xFFB00020),
    ),
  );
}

結果

おまけ

細かい内容の投稿ですが、何度もぶつかる可能性の高い課題だと考え、記事化しました。
こういうディティールは優先度低くなりがちのため、瞬殺できるように備忘のため残しておきます。