[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의 작동을 확인할 수 있다!..
넘 어려어.... 몇시간을 버린게야...
Author And Source
이 문제에 관하여([Flutter] TVING 클론 프로젝트_1. 홈화면 상단바), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jjinneeee/Flutter-TVING-클론-프로젝트1.-홈화면-상단바저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)