【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part123 Material Components

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part123 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part122 Material Components

引き続き、Material Componentsについて学びます。

MaterialAppウィジェット

themeプロパティ

themeプロパティはThemeDataクラスを指定してアプリ全体のテーマを指定できます。
PowerPointのテンプレートみたいなものでしょうかね?

サンプルを公開されているサイトがありました!
お借りします。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new MyHomePage()));
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  bool dark = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: dark ? ThemeData.dark() : ThemeData.light(),
      home: Scaffold(
        appBar: AppBar(title: Text('Toggle theme sample')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              setState(() => dark = !dark);
            },
            child: Text('Toggle theme'),
          ),
        ),
      ),
    );
  }
}

タップすると画面全体の色が切り替わりましたね!
よく見ると時計の部分も切り替わっているようです。

supportedLocales, localizationsDelegatesプロパティ

supportedLocales, localizationsDelegatesプロパティはアプリで対応する言語を指定するプロパティです。
「国際化対応」とか「ローカリゼーション」とか「i18n」とか呼ばれる分野ですね。たぶん。

最後に

それぞれの詳細は別の章やセクションで紹介とのことです。

今日はここまで!

参考

FlutterのThemeを理解する (itome.team)