CustomScrollView

Sliver를 사용하여 스크롤 효과를 만드는 스크롤뷰 입니다.

import 'package:flutter/material.dart';

class CustomExample extends StatefulWidget {
  const CustomExample({super.key});

  @override
  State createState() => _CustomExampleState();
}

class _CustomExampleState extends State {
  List top = [];
  List bottom = [0];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              pinned: true, // 스크롤시 바텀 영역을 화면 상단에 남길지여부
              snap: false, // 스크롤 중간에 멈출때 appbar를 펼쳐서 배경을 모두 보여준다.
              floating: true, // false시 appbar 최상단고정
              expandedHeight: 200, //최대 확장 높이
              backgroundColor: Colors.yellow,

              //스크롤시 사라짐
              flexibleSpace: FlexibleSpaceBar(
                background: Column(children: [
                  Text(
                    "TEST CODE",
                    style: TextStyle(fontSize: 30),
                  ),
                  Icon(Icons.air_outlined)
                ]),
              ),
              //pinned시 남아있는 영역 PreferredSize로 시작할 것
              bottom: PreferredSize(
                preferredSize: Size.fromHeight(50),
                child: Container(
                  child: Column(children: [Icon(Icons.add), Text("Add")]),
                ),
              ),
            ),
            SliverFixedExtentList(
              itemExtent: 50,
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[10 * (index % 9)],
                    child: Text('List Item $index'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

Sliver관련 위젯을 쓰면 스크롤 상단에 일부의 위젯만 남는 형태의 페이지를 만들기 좋습니다. 단 사용할때 몇가지 알아야 할것들이 있습니다. 

appbar의 바텀영역은 PreferredSize로 시작해야되고

sliver []에는 sliver widget들만 넣을수 있습니다. 위에 보듯이 sliver에 들어가는 최상단 뎁스에만 sliver widget을 쓰면되고 sliver에 child , background 등으로 일반 위젯들을 추가할 수 있습니다.

상단을 고정해서 상단에서는 검색하는 기능을 넣거나 할때 유용하게 사용할 수 있을것 같습니다. 

위에 나온 위젯 외에도 sliverlist, slivergrid 등도 있으니 찾아서 사용하면 됩니다.