【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part126 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part126 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part125 Material Components
引き続き、Material Componentsについて学びます。
AppBar
automaticallyImplyLeadingプロパティ
automaticallyImplyLeadingプロパティをtrue(デフォルト)にすると画面遷移時にleadingプロパティが配置される場所に戻るアイコンが自動で表示されます。
centerTitleプロパティ
centerTitleプロパティは状態によりAndroid,iOSのタイトルの位置が変わります。
- 未指定
- Android・・・左寄り
- iOS・・・中央
- true
- Android・・・中央
- iOS・・・中央
- false
- Android・・・左寄り
- iOS・・・左寄り
まずは普通に・・・
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'),
// AppBarの左側にボタンが配置されます。
leading: IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
// AppBarの右側にボタンが配置されます。
actions: <Widget>[
IconButton(
icon: Icon(Icons.group),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NextPage(),
),
);
},
)
],
// AppBarの下の部分のを担当します。
// PreferredSizeウィジェットはchildの高さの影響を受けません。
bottom: PreferredSize(
preferredSize: Size.fromHeight(50),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Bottom',
style: TextStyle(fontSize: 32),
),
),
),
// AppBarとbody部分との影の深さ(z軸)を指定します。
elevation: 20,
),
body: Center(
child: ElevatedButton(
onPressed: () {
setState(() => dark = !dark);
},
child: Text('Toggle theme'),
),
),
),
);
}
}
class NextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("次のページ"),
),
body: Container(
height: double.infinity,
color: Colors.red,
),
);
}
}
leadingの部分に戻るアイコンが表示されていますね。
また、Androidなのでタイトル左寄りになっています。
プロパティを変えてみます。
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(
centerTitle: true, // タイトルが中央になります。
title: Text('Toggle theme sample'),
// AppBarの左側にボタンが配置されます。
leading: IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
// AppBarの右側にボタンが配置されます。
actions: <Widget>[
IconButton(
icon: Icon(Icons.group),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NextPage(),
),
);
},
)
],
// AppBarの下の部分のを担当します。
// PreferredSizeウィジェットはchildの高さの影響を受けません。
bottom: PreferredSize(
preferredSize: Size.fromHeight(50),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Bottom',
style: TextStyle(fontSize: 32),
),
),
),
// AppBarとbody部分との影の深さ(z軸)を指定します。
elevation: 20,
),
body: Center(
child: ElevatedButton(
onPressed: () {
setState(() => dark = !dark);
},
child: Text('Toggle theme'),
),
),
),
);
}
}
class NextPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false, // 戻るアイコンが表示されなくなります。
title: Text("次のページ"),
),
body: Container(
height: double.infinity,
color: Colors.red,
),
);
}
}
戻るボタンが非表示になりましたね。
また最初の画面のタイトルも中央・・・になっていますね！！
最後に
戻るアイコンなくなったら戻れなくなってしまいますね。
・・・画面の戻る機能を自分で実装する際に利用するのでしょうか🤔
今日はここまで！