CustomScrollView 와 SliverAppBar

sliver는 스크롤 가능한 영역을 의미합니다. 보통 CustomScrollView 안에 위치합니다.

SliverAppBar는 일반적으로 CustomScrollView의 첫째 자식으로 사용됩니다. 

class _MyHomePageState extends State<MyHomePage> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: CustomScrollView(

        slivers: <Widget>[

          SliverAppBar(

            title: Text("SliverAppBar"),

          )

        ],

      ),

    );

  }

}

CustomScrollView를 채우기위해서 SliverAppBar로 앱바를 만들었고, 이제 차일드위젯에 SliveList혹은 SliveGrid를 추가할 수 있습니다.

SliverList(

delegate: SliverChildBuilderDelegate(

(context, index) {

return ListTile(title: Text("Item $index"));

},

childCount: 20,

),

)

전체 소스 입니다.

더 아래에 있는 SliverAppBar의 생성자의 옵션들을 넣어 보면 기능을 알 수 있습니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: MyHomePage(title: 'Flutter Demo Home Page'),

);

}

}

class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

@override

Widget build(BuildContext context) {

return Scaffold(

body: CustomScrollView(

slivers: <Widget>[

SliverAppBar(

title: Text("SliverAppBar"),

backgroundColor: Colors.grey,

expandedHeight: 200,

flexibleSpace: Placeholder(),

//pinned: true,

floating: true,

snap: true,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(30.0),

),

),

SliverList(

delegate: SliverChildBuilderDelegate(

(context, index) {

return ListTile(title: Text("Item $index"));

},

childCount: 20,

),

)

],

),

);

}

}

SliverAppBar의 생성자 이고 테스트 해본 named parameter들의 내용입니다.

flexibleSpace	현재는  Placeholder()가 있지만  FlexibleSpaceBar(title: Text("flexibleSpace"))를 넣어 줄 수도 있음.
centerTitle	타이틀을 가운데 표시할 것인가(true), 왼쪽에 표시할 것인가(false)
titleSpacing	타이틀과 왼쪽 보더사이의 공간인듯.
pined	스크롤을 올릴 때 SliverAppBar가 남아있음(true), 안 남아 있음(false)
floating	스크롤 내릴때 SliverAppBar가 나옴(true),  안나옴(false)
snap	floating이 true일 때만 true값을 가질 수 있음. floating 중간에 손을 땠을 때 SliverAppBar의 사이즈가 끝으로감(max혹은 min)(true), 그대로 멈춤(false)
shap	RoundedRectangleBorder를넘겼는데 ShapBorder클래스를 확장하여 다양한 모양을 만들 수 있음.

const SliverAppBar({

Key key,

this.leading,

this.automaticallyImplyLeading = true,

this.title,

this.actions,

this.flexibleSpace,

this.bottom,

this.elevation,

this.forceElevated = false,

this.backgroundColor,

this.brightness,

this.iconTheme,

this.actionsIconTheme,

this.textTheme,

this.primary = true,

this.centerTitle,

this.titleSpacing = NavigationToolbar.kMiddleSpacing,

this.expandedHeight,

this.floating = false,

this.pinned = false,

this.snap = false,

this.shape,

})

https://flutter.dev/docs/cookbook/lists/floating-app-bar