Zenn
🤗

【Flutter/初心者向け】新規プロジェクト作成時にThemeを少しの手間でいい感じにしよう

2023/08/20に公開
Flutter
初心者向け
#
theme
#
UI/UX
tech

はじめに

私はライブラリのキャッチアップのため、都度新しいプロジェクトでアプリを開発しています。
また、少しの手間でそのアプリをリッチにして、よりモチベーションを高める工夫をしています。

簡単にできることなので、是非参考にしていただければ幸いです。
また、自分なりのプロジェクト開始時のルーティンがあれば是非コメントお願いします。

todo

  • fontを追加
  • colorSchemeを追加
  • 画面遷移アニメーションを修正
  • themeの適応

fontを追加

Flutterのデフォルトの漢字のフォントは中国語っぽいやつで、
日本人からすると少し見栄えがよくないです。

以下のフォントを導入して、慣れ親しんだ漢字を取り戻します。
https://fonts.google.com/noto/specimen/Noto+Sans+JP

導入手順

1.フォントをダウンロード

以下のような構造のファイルがダウンロードされると思います。

2.プロジェクトに導入

プロジェクト直下のディレクトリに"fonts"というディレクトリを作成し、
1.でダウンロードしたファイルのうち、"NotoSansJP-Regular.ttf"をfontsディレクトリに入れます。

フォントファイルを追加後、pubspec.yamlに追記します。(ファイルの下の方です)

flutter:
  uses-material-design: true
  # ここから
  fonts:
    - family: Noto Sans JP
      fonts:
        - asset: fonts/NotoSansJP-Regular.ttf
  # ここまで

これでfontの追加は完了です。

colorSchemeを追加

個人的にはここが最重要ポイントです。

1.好みの色を決めて、colorSchemeファイルをダウンロード

私は全く美術的センスがありませんが、
以下サイトを利用するだけでいい感じの配色でアプリを作成できます。
https://m3.material.io/theme-builder#/custom

以下の部分をクリックして、自分の好みの色を探してみてください。

ライトモード、ダークモード時の文字の色やContainerの色のプレビューを確認できます。

色が決まったら、右上の ExportからFlutter(Dart)を選び、ダウンロードしてください。

2.プロジェクトに導入

ダウンロードしたテーマのうち、"color.schemes.g.dart"をlibディレクトリに入れます。

これでok。

画面遷移アニメーションを修正

デフォルトのままでは、iOSとAndroidで画面遷移のアニメーションに差があります。
個人的にはiOSの画面遷移に合わせると見栄えがよく感じるので、画面遷移を統一します。

以下コードを"main.dart"のMyAppクラスに追記します。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
    TargetPlatform.android: CupertinoPageTransitionsBuilder(),
    TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
  };
  
  @override
  Widget build(BuildContext context) {...

Themeを適応

導入したfont、colorSchemeと画面遷移の修正を適応させます。
以下、"main.dart"のMyAppクラスに追記します。

import 'color_schemes.g.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

　// 画面遷移アニメーション指定
  static const Map<TargetPlatform, PageTransitionsBuilder> _defaultBuilders = <TargetPlatform, PageTransitionsBuilder>{
    TargetPlatform.android: CupertinoPageTransitionsBuilder(),
    TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
  };

  ThemeData myTheme(ColorScheme colorScheme) {
    return ThemeData(
      useMaterial3: true,
      // colorScheme指定,
      colorScheme: colorScheme,
      // フォント指定
      fontFamily: 'Noto Sans JP',
      // 画面遷移
      pageTransitionsTheme: const PageTransitionsTheme(builders: _defaultBuilders),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // ライトモード
      theme: myTheme(lightColorScheme),
      // ダークモード
      darkTheme: myTheme(darkColorScheme),
      // デバッグバナー非表示
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

colorSchemeの色の指定方法

// primary
color: Theme.of(context).colorScheme.primary
// secondary
color: Theme.of(context).colorScheme.secondary
// onPrimary
color: Theme.of(context).colorScheme.onPrimaryContainer

まとめ

以上です。
参考になりましたら幸いです。

Discussion