【Flutter】FlutterでCupertinoThemeDataを使用したiOSテーマスタイルの作成

この記事は「HTC Advent Calendar 2020」の6日目の記事です。
今回は、FlutterのWidgetsの１つである「Cupertino widegets」について書いていきます。

FlutterでiOSライクなアプリを作ろうとした際に、CupertinoAppウィジェットのCupertinothemeDataについて調べた内容になります。

#Cupertino ウィジェット
Flutterといえば、マテリアルデザインを想像する方が多いと思いますが、実はCupertinoというiOS風のウィジェットも提供しています。
読み方は「クパチーノ」で、Apple本社のあるクパチーノ由来の命名のようです。

#Flutterにおけるテーマ
簡単に説明すると、Flutterでアプリ全体を統一感のあるデザインにできる仕組みです。
この仕組みを使うことで、デザインを一箇所で統一的に管理できます。例えば、iOSのステータスバーの色やテキストの色が気に入らなければカスタマイズできます。また、ダークモード用のプロパティも用意されており、簡単に実装できるようになっています。

#iOSテーマスタイルの作成

Cupertinoウィジェットを使用するために、パッケージの導入を行います。

main.dart

import 'package:flutter/cupertino.dart';

CupertinoAppウィジェットを作成し、CupertinoThemeDataでテーマの指定を行います。
CupertinoAppウィジェットは、Material ComponentのMaterialAppウィジェットの代わりになるウィジェットです。MaterialAppウィジェットとほとんど同じプロパティを持ちます。

main.dart

import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
        theme: CupertinoThemeData(
            barBackgroundColor: CupertinoColors.lightBackgroundGray,
// ・・・省略
  }
}

上記のコードの例では、barBackgroundColorを変更することでナビゲーションバーの背景色をライトグレーに変更しています。
CupertinoThemeDataの主なプロパティは以下に記載しておきます。

barBackgroundColor: 上部のナビゲーションバーと下部のタブバーの背景色を変更できます。
brightness: アプリの全体の明るさを変更できます。
primaryColor: アプリの基本となる色を変更できます。
textTheme: Cupertinoウィジェットで使用されるテキストのスタイルを変更できます。

画面上ではこのような色になります。
他にもCupertinoIconThemeDataを使用すれば、アイコンのテーマ変更も可能となります。