소개

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 KR 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 클래스

· CustomScrollView class