【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part130 Material Components
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は Material ComponentsとiOS-Style ( part130 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( Material ComponentsとiOS-Style ) part129 Material Components
引き続き、Material Componentsについて学びます。
SliverAppBar, SliverList, FlexibleSpaceBar
SliverAppBar,SliverList,FlexibleSpaceBarについて本書に以下のように記述されています。
SliverAppBar,SliverList,FlexibleSpaceBarは、画面上部にあるヘッダー部分が一覧の下にスクロールするにつれて、狭くなっていき、しだいに普通のApBarになり、さらに一覧の一番上に到達すると反対にヘッダー部分が広くなる
・・・🤔どういうことなのでしょうか？
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'),
),
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
floating: true,
pinned: true,
expandedHeight: 200.0,
flexibleSpace: FlexibleSpaceBar(
title: const Text('FlexibleSpaceBar'),
centerTitle: true,
background: Stack(
fit: StackFit.expand,
children: <Widget>[Image.asset('images/cat_nekoko.png')],
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext content, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 30,
),
),
],
),
),
);
}
}
なるほど！スクロールすると上部のヘッダ(?)が自動的に隠れるわけですね。
最後に
本書ではサンプルの下に参考画像が掲載されていました。
ブログだと動いているサンプルを確認できるのが利点ですよね😉
今日はここまで！