Flutterアプリで使用するThemeDataをMaterial Theme Builderで作ろう

image

みなさんはFlutterアプリ開発をしていてThemeDataをどのくらい弄りますか?

ThemeDataではアプリ内の色を設定することができて、それを利用してテキストやアイコンなど各種ウィジェットのテーマ設定をしていきます。

primarySwatchだけ設定すればアプリ内のメインカラーを変更できますが、ダークモードの対応やより複雑なテーマ設定をしようとするとcolorScheme内の40,50近くある色を設定しないといけません。

そこで今回紹介するのはMaterial Theme Builderです。

material_theme_builder

基本的にCore Colorsと呼ばれる色を設定することでFlutterで使用できるThemeDataを作成することができます。

各色の役割は以下の通り

  • Primary:UI全体で最も重要な箇所に使用される色
  • Secondary:UI内の目立たない箇所に使用される色
  • Tertiary:PrimaryとSecondaryのバランスをとったり、注目を集めるためのアクセントとして使用される色
  • Error:エラー状態を伝えるために使用される色
  • Neutral:テキストやアイコンを強調するための背景・面に使用される色
  • Neutral Variant:Neutralより控えめな強調のために使用される色

またColor matchをオンにすると色が鮮やかに表現されます。

色を設定し終えたら右上のボタンからExportボタンをタップしてFlutter(Dart)を選択してzipファイルをダウンロードします。

download_flutter_zip

zipファイルを解凍するとlibディレクトにtheme.dartが含まれているのでご自身のアプリのlib配下に移動させます。

あとはtheme.dart内に定義されているThemeDataをMaterialAppのtheme、あるいはdarkThemeに設定することでアプリに作成したテーマが反映されます。

ColorSchemeで定義される色がどのように使用されるかを確認するにはFlutter公式が公開しているmaterial_3_demoがわかりやすいと思います。

material_3_demo

公式が開発しているデモアプリというだけあってMaterial3の新しいコンポーネントも含まれているのでいい教材になると思います。

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More

タグ

Flutter (109)初心者向け (28)イベント (18)Google Apps Script (15)Nextjs (12)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)デザイン (5)新卒 (4)就活 (4)vscode (4)Figma (4)Dart (4)JavaScript (4)お知らせ (4)FlutterWeb (3)Prisma (3)NestJS (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)Git (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)Google (1)Web (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)DeepLeaning (1)深層学習 (1)Google Colab (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)permission_handler (1)flutter_local_notifications (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More
U30可茂ITインターンハッカソン

U30可茂ITインターンハッカソン

12月28,29日開催。2日間でアプリ開発の企画から完成までを目指す!U30可茂ITインターンハッカソンを開催します。

Read More