[Dev][Flutter] 플러터로 스팀앱 만들기
요즘 Flutter 코딩 공부를 하고 있습니다.
Flutter의 SliverAppBar 문서를 보면서 학습하다가, 재미있는 UI가 생각나서 구현해보았습니다.
먼저 단순한 AppBar 부터 만들어보겠습니다.
Scaffold
에 CustomScrollView
와 SliverAppBar
를 사용하여 확장된 AppBar를 만들어줍니다. 배경 이미지를 넣을 예정이라서 expandedHeight
를 200으로 넉넉하게 잡았습니다.
위 코드를 실행하면 화면은 아래와 같습니다.
그 다음에는 AppBar 배경에 이미지를 추가합니다. 코인/주식 모두 잘 되길 기원하며 기도하는 이미지를 사용했습니다.
"주식 & 코인 모두 떡상하길 기도합니다. 제발~!"
그런데 AppBar에 배경 이미지를 넣으니 AppBar 타이틀이 잘 안보이네요. 그리고 배경 이미지 때문에 글에 집중이 잘 안됩니다. 그래서 이미지에 블러 효과를 조금 줘봤습니다.
블러 효과는 이렇게 주면 됩니다.
응용하기
AppBar에 글쓰기 버튼을 크게 넣었습니다. 그리고 AppBar가 줄어들면 글쓰기 버튼이 플로팅 버튼으로 나타나도록 해봤습니다.
이런 UI 는 어떤가요?
Happy Coding~!
[US$49.00](▼14%)[Nespresso]스타벅스 네스프레소 호환 캡슐 7종 / 120 캡슐 골라담기 / 20개씩 총 6종류 교차 선택 가능 / 중복 선택 가능 / 재고 확보 / 무료배송 / 개당 약 486원 최저가★
WWW.QOO10.COM[US$48.50](▼31%)[illy]★큐텐 최저가!!★일리 100캡슐/야콥스 100캡슐/돌체구스토 108캡슐/스타벅스 120캡슐 네스프레소 호환 캡슐★무료배송★
WWW.QOO10.COM@anpigon transfered 1.0 KRWP to @krwp.burn. voting percent : 0.19%, voting power : 79.16%, steem power : 1768560.59, STU KRW : 1200.
@anpigon staking status : 40 KRWP
@anpigon limit for KRWP voting service : 0.12 KRWP (rate : 0.003)
What you sent : 1.0 KRWP
Refund balance : 0.88 KRWP [53763770 - bba30cc75f0ccca42b3ec2d1d6c8ae5ef7d1b9bb]
오우오우오우 완벽한것 같은뎅~~ 더 손댈 건 없을듯!! ㅋㅋㅋ
쭉쭉 개발되고 있구먼!! 화이팅이네!!!
글고 이미지 잘 고른듯 ㅋㅋㅋㅋ