본문 바로가기

Flutter-플러터/플러터 공부

Flutter - SiverAppbar

반응형

 

 

요걸 쓰면 굉장히 모던한 동작이 구현되는 앱을 만들 수 있다. 

패캠 강의를 들으면서 알게된 위젯입니다. 

...패캠 강의가  처음에는 설명을 잘 한다고 생각했는데.... 토스 챕터에서는 뭔가... 빠르게 끝나려고만 하는게 느껴진다 ㅠㅠ

 

사용방법은 

 

1. CustomScrollView 위젯을 만든다. 

2. slivers =[ SliverAppbar()]를  만든다. 

3. SliverAppbar(actions[넣고 싶은 아이콘 위젯들을 넣는다. ]) 

 

 

 

바드의 답변 

 

Flutter에서 SliverAppBar를 사용해야 하는 이유는 다음과 같습니다.

  • SliverAppBar 위젯은 스크롤 가능한 영역인 CustomScrollView 위젯에 추가할 수 있습니다.
  • SliverAppBar 위젯의 expandedHeight 속성을 사용하여 AppBar가 확장되는 높이를 설정할 수 있습니다.
  • SliverAppBar 위젯의 floating 속성을 사용하여 AppBar가 스크롤할 때 떠다니는지 여부를 설정할 수 있습니다.
  • SliverAppBar 위젯의 pinned 속성을 사용하여 AppBar가 스크롤할 때 고정되는지 여부를 설정할 수 있습니다.

SliverAppBar 위젯을 사용하면 AppBar를 스크롤 가능한 영역에 추가할 수 있으므로, AppBar를 항상 화면에 표시할 수 있습니다. 이는 사용자에게 AppBar를 쉽게 접근할 수 있게 해줍니다. 또한, SliverAppBar 위젯의 expandedHeight 속성을 사용하여 AppBar가 확장되는 높이를 설정할 수 있으므로, AppBar를 더 큰 크기로 표시할 수 있습니다. 이는 사용자에게 AppBar에 더 많은 정보를 표시할 수 있게 해줍니다. SliverAppBar 위젯의 floating 속성과 pinned 속성을 사용하여 AppBar가 스크롤할 때 어떻게 동작할지 설정할 수 있습니다. 이는 사용자에게 AppBar를 더 편리하게 사용할 수 있게 해줍니다

 

 

Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverAppBar(
        expandedHeight: 100.0,
        floating: true,
        pinned: true,
        title: Text('AppBar'),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return Container(
            height: 50.0,
            color: Colors.blue,
          );
        }, childCount: 100),
      ),
    ],
  ),
);
반응형

'Flutter-플러터 > 플러터 공부' 카테고리의 다른 글

Geolocator 패키지  (0) 2023.08.05
Flutter 다운 그레이드  (0) 2023.08.02
Flutter 오류 - 에뮬 실행이 안됨  (0) 2023.07.25
Flutter - FilledButton  (0) 2023.07.19
Flutter - 폴더,파일 네이밍 짓는 규칙  (0) 2023.07.18