패스트캠퍼스 환급챌린지 21일차 미션(2월 21일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 Home 화면을 구현해보았다.

토스 앱의 홈 화면은 이렇게 헤더 영역과 콘텐츠 영역이 수직으로 나열된 레이아웃을 가지고 있고, 스크롤을 내려도 헤더의 모습이 보이는 이른바 고정 헤더(Sticky Header)가 적용돼있다. 그럼 헤더와 스크롤 영역은 겹쳐지는 관계라고 생각할 수 있고, 이럴 때 활용할 수 있는 적절한 위젯은 Stack이 된다.

 

@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Container(
         child: Stack(children: [
           SingleChildScrollView(child: Column(),),
           TossAppBar()
         ],),
      ),
    );
  }

 

이렇게 SingleChildScrollView 위젯을 앞에 배치해서 상대적으로 밑에 위치할 수 있도록 해주었다.

상단바는 이렇게 구현해주었는데, 아래와 같이 하나의 Row 위젯에 아이콘과 간격을 children으로 나열하고, 최대 길이의 간격이 필요한 곳에는 Expanded와 빈 Container 위젯을 활용해 늘려주었다. (justify-between의 효과)

 

저 종 모양 아이콘은 사용자가 읽지 않은 알림이 있을 경우 우측 상단에 작은 빨간 점을 노출시키는데, 이것도 Stack과 Positioned.fill을 활용해서 구현할 수 있다.

width10,
Stack(
    children: [
      Image.asset(
        '$basePath/icon/notification.png',
        height: 30,
      ),
      if(_showRedDot)Positioned.fill(
          child: Align(
        alignment: Alignment.topRight,
        child: Container(
          width: 6,
          height: 6,
          decoration: const BoxDecoration(
              shape: BoxShape.circle, color: Colors.redAccent),
        ),
      ))
    ],
),
width10

Debug 띠에 조금 가려지지만 잘 구현된 것을 볼 수 있다. _showRedDot은 bool 타입의 상태로, 값에 따라 저 빨간점을 노출시키거나 가려줄 것이다.

 

토스뱅크 영역으로 이동하는 버튼은 내부에 포함되는 토스뱅크 Label과 우측의 화살표를 감싼 Row 객체를 child로 받는 컨테이너를 별도의 위젯으로 분리해 재사용성을 높이며 작업했다. 아래는 자산 영역까지 만든 결과이다.

 

velocity_x 패키지와 Row, Coloumn, Expanded 위젯을 활용해서 적절하게 레이아웃을 구성했으며, 송금 버튼의 경우 조금 더 밝은 색상은 전역 색상 팔레트에 해당 색상을 등록해 적용함으로써 일관적인 작업을 경험할 수 있었다.

여기까지 작업하며 느낀게, 확실히 일관성을 지키며 코딩하는 것과 리팩터링을 뒷일로 미루지않고 개발과 병렬적으로 진행해야 나중에 개발하기가 훨씬 더 편해진다는 것이다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N