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

in SCT.암호화폐.Cryptolast month (edited)

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

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


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

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

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


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

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


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

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


응용하기

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

이런 UI 는 어떤가요?

Happy Coding~!

Sort:  

[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]

오우오우오우 완벽한것 같은뎅~~ 더 손댈 건 없을듯!! ㅋㅋㅋ

쭉쭉 개발되고 있구먼!! 화이팅이네!!!

글고 이미지 잘 고른듯 ㅋㅋㅋㅋ