LoginSignup
0

More than 3 years have passed since last update.

FlutterのThemeはアプリケーションの色や見た目を提供するものです。
子孫WidgetはThemeのThemeDataを使うことでその見た目を反映させたWidgetをビルドすることができます。

DemoアプリのThemeを触ってみる

Flutter DemoアプリのThemeDataを少し変えてみます。

  • MaterialAppthemeprimarySwatchをamberに追加
  • MaterialAppthemebuttonColorを追加
  • _MyHomePageStateTextのtextThemeをheadline1に変更

実際のコード

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // primarySwatchをamberに変更
        primarySwatch: Colors.amber,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        buttonColor: Colors.lightBlue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
// _MyHomePageState 抜粋
body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        'You have pushed the button this many times:',
      ),
      Text(
        '$_counter',
        style: Theme.of(context).textTheme.headline1,
      ),
      RaisedButton(
        child: Text('Button'),
        onPressed: () {},
      ),
    ],
  ),
),

見た目の変更

  • primaryカラーがamberになりました
  • Buttonの色がlightBlueとして設定されました
  • countを表す文字が大きくなりました

ダークテーマの使用

MaterialAppthemeをdarkにするとダークモードがデフォルトになります。
OS設定のダークモード時に適用する場合は、MaterialAppdarkTheme属性にThemeDataを設定します。

例えば以下のように記述すると、通常テーマ(ライトテーマ)とダークモードが逆になります。

// StatelessWidget
theme: ThemeData.dark(),
darkTheme:ThemeData.light(),

ダークテーマが反映された例

公式ドキュメント

公式ドキュメントにThemeDataのプロパティが記載されいます。かなり細かく設定できるようです。
これを活用することで、Widgetツリーの複数箇所に見た目の設定コードが分散するという煩雑さを避けることができると思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0