質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

Q&A

0回答

825閲覧

Flutterでのテーマの共通クラスについて(大変困っております。。。)

fsk5303

総合スコア21

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Dart

Dartは、Googleによって開発されたJavaScriptの代替となることを目的に作られた、ウェブ向けのプログラミング言語である。

0グッド

0クリップ

投稿2021/08/16 01:24

編集2021/08/24 05:00

前提・実現したいこと

Flutterで共通的なテーマを定義したクラスを作りたいです。
テーマはビルド環境(flavor)によって切り替えます。(開発環境:オレンジ、検証環境:青、本番環境:緑)
また、ダークモードか否かによっても切り替えます。

発生している問題・エラーメッセージ

綺麗な設計がわからないためアドバイスをいただきたいです。
下記が気になっている点です。

  • MyTheme.dartのメンバ変数primarySwatchとprimaryColorがnon-nullableのため仕方なく一旦オレンジで初期化していること
  • ライトモードとダークモードそれぞれのテーマを取得するためにメソッドを呼ぶ必要があること
  • 毎回initTheme()を呼び出してしまっていること

どのような作りにすると綺麗な作りになりますでしょうか。

該当のソースコード

main.dart

dart

1void main() { 2 runApp(MyApp()); 3} 4 5class MyApp extends StatelessWidget { 6 7 Widget build(BuildContext context) { 8 return MaterialApp( 9 title: 'Flutter Demo', 10 theme: MyTheme.getLightTheme(), 11 darkTheme: MyTheme.getDarkTheme(), 12 initialRoute: '/', 13 routes: { 14 '/': (context) => MainView(), 15 '/test1': (context) => Test1(), 16 '/test2': (context) => Test2(), 17 }); 18 } 19} 20

MyTheme.dart

dart

1class MyTheme { 2 // 初期値オレンジ 3 static MaterialColor primarySwatch = Colors.orange; 4 static Color primaryColor = Colors.orange; 5 6 // ライトモードのテーマ 7 static ThemeData getLightTheme() { 8 initTheme(); 9 10 ThemeData themeData = ThemeData( 11 primarySwatch: primarySwatch, 12 primaryColor: primaryColor, 13 ); 14 15 return themeData; 16 } 17 18 // ダークモードのテーマ 19 static ThemeData getDarkTheme() { 20 initTheme(); 21 22 ThemeData themeData = ThemeData( 23 brightness: Brightness.dark, 24 primarySwatch: primarySwatch, 25 primaryColor: primaryColor, 26 ); 27 28 return themeData; 29 } 30 31 // ビルド環境ごとの色設定 32 static initTheme() { 33 switch (EnvironmentConfig.APP_ENV) { 34 case Constants.APP_ENV_DEVELOPMENT: 35 primarySwatch = Colors.orange; 36 primaryColor = Colors.orange; 37 break; 38 case Constants.APP_ENV_STAGING: 39 primarySwatch = Colors.blue; 40 primaryColor = Colors.blue; 41 break; 42 case Constants.APP_ENV_PRODUCTION: 43 primarySwatch = Colors.green; 44 primaryColor = Colors.green; 45 break; 46 } 47 } 48}

参考にしたページ

補足情報(FW/ツールのバージョンなど)

Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.2.3, on macOS 11.5 20G71 darwin-x64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [✓] Xcode - develop for iOS and macOS [✓] Chrome - develop for the web [✓] Android Studio (version 2020.3) [✓] VS Code (version 1.58.2) [✓] Connected device (3 available)

もしも質問内容が不適切でしたら、修正いたします。
何卒よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問