# SliverAppBar

4개의 포스트
post-thumbnail

GetX + SliverAppBar

SliverAppBar 적용 화면 SliverAppBar 적용 예시 코드

2023년 4월 26일
·
0개의 댓글
·
post-thumbnail

blur AppBar 만들기

Overview appbar에 blur 효과를 주어 페이지를 스크롤하여도 appBar를 식별할 수 있도록 하자. Code flexibleSpace flexibleSpace 는 app toolbar의 뒤쪽의 widget을 정의한다. 크기도 높이도 똑같으며, stack 과 마찬가지이다. BackdropFilter BackdropFilter는 필터는 상위 또는 상위 위젯의 클립 내의 모든 영역에 적용됩니다. 클립이 없으면 전체 화면에 필터가 적용된다. 고로 ClipRect하위에 위치시켜 사용하도록 하자. 공문서에 의하면 웹 애플리케이션의 HTML 렌더러와 호환되지 않는다 하니 주의하여 사용하여야 겠다. ImageFilter.blur [ImageFilter](https://api.flutter.dev/flutter/dart-ui/Im

2023년 4월 20일
·
0개의 댓글
·
post-thumbnail

[Flutter] SliverAppBar()

SliverAppBar() 이번 글은 appbar를 custom해서 사용하게 해주는 SliverAppBar() 위젯에 대해서 살펴보겠다 SliverAppBar에는 속성 값이 많아 다양하게 custom 가능하다 이 글에서는 기본적인 속성만 볼 예정이다 SliverAppBar를 사용할려면 Scaffold의 body 부분에 CustomScrollView() 위젯의 children 속성 slivers안에 SliverAppBar()와 SliverList()를 넣어서 사용한다 SilverAppBar를 보면 expandedHeight 속성에 최대 높이를 설정하고, snap, floating의 boolean 값으로 스크롤 업을 할 때 appbar를 숨기고, 어느 스크롤 위치에서나 스크롤 다운을 하면 바로 appbar를 보이게끔 설정이 가능하다 flexibleSpace 속성은 FlexibleSpaceBar() 위젯의 값을 주어 확장된 appbar의 위젯을 커스텀하게 된다 S

2021년 10월 22일
·
0개의 댓글
·
post-thumbnail

Flutter - #18. SliverAppBar

내가 보려고 쓰는 Flutter 일기 출처 : https://api.flutter.dev/flutter/material/SliverAppBar-class.html > SliverAppBar 오늘 배워볼 건 SliverAppBar. 주로 CustomScrollView의 첫번째 자식 요소로 쓰이며, 스크롤 내릴 때와 올릴 때 AppBar의 높이가 변하거나, 사라지거나, 올리면 다시 나타나는 등의 효과를 줄 수 있다. 이것저것 뜯어보고 돌려보...려고 했는데 설정 가능한 속성이 이렇게나 많다. ????????????????? 앱바가 중요한건 알겠는데 이렇게까지 설정이 많을 일인가...? 이래봐야 모르겠으니 코드를 보자 > 코드 예시로 알아보자 우선 저번 시간에 돌려본 코드를 가져와서 돌려보겠다.

2021년 6월 15일
·
4개의 댓글
·