Flutterテーマをダークモードやライトモードに変える方法

Flutter

2021.10.13

環境
実装概要

環境

macOS Big Sur Version 11.5.2

Flutter 2.2.3

XCode 12.5.1

実装概要

全体的なテーマを変える方法です。

MaterialAppのthemeのbrightnessの値を設定することで変更することができました。

引数としてとりうる値は3種類ありました。

Brightness.light
Brightness.dark
Brightness.values[0], Brightness.values[1]

light, darkはテーマの色がそれらに変わりました。

valuesに関しては1がlight, 2がdarkに対応していました。

多分ですが、トグルスイッチにてテーマを変えたい時にでも使うのかなと…（これも実装したい）

以下ソースになります。

ソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Brightness _brightness = Brightness.light;
    return MaterialApp(
      title: 'TODO VER2',
      theme: ThemeData(
        brightness: _brightness,
        primaryColor: Colors.blue,
      ),
      home: Todo(),
    );
  }
}

class Todo extends StatelessWidget {
  const Todo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello TODO VER2'),
      ),
      body: Center(
        child: Text('Hello TODO List!'),
      ),
    );
  }
}