このサイトは、特にやりたいこともなく無気力に生きる汚い中年おじさんデザイナー佐藤文彦のポートフォリオサイトです。
応援よろしくお願いします。

FlutterでThemeをカスタマイズする

2022/03/08

Themeの利用方法

Themeはアプリケーション作成時に、main.dartMaterialAppに設定されています。

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

primarySwatchを変更する

まずMaterialデザインで用意されているカラーパレットからThemeを設定してみます。
primarySwatchカラーパレットから選んで設定します。

theme: ThemeData(
  primarySwatch: Colors.red,
),
Colors.blueColors.red
Colors.blue
Colors.red

Materialデザインのカラーパレットではなく、オリジナルのカラーパレットを利用したい場合は、別途カラーパレットを作成します。

class CustomTheme {
  static const int _primaryValue = UiVariables.primaryColor;
  static const MaterialColor primaryColor = MaterialColor(
    _primaryValue,
    <int, Color>{
      50: Color(0xFFFFE5EA),
      100: Color(0xFFFFB3C0),
      200: Color(0xFFFF94A7),
      300: Color(0xFFFF758E),
      400: Color(0xFFFF5775),
      500: Color(_primaryValue),
      600: Color(0xFFFF1A43),
      700: Color(0xFFFA002D),
      800: Color(0xFFDB0028),
      900: Color(0xFFBD0022),
    },
  );
}   
theme: ThemeData(
  primarySwatch: CustomTheme.primaryColor,
),

appBarThemeを変更する

appBarと、bottomAppBarのrThemeを設定します。

theme: ThemeData(
   appBarTheme: const AppBarTheme(
     backgroundColor: Colors.white,
     foregroundColor: Colors.red,
   ),
   bottomAppBarTheme: const BottomAppBarTheme(color: Colors.red),
),

上記の設定をするとこんな感じになります。

appBarTheme

inputDecorationThemeを変更する

TextField、やTextFormFieldをのThemeを設定します。

view側はTextFormFieldを利用しているとします。

TextFormField(
 decoration: const InputDecoration(
  labelText: 'ラベル1',
 ),
)

inputDecorationThemeの設定はこんな感じ。

  theme: ThemeData(
      inputDecorationTheme: InputDecorationTheme(
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: const BorderSide(
        color: Colors.black38,
        width: 1.0,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: const BorderSide(
        color: Colors.black38,
        width: 1.0,
      ),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: const BorderSide(
        color: Colors.red,
        width: 1.0,
      ),
    ),
    errorBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: const BorderSide(
        color: Colors.red,
        width: 1.0,
      ),
    ),
    labelStyle: const TextStyle(
      fontSize: 12,
      color: Colors.black54,
    ),

表示はこんな感じ。

InputDecoration設定前InputDecoration設定後
inputDecorationTheme
inputDecorationTheme

カテゴリ

新規記事