テーマを使用するには、まずMaterialApp
ウィジェットのtheme
プロパティを設定する必要があります。以下は、テーマを設定する例です。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// テーマを設定
theme: ThemeData(
primaryColor: Colors.blue, // プライマリーカラー
accentColor: Colors.red, // アクセントカラー
fontFamily: 'Roboto', // フォントファミリー
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutterアプリ'),
),
body: Center(
child: Text(
'テーマの使用例',
style: Theme.of(context).textTheme.headline4,
),
),
);
}
}
上記の例では、theme
プロパティを使用してテーマを設定しています。primaryColor
とaccentColor
は、アプリのプライマリーカラーとアクセントカラーを定義するために使用されます。fontFamily
は、アプリ内のテキストのデフォルトのフォントファミリーを設定します。
さらに、テーマをカスタマイズするためには、ThemeData
クラスの他のプロパティを使用することができます。たとえば、textTheme
プロパティを使用して、タイトルや本文などのテキストのスタイルをカスタマイズすることができます。
theme: ThemeData(
// ...
textTheme: TextTheme(
headline4: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
bodyText2: TextStyle(fontSize: 16),
),
),
上記の例では、textTheme
プロパティを使用して、headline4
とbodyText2
のスタイルを定義しています。
以上が、Flutterにおけるテーマの使用方法とカスタマイズ方法の一般的な例です。テーマを使用することで、アプリの外観を一貫性のあるものにすることができます。詳細なカスタマイズ方法や他のプロパティについては、Flutterの公式ドキュメントを参照してください。