このサンプルコードは、SliverAppBar と TabBarView を組み合わせた画面を作成する際の基本的な実装例です。AppBar と TabBar を連携させることで、スクロール時に AppBar が固定され、タブ切り替え時に対応するコンテンツが表示されるようになります。背景画像やタブの数、コンテンツの内容などをカスタマイズして、アプリケーションのデザインに合わせて利用してください。
import 'package:flutter/material.dart';
class SliverAppBarTabViewSample extends StatelessWidget {
Widget build(BuildContext context) {
return DefaultTabController(
length: 3, // タブの数
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text('SliverAppBar + TabView'),
pinned: true, // スクロールしてもAppBarを固定
floating: true, // スクロール開始と同時にAppBarを表示
expandedHeight: 150.0, // AppBarの最大高さ
flexibleSpace: FlexibleSpaceBar(
background: Image.network(
'https://example.com/your_image.jpg', // 背景画像
fit: BoxFit.cover,
),
),
bottom: TabBar(
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
],
),
),
];
},
body: TabBarView(
children: [
Center(child: Text('Tab 1 Content')),
Center(child: Text('Tab 2 Content')),
Center(child: Text('Tab 3 Content')),
],
),
),
),
);
}
}
解説:
pinned: true
でスクロールしても AppBar が画面上部に固定されます。floating: true
でスクロール開始と同時に AppBar が表示されます。expandedHeight
で AppBar の最大の高さを指定します。flexibleSpace
で AppBar が展開されたときの背景をカスタマイズします。bottom
に TabBar を配置します。ソフトウェアエンジニア。趣味は競馬、写真、ゲーム。
お問い合わせはTwitterのDMでお願いします。