[굿위시 제작기] 5. 바텀 내비게이션 제작하기

 

---

바텀 내비게이션 - 모바일UI의 대표적인 내비게이션 바

많은 모바일 앱들을 살펴보면, 대부분이 화면 하단에 내비게이션 바를 설치해놨습니다.

마치 윈도우의 작업표시줄이나, Mac의 Dock처럼, 많은 UI가 화면 하단을 이용해서 다른 페이지나 프로그램으로 들어가는 것을 유도하고 있습니다.

그렇기에 사용자들에게도 바텀 내비게이션은 아주 익숙한 UI이고, 굿위시 또한 바텀 내비게이션을 채택했습니다.

 

 

---

제작 결과물

 

 

 

 

---

Scaffold 위젯의 속성 : bottomNavigationBar

MaterialApp(
      debugShowCheckedModeBanner: false, // 디버그 표시를 없앤다.
      home: DefaultTabController(
        animationDuration: Duration.zero,
        length: 5,
        child: Scaffold(
          bottomNavigationBar: !isTablet ? const BottomNavigation() : null,
          body:
              isTablet ? const BuildTabletLayout() : const BuildMobileLayout(),
        ),
      ),
    );

앱의 기본 뼈대가 되어주는 Scaffold위젯에는 bottomNavigationBar라는 속성이 있습니다.

이 속성은 Widget을 전달받습니다.

여기에 BottomNavigation이라는 커스텀 위젯을 직접 제작했습니다.

 

 

import 'package:flutter/material.dart';
import 'package:goodwishes/widgets/navigation_tab.dart';

class BottomNavigation extends StatelessWidget {
  const BottomNavigation({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        decoration: const BoxDecoration(
          border: Border(
            top: BorderSide(width: 0.1),
          ),
          borderRadius: BorderRadius.horizontal(
            right: Radius.circular(20),
            left: Radius.circular(20),
          ),
        ),
        height: 75,
        child: const TabBar(
          indicatorColor: Colors.transparent,
          labelColor: Colors.black,
          
          tabs: <Widget>[
            NavigationTab(
              icon: Icons.home,
              text: '굿즈',
            ),
            NavigationTab(
              icon: Icons.shopping_bag,
              text: '위시',
            ),
            NavigationTab(
              icon: Icons.add_box,
              text: '추가',
            ),
            NavigationTab(
              icon: Icons.search,
              text: '검색',
            ),
            NavigationTab(
              icon: Icons.star,
              text: '즐겨찾기',
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 주목해야 할 부분은 TabBar()위젯입니다.

 

 

 

TabBar(
          indicatorColor: Colors.transparent,
          labelColor: Colors.black,
          // controller: _tabController,
          tabs: <Widget>[
            NavigationTab(
              icon: Icons.home,
              text: '굿즈',
            ),
            NavigationTab(
              icon: Icons.shopping_bag,
              text: '위시',
            ),
            NavigationTab(
              icon: Icons.add_box,
              text: '추가',
            ),
            NavigationTab(
              icon: Icons.search,
              text: '검색',
            ),
            NavigationTab(
              icon: Icons.star,
              text: '즐겨찾기',
            ),
          ],
        ),

TabBar위젯은 Tabs라는 속성을 받는데, 이 안에 위젯으로 구성된 리스트를 전달 받습니다.

 

 

 

 

            NavigationTab(
              icon: Icons.home,
              text: '굿즈',
            ),
            NavigationTab(
              icon: Icons.shopping_bag,
              text: '위시',
            ),
            NavigationTab(
              icon: Icons.add_box,
              text: '추가',
            ),
            NavigationTab(
              icon: Icons.search,
              text: '검색',
            ),
            NavigationTab(
              icon: Icons.star,
              text: '즐겨찾기',
            ),

리스트에 담긴 탭 위젯의 순서와 종류에 따라, 그 순서 그대로 UI에 표시됩니다.

 

 

NavigationTab 역시, 아이콘과 텍스트를 직접 배치한 커스텀 위젯입니다.

NavigationTab 코드 전문을 보시려면 밑의 접은 글을 펼쳐주세요.

import 'package:flutter/material.dart';

class NavigationTab extends StatelessWidget {
  final IconData icon;
  final String text;

  const NavigationTab({
    super.key,
    required this.icon,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return Tab(
      icon: Icon(
        icon,
        size: 35,
      ),
      iconMargin: const EdgeInsets.only(bottom: 4),
      child: Text(
        text,
        style: const TextStyle(
          fontSize: 12,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

 

 

 

---

바텀내비게이션과 페이지를 이어주기 : TabBarView

Scaffold(
      bottomNavigationBar: !isTablet ? const BottomNavigation() : null,
      body: SafeArea(
      child: TabBarView(
        physics: NeverScrollableScrollPhysics(),
        children: [
          GoodsMainPage(),
          WishMainPage(),
          AddGoodsPage(),
          SearchPage(),
          FavoritePage(),
        ],
      ),
    );
  ),

이제 다시, bottomNavigationBar 속성이 있던 Scaffold로 돌아옵니다.

그리고 body에 TabBarView 위젯을 전달합니다.

 

 

TabBarView(
        physics: NeverScrollableScrollPhysics(),
        children: [
          GoodsMainPage(),
          WishMainPage(),
          AddGoodsPage(),
          SearchPage(),
          FavoritePage(),
        ],
      ),

TabBarView()는 children으로 위젯 리스트를 전달받는데, 이 위젯들이 바로 바텀내비게이션 위에서 보여질 페이지들입니다.

아까 TabBar() 위젯의 tabs 속성과 연계되어서, 위젯리스트의 순서를 똑같이 공유합니다.

tabs의 0번 탭은, TabBarView의 children 중 0번 위젯과 연결됩니다.

 

 

TabBarView()는 옆으로 스와이프하면서 페이지를 옮기는 기능이 있습니다.

        physics: NeverScrollableScrollPhysics(),

위 pyshics 속성 코드만 추가해주면, 스와이프가 사라집니다.

 

 

 

---

다음 편은 위시 메인 페이지에 대해 이야기하기

다음은 굿즈 상세 페이지에 대해 이야기해보겠습니다.