【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part93 Scrolling

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part93 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part92 Scrolling

引き続き、Scrollingについて学びます。

Scrolling

CustomScrollView, NestedScrollViewウィジェット

CustomScrollViewNestedScrollViewウィジェットはSliverAppBarSliverListウィジェットと一緒によく使用されるウィジェットです。
SliverAppBarSliverListウィジェットはヘッダーとスクロールの連動部品のようなのですが現時点ではよくわかりません。
別の章で説明があるようです。

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,
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

 

確認

最後に

複雑なスクロールのサンプルでしたね!
ネストが深すぎてカッコを合わせるのが大変でしたよ😥

今日はここまで!