플러터 UI 챌린지 #1

UI 특징

• BottomNavigationBar 가 스캐폴드의 Body를 컨트롤 하는 구성
• AppBar와 BottomNavigationBar 를 제외 하고, 상 - 중 - 하 3단계로 구분 할 수 있는 구조
• 상단
  • Container의 BoxDecoration에서 BorderRadius 값을 설정 해 테두리가 둥근 박스 설정
  • 국가 설정 버튼, 전화 버튼, SMS 버튼 디자인은 Chip 위젯을 이용하면 편리하게 구현 가능.
• 중단
  • Row를 사용해 3가지 위젯을 가로로 배치. 배치 될 위젯의 수가 3개로 고정돼있고, 화면을 벗어나는 구성도 아니므로 ListView는 사용하지 않는다.
• 하단
  • 이미지가 박스를 벗어난 형태. Stack으로 박스 위에 이미지를 쌓은 다음, Positioned 위젯으로 위치를 조절 한다. 이미지와 텍스트들은 Row로 묶여 있고, 텍스트들은 Column으로 묶여있다. 따라서 Positioned로 이미지의 위치를 조절하면 텍스트들도 따라 가는데, Column최상단에 SizedBox를 넣어서 '눌렀다'
  • 색상은 그라디언트가 적용. BoxDecoration의 gradient 속성에 LinearGradient값 적용.

BottomNaviagtionBar

코드

BottomNavigationBar(
          currentIndex: _selectedBottomItemIndx,
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.grey,
          onTap: (index) {
            setState(() {
              _selectedBottomItemIndx = index;
            });
          },
          type: BottomNavigationBarType.fixed,//선택 애니메이션 제거
          items: [
            renderBottomItem(icon: Icons.home, itemIndex: 0),
            renderBottomItem(icon: Icons.insert_chart_rounded, itemIndex: 1),
            renderBottomItem(icon: Icons.content_copy_rounded, itemIndex: 2),
            renderBottomItem(icon: Icons.error, itemIndex: 3),
          ],
        ),

테마 코드

  bottomNavigationBarTheme:
            const BottomNavigationBarThemeData(elevation: 0),//바텀 네비게이션 바 상단의 Divider 제거

BottomNavigationBar는 스캐폴드의 bottomNavigationBar 파라미터에 넣었다. 이름대로 넣으면 된다. 잘 모를 땐 bottomSheet이나 persistentFooterButtons에 넣기도 했다.

각 아이템을 선택 할 때 플러터 프레임워크에서 기본적으로 설정한 애니메이션이 작동 하는데, 해당 애니메이션을 끄고 싶다면 BottomNavigationBarType.fixed를 적용하면 된다.

BoxDecoration

하단의 "한번 검사 받아보세요" 영역을 구현 할 때 작성 했던 코드 중

decoration: BoxDecoration(
            gradient: const LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [
                GRADIENT_START_COLOR,
                GRADIENT_CENTER_COLOR,
                GRADIENT_END_COLOR,
              ],
            ),
            borderRadius: BorderRadius.all(
              Radius.circular(10.r),
            ),
          ),

LinearGradient는 선형 그라데이션을 구현 할 때 사용된다. begin과 end에 시작지점/종료지점을 각각 Alignment로 지정 하고, colors에 색상 배열을 넣으면 된다. 시작지점에서 색상 배열의 첫번째 값부터 시작해, 종료 지점에서 색상 배열의 마지막 값으로 끝나는 방식이다.

박스를 벗어난 이미지(?)

 clipBehavior: Clip.none,

Stack 을 이용해서 컨테이너 위에 이미지를 쌓아도, 이미지가 컨테이너의 높이 이상 벗어나지 못하고 상단 부분이 짤리게 된다. 이때, 벗어난 부분을 자르지 않고 벗어난 채로 그리고 싶다면 ClipBehavior 파라미터에 Clip.none값을 주면 된다.