CustomScrollView 와 SliverAppBar

flutter.widget

CustomScrollView 와 SliverAppBar

paulaner80 2019. 11. 14. 22:10

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

저작자표시 (새창열림)