MENU

【Flutter】ThemeDataを使ってアプリ全体の外観を設定する

記事内に商品プロモーションが含まれる場合があります

アプリ全体の背景色や主要な色などを決める際に、ThemeDataを使うと便利です。

これを使うことで、わざわざ個別のWidgetに色を設定する必要がなくなるので、色を変更したい場合は一括で変更できますし、アプリ全体を統一感のあるデザインにすることができます。

また、ダークモードに対応も簡単に行えます。

目次

ThemeDataの設定

ThemeDataはMaterialAppウィジェットで設定します。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      theme: ThemeData(
        brightness: Brightness.light, // 明るさ
        colorScheme: ColorScheme.light(
          background: Colors.grey.shade400, // 全体の背景
          primary: Colors.grey.shade300, // 主要な色
          secondary: Colors.grey.shade200, 
        ),
      ),
    );
  }
}

ThemeDataで設定した色の使い方

設定したテーマの色をWidgetに適用させたい時は次のように書きます。

// 背景色
Theme.of(context).background

例えば、Scaffoldウィジェットの背景色を設定する場合は次のとおりです。

return Scaffold(
    backgroundColor: Theme.of(context).colorScheme.background,
);

ダークモードに対応

ダークモード時に色を変えたい場合は、MaterialAppウィジェットのdarkThemeにThemeDataを追加するだけです。

コードが長くなるので、ThemeDataのファイルを別ファイルにまとめておきます。

● theme.dart

import 'package:flutter/material.dart';

// ライトモード
ThemeData lightMode = ThemeData(
  brightness: Brightness.light,
  colorScheme: ColorScheme.light(
    background: Colors.grey.shade400,
    primary: Colors.grey.shade300,
    secondary: Colors.grey.shade200,
  ),
);

// ダークモード
ThemeData darkMode = ThemeData(
  brightness: Brightness.dark,
  colorScheme: ColorScheme.dark(
      background: Colors.grey.shade900,
      primary: Colors.grey.shade800,
    secondary: Colors.grey.shade700,
  ),
);

● main.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      theme: lightMode,
      darkTheme: darkMode,
    );
  }
}

結果は次のとおり、ライトモードとダークモードで色が自動で切り替わります。

テキストの設定

ThemeDataでは色の設定の他にテキストやアイコンなどの設定もできます。

設定項目が多いので、必要に応じて追加していくのが良いでしょう。

全体のフォントを定義したい場合は、fontFamilyを、テキストスタイルの設定(サイズや太さなど)を定義したい場合はtextThemeを設定します。

ThemeData(
  brightness: Brightness.light,
  colorScheme: ColorScheme.light(
    background: Colors.grey.shade400,
    primary: Colors.grey.shade300,
    secondary: Colors.grey.shade200,
  ),
  fontFamily: 'Roboto', // フォントファミリーの設定
  textTheme: TextTheme( 
    // テキストの設定
    bodySmall: TextStyle(fontSize: 14.0, fontWeight: FontWeight.normal),
    bodyMedium: TextStyle(fontSize: 20.0, fontWeight: FontWeight.normal),
    bodyLarge: TextStyle(fontSize: 32.0, fontWeight: FontWeight.normal),
  ),
)
Share
  • URLをコピーしました!

Comment

コメントする

目次