フラッターのスタック構造を使用してダークモードとライトモードの間をトグルする方法

セットアップ

物事を開始するには、次のように新鮮なフラッターのプロジェクトをインストールしてください.

// you can name the project anyway you want, 
// in this case I will just use this name below
flutter create stacked_theme_switcher

スタックアーキテクチャについてよく知らない場合は、スタックのアーキテクチャを理解する必要があるので、このチュートリアルを実行する前に、filleststackからスタックアーキテクチャを設定する方法を見て、学ぶことをお勧めします.
私はそこからスタティックアーキテクチャについて学びました、そして、あなたがそれをチェックしなければならないように、内容と彼のチュートリアルの品質はすばらしいです.
そして、スタックアーキテクチャについてよく知っているなら、必要な依存関係をインストールしましょう.あなたの頭にpubspec.yaml プロジェクトディレクトリにファイルを置き、これらの依存関係を配置します.

dependencies:
 # state
 stacked: ^1.7.3+2
 # inversion of control
 injectable:
 observable_ish:
 get_it: ^4.0.2
dev_dependencies:
 build_runner:
 injectable_generator:

依存関係の下で、我々は我々が国家管理解決のために使用しているものであるので、積み重ねが必要です.下の他の3は、我々のフラッターアプリで依存注入を扱うものです.For observable_ish パッケージは、スタックされたアーキテクチャのサービスの中で無効な値を扱います.古いパッケージだと言うかもしれませんが、filledstackからのdaneがこのパッケージを選んだ理由があります.しかし、私は今ここでそれについて話すつもりです.
そして最後にdev_dependencies , これらは我々が我々が我々が彼らがビルダーのために認められる方法として注射可能な注釈を使用している時から、我々のフラッタアプリでボイラープレートコードを避けることができるように、我々が必要とするものです.
そうですね、パブを実行して依存関係をインストールしてください.
パブパブ

依存性注入

プロジェクトの設定をした後、我々はテーマスイッチャのコードを書き始めることができます.メイン用.ダーツファイルは、それをクリーンアップし、我々が必要なだけ残します.

メイン.ダート
我々は/libディレクトリ内のフォルダを作成し、“app”として名前を付け、このディレクトリでは、我々は我々のロケータを置くここで、これは我々のフラッターアプリケーションの依存性注入を処理します.そしてファイルロケータを作成します.ダートイン.

ロケーター.ダート
その後、プロジェクトディレクトリがこのように見えるでしょう.

プロジェクトディレクトリ
VSCODEがコードのエラーを示しているのを見ることができます、そして、自動生成されたボイラープレートコードがまだそこにないので、それはすばらしいです.私たちのテーマスイッチャクラスやテーマサービスを作成する必要があります少しハングアップします.
/libディレクトリで、新しいディレクトリを作成して、「サービス」として名前をつけてください、ここでは、我々は我々のViewモデルに何らかの種類のデータを供給する責任があるすべてのサービスを入れました.その後、themeRANKサービスと呼ばれるファイルを作成します.ダーツとファイルの内部には、コードを書いて、インクルードパッケージからlazysingleton注釈を置くので、それは自動的にこのサービスを登録し、それが私たちのフラッターアプリで世界的にアクセスできるようになります.

ThemeRankサービス.ダート
あなたが既にそれを作成したとき、我々はビルダーを実行し、それが我々のためのボイラープレートのコードを生成することができる時間についてです!端末を開くか、既存の端末を使用し、以下のコマンドを実行します

flutter pub run build_runner build

それは自動的に私たちのためのコードを生成するために時間がかかります.それで、待ってください.あなたが正しくやったならば、それはこのように見えるはずです.

端末
基本的にはロケータを作成しました.設定.DARTファイルとそれは、SingletonクラスとしてThemesServiceクラスを登録し、これは私たちのアプリケーションでグローバルに私たちのthemeserviceにアクセスすることができます場合は、コードの他の部分でテーマを必要があります.
これは自動生成されたコードがどのように見えるかです.

ロケーター.設定.ダート

テーマ定義

我々がセットアップした直後にThemeService クラスと、それをシングルトンとして登録し、それから我々のテーマデータをThemeService クラス、我々ThemeService クラスはmixinReactiveServiceMixin これはサービスの反応値を扱うでしょう.
その後、インポートobservable_ish インサイドThemeService 私たちはクラスの中で私たちは、暗いテーマとライトのテーマの実行中にトグルされるクラスを使用して以来、クラス.その後、我々はまた、我々のようなクラスを使用しているので、材料パッケージをインポートてThemeData , ThemeMode と他のウィジェットのテーマを作成するに関連する.次に、observable_ish そしてそれを与えるThemeMode 以来、我々は暗いとライトモードを切り替えている.

ThemeRankサービス.ダーツ(第1部)

ThemeRankサービス.ダーツ(パート2)
光のテーマと暗いテーマのために私たちのプロパティを定義した後、我々は、我々のアプリケーションのテーマ間を切り替えることができます.

トグルテーマ

今すぐ戻ってmain.dart , プットsetupLocator() 以前runApp() アプリケーションが始まる前にそれらのサービスをインスタンス化したいので.このように見えます.

メイン.ダート
それからラップMaterialApp() インViewModelBuilder.reactive() 名前付きコンストラクタMainViewModel 下のクラスViewModelBuilder 種類MainViewModel .

ここで我々は我々がそれを設定していたとしてシングルトンとして登録された私たちのthemeserviceへの参照を追加しました.これは、私たちのthemeserviceの中のメソッドとプロパティにアクセスすることを意味します、そして、私たちのmainViewmodelがReactiveViewModelを広げるので、それは必要なオーバーライド注釈を持っています.
あなたが気づいている場合は、我々のプロパティは、私たちのMaterialAppウィジェットに追加され、そこに我々のホーム画面を置く我々のアプリの起動時にレンダリングされる最初のビューだ.

ホーム画面
このビューを作成するには、スタックのアーキテクチャに従うコンベンションとして、/libの中にディレクトリを作成し、「UI」として名前を付け、内部ディレクトリ/UIディレクトリを「View」と呼ぶ別のディレクトリを作成しますviewmodel 各ビューの.そして最後に、ホーム画面が欲しいので、「ホーム」と呼ばれる別のフォルダを作成し、このフォルダの中に2つのファイルを作ります.home_view.dart & home_viewmodel.dart 内部home_view.dart ここでは、UI関連のコードとすべてのロジックを入れますhome_viewmodel.dartインサイドhome_view.dart 我々は、内部にラップされた足場を作成するViewModelBuilder 活字HomeViewModel だから、我々はからのメソッドへのアクセスをViewModel このビューが結合していること.それから我々の足場の本体としてRaisedButton ウィジェットは、我々は光と暗い間のテーマを切り替えるタップします.

ホームランビュー.ダート
とHomeCone ViewModelのコード.ダート.

ビューモデル.ダート
ビューモデルの中で我々はThemeService 再び依存関係として我々はtoggleTheme() からのメソッドThemeService 光と暗いテーマを切り替えることができるクラス.
そしてそこから、我々は今、暗いと光のテーマの間を切り替えることができます!
以下のおかげで、私はあなたがそれを好きだった願っています.しかし、この1つを実行するより良い方法があるなら、私はそれを感謝します.
乾杯!