そらえふのブリキ

Flutter: SliverAppBar と TabBarView を組み合わせたサンプルコード

2024-06-06

このサンプルコードは、SliverAppBar と TabBarView を組み合わせた画面を作成する際の基本的な実装例です。AppBar と TabBar を連携させることで、スクロール時に AppBar が固定され、タブ切り替え時に対応するコンテンツが表示されるようになります。背景画像やタブの数、コンテンツの内容などをカスタマイズして、アプリケーションのデザインに合わせて利用してください。

import 'package:flutter/material.dart';

class SliverAppBarTabViewSample extends StatelessWidget {
  @override
  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')),
            ],
          ),
        ),
      ),
    );
  }
}

解説:

  • NestedScrollView: SliverAppBar と TabBarView を連携させるために使用します。
  • SliverAppBar:
    • pinned: true でスクロールしても AppBar が画面上部に固定されます。
    • floating: true でスクロール開始と同時に AppBar が表示されます。
    • expandedHeight で AppBar の最大の高さを指定します。
    • flexibleSpace で AppBar が展開されたときの背景をカスタマイズします。
    • bottom に TabBar を配置します。
  • DefaultTabController: TabBar と TabBarView を連携させるために使用します。
  • TabBar: タブのリストを表示します。
  • TabBarView: タブに対応するコンテンツを表示します。

そらえふ

ソフトウェアエンジニア。趣味は競馬、写真、ゲーム。

お問い合わせはXのDMでお願いします。