Sliver

sliver가 뭐나면 slivers are parts of scrollable area. 즉 스크롤 가능한 영역을 flutter에서 부르는 말이다.

 

sliver를 사용하는 데에는 한가지 조건이 있다.

언제나 CustomScrollView 내부에 정의되어야 한다.

https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html

 

그리드 뷰, 리스트 뷰, 앱바를 구분하지 않고 한번에 모두 스크롤 다운 하고 싶다면 Sliver 종류(SliverList, SliverGrid, SliverAppBar)를 사용하자.

 

아래에 나와있지 않지만 SliverFillRemaining이라고 해서 빈 영역을 슬리버의 영역으로 지정하는 위젯도 있다.

 

SliverAppBar를 한 번 만들어보았습니다.

Sliver하게 만들어야 하니 Scaffold에 appBar을 주지 않아야하고, CustomScrollView의 Sliver 속성을 사용해야 하는 것을 잊지맙시다.

 

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(appBarTheme: AppBarTheme(color: Colors.blueGrey)),
        home: Home());
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          // Whether the app bar should remain visible at the start of the scroll view
          // 스크롤을 내렸을 때 앱바가 남아 있을 것이냐
          pinned: false,
          // 사용자가 살짝 스크롤을 올렸을 때 appBar의 전체를 보여줄 것인가
          floating: true,
          // floating이랑 비슷합니다.. 솔직히 무슨 차이인지 모르겠습니다.
          snap: false,
          // 헤더의 최대 높이
          expandedHeight: 150.0,
          // 늘어나는 영역의 헤더 UI 정의
          flexibleSpace: const FlexibleSpaceBar(
            title: Text('Sliver한 appbar입니다'),
          ),
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          Container(height: 200, color: Colors.red),
          Container(height: 200, color: Colors.purple),
          Container(height: 200, color: Colors.green),
          Container(height: 200, color: Colors.orange),
          Container(height: 200, color: Colors.yellow),
        ]))
      ],
    ));
  }
}