원래는 리액트 네이티브를 공부하려고 했는데.. 리액트배울땐 분명히 재밌었는데 리액트 네이티브는 그렇게 호감이 안가서... 거기다가 어디서 주어들은 바로는 페이스북이 점점 리액트에 대한 지원도 안해주고 있다길래 플러터를 시작해보려고한다.
물론 한국에서 아직 검색해도 별게 안나오는 것때문에 영어로 거의 다 검색을 해서 만드는거라 피곤하긴 하지만 애니메이션 부분에서라던가 라우팅, 여러방면에서 리액트 네이티브보다 편하게 느껴지기도했고, 프론트 시작한뒤로 자바를 얼마 안보긴했지만. 그래도 어느정도의 지식은 있었기때문에 자바와 비슷하게 생긴 dart 언어도 그렇게 무섭게 생겨보이지는 않았달까?
오히려 안드로이드 스튜디오가 인텔리제이 기반이기때문에 리팩토링이라던가 제너레이터 기능 부분에서 리액트보다 훨씬 쉽게 작성할수있었기때문에 재밌었던것같다.
서론은 이것으로끝내고 오늘 만드려는 것은 토스앱에서 사용되는 앱바디자인을 플러터로 작성해보려고한다.
스크롤하기전
스크롤 한뒤
원래는 sliverAppBar를 이용해서 움직이는 앱바를 만들수는 있지만, 이미있는것을 사용하면 여러모로 제약도 많기때문에 사용하지 않았다.
(예를들어서 스크롤전엔 펼쳐져있고 스크롤 뒤엔 접히는앱바는 반들기가 쉽지만 그 반대의 경우는 내가 검색한 범위내에선 찾을수가 없었다)
토스 앱을 열어서 확인해보면 알겠지만 토스앱은 스크롤전에는 아무것도 없는 상태였다가 스크롤 한뒤에는 앱바가 생기는것을 볼수있다.
만드려고 하는 앱바의 기본 동작구조는
Stateful 홈 -> 스택 -> 앱바,홈화면
스택을 사용하는 이유는 앱바와 홈화면의 레이아웃은 겹치기때문에 스택을 이용했다.
기본적으로 제공되는 앱바는 애당 기능을 충족할수없기때문에 상태바의 색상만 관리할수있도록 빈 앱바로 만들어 둔다
class EmptyAppbar extends StatelessWidget implements PreferredSizeWidget {
const EmptyAppbar({Key? key,this.color=Colors.transparent}) : super(key: key);
final Color color;
@override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: color,
elevation: 0,
);
}
@override
Size get preferredSize => Size(0.0,0.0);
}이렇게 지정한다음에 scaffold 내에서 appBar 안에 집어넣어주면 상태바의 색상을 변경해줄수도있다.
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: EmptyAppbar(color: _isTop?Colors.transparent:kStatusBarColor,),물론 상태바의 기본적으로 달려있는 희끄무리한 배경을 없애려면 따로 설정을 해주어야한다
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.transparent));무튼 이렇게만해도 스테이터스바 색상을 변경할수있는 아무것도 없는 앱바를 만들수있다!!
기본 지원앱바
(기본적으로 설정되어있는게 많아서 매번 설정해야하는 귀찮음이있으니 한번에 빈 앱바를 지정해둬서 쉽게 만들수있다, 물론 기본지원앱바도 높이 설정이 가능하긴하다.)
emptyAppbar 사용후
이렇게 하면 완전히 커스터마이징한 앱바를 만들 준비가 끝났다!
그럼 다음에 또 정리하러ㅎㅎ
