Flutterでテーマカラーとフォントを設定する

初めましてblueです。

現在、ITベンチャー企業でWEBキャンペーンシステムの運用並びに要件定義、ECサイトの開発を行っています。

今回はFlutterでテーマカラーとフォントを設定する方法について記事にしてみました！

使用するメソッド

ThemeData class - material library - Dart API

実装コード

theme: ThemeData(
       brightness: Brightness.dark,
       primaryColor: Colors.lightBlue[800],
       fontFamily: 'Georgia',
       textTheme: const TextTheme(
         headline1: TextStyle(fontSize: 32, fontStyle: FontStyle.italic),
         bodyText2: TextStyle(fontSize: 14, fontFamily: 'Hind'),
       ),
     ),

ThemeDataを使って共通のテーマカラー、フォントを設定。

brightness: アプリ全体の明るさを設定。
primaryColor: アプリ主要部分の背景のカラー設定。（ツールバーやタブバーなど）
textTheme: テキストのサイズやスタイルなどの設定。

全体コード

import 'package:flutter/material.dart';

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

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

 @override
 Widget build(BuildContext context) {
   const appName = 'アプリテーマ';

   return MaterialApp(
     title: appName,
     theme: ThemeData(
       brightness: Brightness.dark,
       primaryColor: Colors.lightBlue[800],
       fontFamily: 'Georgia',
       textTheme: const TextTheme(
         headline1: TextStyle(fontSize: 32, fontStyle: FontStyle.italic),
         bodyText2: TextStyle(fontSize: 14, fontFamily: 'Hind'),
       ),
     ),
     home: const MyHomePage(
       title: appName,
     ),
   );
 }
}

class MyHomePage extends StatelessWidget {
 final String title;

 const MyHomePage({Key? key, required this.title}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(title),
     ),
     body: Center(
       child: Container(
         color: Theme.of(context).colorScheme.secondary,
         child: Text(
           'テキストの背景',
           style: Theme.of(context).textTheme.headline1,
         ),
       ),
     ),
     floatingActionButton: Theme(
       data: Theme.of(context).copyWith(splashColor: Colors.yellow),
       child: FloatingActionButton(
         onPressed: () {},
         child: const Icon(Icons.add),
       ),
     ),
   );
 }
}

実装画面