こんにちは。今日はノーコードのFlutterFlowでダークモードの切り替えを実装してみました。とても簡単なのでぜひ試してみてください。
ダークモード切り替えの完成イメージ
以下のように、設定画面にDarkMode切り替えのトグルのスイッチボタンを配置して、切り替えると画面の色がきりかわる、という感じにしたいと思います。
まずはダークモード切り替えのスイッチボタンを配置
まずはswichエレメントを選択しお好きなところに配置します。
初期値の設定
以下のようにinitial valueにIs Dark Modeを設定します。
スイッチボタンのON /OFF切り替えアクションの設定
あとは、ON/OFF時のアクションの設定です。
スイッチボタンのアクションを選択し、まずOn Toggled Onになった時にDark Modeになるよう設定します。
次は反対に、On Toggled Offになった時にLight Modeになるよう設定するだけです。簡単ですね。
これで完成です。ぜひ試してみてください。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。