【Flutter】 FlexibleSpaceBarのStretchModesを使ってスライドしたときにびよーんってさせる

#はじめに

Flutter Widget of the WeekでFlexibleSpaceBarのStretchModesが紹介されたので実際に使ってみました

#作りたいもの

###コード

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: <Widget>[

          //びよーんの部分
          SliverAppBar(
            stretch: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('My Dog'),
              background: Image(image: AssetImage("images/mydog.jpg"),
              fit: BoxFit.cover),
              centerTitle: true,

              stretchModes: <StretchMode>[
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
                StretchMode.fadeTitle,
              ],
            ),
          ),

          //ここからスクロールするリストを作る
          SliverFixedExtentList(
            itemExtent: 100.0,
            delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 2)],
                    child: Text('List Item $index'),
                  );
                },
                childCount: 8
            ),
          ),
        ],
      ),
    );
  }
}

#手順

###まずはこれ

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          
          //びよーんの部分
          SliverAppBar(
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('My Dog'),
              background: Image(image: AssetImage("images/mydog.jpg"),
              fit: BoxFit.cover),
              centerTitle: true,
            ),
          ),

          //スクロールするリスト
          SliverFixedExtentList(
            itemExtent: 100.0,
            delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 2)],
                    child: Text('List Item $index'),
                  );
                },
                childCount: 8
            ),
          ),
        ],
      ),
    );
  }
}

・sliverAppBarはCustomScrollViewの子要素として使います。

・expandedHeightでスクロールして伸ばしたときに広がる高さを指定します。

・fit: BoxFit.coverで画像を幅いっぱいに広げます。

SliverFixedExtentListの説明は長くなるので今回は省きます。

ここに説明が載っています。　
Flutter Doc JP SliverAppBar

##本題

 body: CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: <Widget>[

SliverAppBar(
            stretch: true,
            expandedHeight: 250.0,

・BouncingScrollPhysicsを使います。
これを使い忘れていて、めちゃくちゃ手こずりました。

・SliverAppBarのstretchをtrueにします。

これでStretchModesを使って、スクロールしたときのエフェクトをつけられるようになります。

flexibleSpace: FlexibleSpaceBar(
              title: Text('My Dog'),
              background: Image(image: AssetImage("images/mydog.jpg"),
              fit: BoxFit.cover),
              centerTitle: true,

              //ここでStretchModesでを使います。
            ),

　

StretchMode.zoomBackgroundでスクロールしたときにズームさせます。

stretchModes: <StretchMode>[
                StretchMode.zoomBackground,
              ],

strethMode.blurBackgroundでスクロールしたときにぼやけさせます。

stretchModes: <StretchMode>[
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
              ],

StrethMode.fadeTitleでスクロールしたときにタイトルを消します。

stretchModes: <StretchMode>[
                StretchMode.zoomBackground,
                StretchMode.blurBackground,
                StretchMode.fadeTitle,
              ],

#まとめ

今回はFlutter Widget of the Weekで紹介されたFlexibleSpaceBarを使ってみました。
勉強になるので随時取り上げていきたいと思っています。

#参考文献

・SliverAppBar - Configurable overscroll stretch with callback feature & FlexibleSpaceBar support

・SliverAppBar class

・CustomScrollView class