[Flutter] TVING 클론 프로젝트_1. 홈화면 상단바

플러터 구현 연습 좀 할까 하고 클론프로젝트를 진행해보기로 했다😐

어떤 어플로 진행할지 고민하다 티빙을 골랐다..! 별다른 이유는 없이...그냥ㅇ...

모르는거 또 모르기 싫어 남기는 기록

---

메인화면 상단을 보면 처음엔

tving로고와 화면공유 버튼과 마이페이지로 갈 수 있는 버튼이 있고 아래 탭들이 있다 이때 스크롤을 내리면 로고와 버튼들이 사라진다

이를 구현하기 위해 sliverAppBar을 사용해보았다

sliver를 사용하기 위해 CustomScrollView를 만들어 그 안에 sliver > SliverAppBar를 만들면 된다

CustomScrollView(
	slivers: <Widget>[
		SliverAppBar(
			backgroundColor: Colors.lightGreen,
			elevation: 0,
			pinned: true, // 축소시 상단에 appbar를 고정할것인가
			expandedHeight: 100, // 확대시 최대 높이
			flexibleSpace: FlexibleSpaceBar(
				titlePadding: EdgeInsets.zero,
				title: ElevatedButton(onPressed: () {}, child: Text("버튼")),
				background: Text("TVING"),
			),
			),
		SliverList(
			delegate: SliverChildListDelegate(
			...
            ),
        ),
     ],
);

FlexibleSpaceBar의 속성들이 시간을 많이 잡아먹었다...😥

title: appBar에 적힐 내용. finned를 true로 줬기 때문에 스크롤을 올려도 사라지지 않음
background: 뒷배경에 깔리는 위젯. 스크롤하면 사라질 곳

SliverList부분에 많은 위젯을 넣어주어야 스크롤이 작동해 SliverAppBar의 작동을 확인할 수 있다!..

넘 어려어.... 몇시간을 버린게야...