【Flutter】TextThemeとButtonThemeについて

TextTheme

TextThemeは、アプリケーション内のテキストスタイルを定義するクラスです。TextThemeは、Material Design Typographyに基づいていて、一般的なテキストスタイルを提供しています。以下は、主要なテキストスタイルです。

• headline1, headline2, headline3, headline4, headline5, headline6: タイトルや見出しに使用されるテキストスタイル
• subtitle1, subtitle2: サブタイトルや説明文に使用されるテキストスタイル
• bodyText1, bodyText2: 本文に使用されるテキストスタイル
• caption: キャプションや注釈に使用されるテキストスタイル
• button: ボタンテキストに使用されるテキストスタイル
• overline: オーバーラインテキストに使用されるテキストスタイル

ButtonTheme

ButtonThemeは、アプリケーション内のボタンのデザインを定義するクラスです。ボタンの形状、色、テキストスタイル、パディングなどをカスタマイズできます。

TextThemeとButtonThemeのサンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Text and Button Theme',
      theme: ThemeData(
        textTheme: TextTheme(
          headline1: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold, color: Colors.blue),
          bodyText1: TextStyle(fontSize: 16.0, fontStyle: FontStyle.italic, color: Colors.grey),
        ),
        buttonTheme: ButtonThemeData(
          buttonColor: Colors.blue,
          textTheme: ButtonTextTheme.primary,
          minWidth: 200.0,
          height: 50.0,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Text and Button Theme'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'Custom Headline1 Text Style',
              style: Theme.of(context).textTheme.headline1,
            ),
            Text(
              'Custom BodyText1 Text Style',
              style: Theme.of(context).textTheme.bodyText1,
            ),
            SizedBox(height: 16.0),
            RaisedButton(
              onPressed: () {
                // Button onPressed action
              },
              child: Text('Custom Button Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

サンプルコードのUI