見出し画像

【Flutter Flow】ダークモードを設定しよう!

みなさんこんにちは!Taiyoと申します!今回は、ダークモードの設定について解説していきます!

ダークモードの設定種類

ダークモードの設定には3種類あります!

  1. From System:スマホのシステム設定に基づいて画面の色が変化します。システム上にダークモードを設定している場合は自動でダークモードになります。

  2. Light Mode:ライトモードにして、画面の色を白色にします。

  3. Dark Mode:ダークモードにして、画面の色を黒色にします。

ボタンを押して画面を白→黒へ!

画面をダークモードに変更するActionはとても簡単です!一緒にやっていきましょう!

まず、UI BuilderのCommonly Used Elementsからボタンエレメントを選択して画面に設置します。

そして設置したボタンにActionを設定していきます!
On Tapを選択し、Action1には、Set Dark Mode Setting、
Setting SourceにはSellect Setting
Dark Mode SettingにはDark Modeを選択します!

これで終わりです😄めちゃくちゃ簡単でしたね

これだけで画面上ほDark Modeを設定できてしまうなんてやっぱりFlutter Flowは凄すぎます!!!

みなさま良いFlutter Flowライフをお過ごしください〜!!ではまた〜🌞

いいなと思ったら応援しよう!