はじめに
Flutter始めました〜
今回はアプリの上部によくあるヘッダーについて学んだので、基本的な使い方とそのカスタム例を紹介していこうと思います。
基本的な使用例
ズバリ！ヘッダー部分を作るには「AppBar」というウィジェットクラスを使いましょう。
以下はAppBarを適用したソースとその表示例です。
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Thank You Coming!',
),
),
);
}
}ScaffoldのappBarフィールドにAppBarウィジェットを定義してあげることでヘッダー部分を表示しています。
また、AppBarのtitleフィールドにテキストウィジェットを定義してあげることで、ヘッダー部分の文字を表示させています。（今回でいう「Thank You Coming!」）
ここで、AppBarの中ではヘッダーの部分のタイトルを定義することができていましたが、他の箇所もフィールドに値を入力してあげることでカスタマイズすることも可能です。
下の図を見てください。
新たにleading, actionフィールドというのが出ていますね。
各フィールドにウィジェットを定義してあげることで、その領域にウィジェットが出現するようになります。
これらをカスタム例にて見ていきましょう。
ヘッダーのカスタム例
ヘッダーの右左にアイコンをつけて表示
完成形は以下の通りです。
ヘッダの左右にアイコン、タイトル部分を２段にして表示をしてみました。
import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
)
],
title: Column(
children: [
Text(
'My First Create App',
style: Theme.of(context).textTheme.headline5,
),
Text(
'Thank You Coming!',
style: TextStyle(fontSize: 15),
),
],
),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () {},
),
),
);
}
}
ヘッダ部分の左右にあるアイコンはleading, actionフィールドにウィジェットを定義しています。
それぞれのウィジェットにはIconではなくIconButtonウィジェットを定義しています。
これによりクリック時のイベントをonPressフィールドに定義してあげることで（例えばsearchボタンを押下したら検索のモーダルが画面中央に表示されるようにするとか）そのイベントが起動するようになります。
しかもIconButtonにてアイコンを定義してあげることでボタン押下した時のボタン自体のスタイルもいい感じに整えてくれるので便利ですね！
また、タイトル部分は２段構成にしてあげています。
下の図を見てください。
これはtitleフィールドにRowウィジェットを定義し、その中に配列の要領でTextウィジェットを定義してあげることで２段構成を実現しています。
少し話は逸れてしまいますが、それらのテキストのStyleを変えることなんかもできちゃいます。
Row1の方はFlutterが定義してくれたフォント（Webで言うh1~h5とかpとか）を使っていますが、Row2のようにTextStyleウィジェットを使うことで一からスタイルを定義することなんかも可能です！
CustomScrollViewを用いたヘッダー
次は先ほどのヘッダよりもよりフレキシブルにカスタマイズをすることができるイカしたヘッダーの紹介です。
完成形は以下の通りです。（動画です。音はありません。）
１つ目とは違い下にスクロールをするとヘッダが隠れて、リスト部分の見える領域が拡張されています。
import 'package:flutter/material.dart';
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
background: Image.asset('assets/images/background_2.jpg'),
),
backgroundColor: Colors.transparent,
elevation: 0.5,
title: Text(
'Hello CustomScrollBar',
style: TextStyle(color: Colors.amber),
),
actions: [
TextButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) {
return TestPage();
}));
},
child: Text(
'filter',
style: TextStyle(color: Colors.amber),
),
)
],
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('list item $index'),
);
},
),
)
],
),
);
}
}
１つ目のヘッダとは違い、Scaffoldのbodyフィールドにヘッダ部分の定義をしています。
ヘッダ部分を定義している箇所はSliverAppBarウィジェットになります。
そのウィジェットのflexibleSpaceにてヘッダの背景を定義し、expandedHeightの定義値だけ下へスクロールするとflexibleSpaceの背景が隠れて、リスト部分が拡張して表示される魂胆です。
話は変わります。また余計な実装を加えています。（笑）
actionフィールドにIconButtonを定義していますが、そのonPressedフィールドにてイベントが定義されています。
Navigatorですが、returnにて定義されたウィジェットへ遷移されます。
よく使うと思うので、後日まとめたいと思います。
おわり
コメント