0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

FlutterのThemeってなんですか?

Posted at

Themeとは?

色やフォントスタイルをアプリ全体に共有するためにthemeを使います。
これを使うことによりデザインの変更なども最小限の労力で行うことができます。

Themeの使い方

Themeの使い方としては以下の2通りあります。
・アプリ全体のthemeを定義
・アプリの特定の色やフォントスタイルを定義したThemeウィジェットを使用

アプリ全体のThemeを定義

アプリ全体でThemeを使えるようにするには、MaterialAppコンストラクタにThemeDataを定義します。
もしthemeがなければFlutterはデフォルトのthemeを作成します。

MaterialApp(
  title: title,
  theme: ThemeData(
    primaryColor: Colors.pink,
  ),
  home: const MyHomePage(
    title: title,
  ),
);

アプリの一部の色やフォントなどを変えるには

アプリの特定部分の色やフォントを変える方法は以下の2通りあります。
・独自のThemeDataを作成
・親のthemeを拡張

独自のThemeDataを作成

アプリのどの色やフォントスタイルも継承したくない場合は、ThemeData()インスタンスを作成し、Themeウィジェットにそれを渡します。

Theme(
  data: ThemeData(
    splashColor: Colors.blue,
  ),
);

親のthemeを拡張

全てを上書きするのではなく、親のthemeを拡張する方がいい場合もあります。それを実装するにはcopywith()メソッドを使います。

Theme(
  data: Theme.of(context).copyWith(splashColor: Colors.blue),
);

参考

0
0
0

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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?