SliverAppbar

Sunny·2022년 5월 31일

공식에서는 CustomScrollView와 사용하는 material Design Appbar라고 되어 있다. body에서 사용하고.. 유동적인 appBar로 생각하고 있다.

공식 홈페이지

예시를 통해 이해해보자

return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
pinned: true,
// appbar를 스크롤 뷰의 시작부분에 visible 하게 할지 말지..
//snap: false,
// appbar snap 여부 / floating이 true 일떄만 적용
floating: false,
// 스크롤 할 시 보이게할 지 여부 
//stretch: true,
// 스크롤을 할때 appbar 크기가 늘어나는지..

expandedHeight: 300,
// appbar의 높이라고 생각하자( 최대..?)
 flexibleSpace: FlexibleSpaceBar(
 // appbar 하단에 보여지는 공간
                background: Stack(
                  children: [
                    Positioned.fill(
                      child: Image.network(
                        widget.imgLink,
                        fit: BoxFit.fill,
                        color: BogoColor.bogoOpacity,
                        colorBlendMode: BlendMode.modulate,
                        // blend를 해주면 그림자가 생기듯이 연해진다.
                      ),
                    ),

),
SliverList(
 delegate: SliverChildBuilderDelegate(
 // delegate에는 3가지 정도의 속성이 있으니 차후에 소개해드릴게요.
                      (BuildContext context, int index) {
                      return Column();},),
),
]),
);

profile
즐거움을 만드는 사람

0개의 댓글