【 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」とか呼ばれる分野ですね。たぶん。
最後に
それぞれの詳細は別の章やセクションで紹介とのことです。
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません