[Dev][Flutter] 플러터로 스팀앱 만들기

요즘 Flutter 코딩 공부를 하고 있습니다.

Flutter의 SliverAppBar 문서를 보면서 학습하다가, 재미있는 UI가 생각나서 구현해보았습니다.

먼저 단순한 AppBar 부터 만들어보겠습니다.

Scaffold 에 CustomScrollView와 SliverAppBar를 사용하여 확장된 AppBar를 만들어줍니다. 배경 이미지를 넣을 예정이라서 expandedHeight를 200으로 넉넉하게 잡았습니다.

위 코드를 실행하면 화면은 아래와 같습니다.

그 다음에는 AppBar 배경에 이미지를 추가합니다. 코인/주식 모두 잘 되길 기원하며 기도하는 이미지를 사용했습니다.

"주식 & 코인 모두 떡상하길 기도합니다. 제발~!"

그런데 AppBar에 배경 이미지를 넣으니 AppBar 타이틀이 잘 안보이네요. 그리고 배경 이미지 때문에 글에 집중이 잘 안됩니다. 그래서 이미지에 블러 효과를 조금 줘봤습니다.

블러 효과는 이렇게 주면 됩니다.

응용하기

AppBar에 글쓰기 버튼을 크게 넣었습니다. 그리고 AppBar가 줄어들면 글쓰기 버튼이 플로팅 버튼으로 나타나도록 해봤습니다.

이런 UI 는 어떤가요?

Happy Coding~!