search
LoginSignup
0

More than 1 year has passed since last update.

posted at

FlutterのThemeを触ってみる

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
What you can do with signing up
0