【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part93 Scrolling
「 基礎 から 学ぶ Flutter 」という書籍で 学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part93 )です。
前回
【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part92 Scrolling
引き続き、Scrollingについて学びます。
Scrolling
CustomScrollView, NestedScrollViewウィジェット
CustomScrollView
とNestedScrollView
ウィジェットはSliverAppBar
とSliverList
ウィジェットと一緒によく使用されるウィジェットです。
SliverAppBar
とSliverList
ウィジェットはヘッダーとスクロールの連動部品のようなのですが現時点ではよくわかりません。
別の章で説明があるようです。
main.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'nestedscrollviewpage.dart';
void main() {
runApp(new MaterialApp(home: new NestedScrollViewPage()));
}
nestedscrollviewpage.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'listpage.dart';
class NestedScrollViewPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: DefaultTabController(
length: 2,
child: NestedScrollView(
headerSliverBuilder: (
BuildContext context,
bool innerBoxIsScrolled,
) {
return <Widget>[
onetwoSliver(context, innerBoxIsScrolled),
];
},
body: TabBarView(children: <Widget>[
ListPage('One'),
ListPage('Two'),
]),
),
),
),
);
}
Widget onetwoSliver(BuildContext context, bool innerBoxIsScrolled) {
return SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
// childというプロパティは無くなり、sliverプロパティを使うようになったようです。(たぶん)
sliver: SliverAppBar(
title: const Text('NestedScrollView Sample'),
pinned: true,
expandedHeight: 150.0,
forceElevated: innerBoxIsScrolled,
bottom: const TabBar(
tabs: <Widget>[
Tab(text: 'One'),
Tab(text: 'Two'),
],
),
),
);
}
}
listpage.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ListPage extends StatelessWidget {
final String name;
ListPage(this.name);
@override
Widget build(BuildContext context) {
return SafeArea(
top: false,
bottom: false,
child: Builder(
builder: (BuildContext context) {
return CustomScrollView(
key: PageStorageKey<String>(name),
slivers: <Widget>[
SliverOverlapInjector(
handle:
NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
SliverPadding(
padding: const EdgeInsets.all(8.0),
sliver: SliverFixedExtentList(
itemExtent: 48.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 30,
),
),
),
],
);
},
),
);
}
}
確認
最後に
複雑なスクロールのサンプルでしたね!
ネストが深すぎてカッコを合わせるのが大変でしたよ😥
今日はここまで!
ディスカッション
コメント一覧
まだ、コメントがありません