[j Flutter] Getx 사용해 BottomNavigationBar 만들기

1. GetView<AppController> 사용하기

class App extends GetView<AppController> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Obx(() {
          switch (RouteName.values[controller.currentIndex.value]) {
            case RouteName.Home:
              return Home();
            case RouteName.album:
              return Album();
            case RouteName.letter:
              return Letter();
            case RouteName.profile:
              return Profile();
          }

          return Container();
        }),
        bottomNavigationBar: Obx(
          () => BottomNavigationBar(
            backgroundColor: AppColors.darkgray,
            type: BottomNavigationBarType.fixed,
            currentIndex: controller.currentIndex.value,
            showSelectedLabels: true,
            selectedItemColor: AppColors.pink2,
            onTap: controller.changePageIndex,
            items: [
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.home,
                    color: AppColors.gray,
                  ),
                  activeIcon: Icon(
                    Icons.home,
                    color: AppColors.pink1,
                  ),
                  label: "홈"),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.photo,
                    color: AppColors.gray,
                  ),
                  activeIcon: Icon(
                    Icons.photo,
                    color: AppColors.pink1,
                  ),
                  label: "앨범"),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.mail_outline,
                    color: AppColors.gray,
                  ),
                  activeIcon: Icon(
                    Icons.mail_outline,
                    color: AppColors.pink1,
                  ),
                  label: "편지"),
              BottomNavigationBarItem(
                  icon: Icon(
                    Icons.person,
                    color: AppColors.gray,
                  ),
                  activeIcon: Icon(
                    Icons.person,
                    color: AppColors.pink1,
                  ),
                  label: "내 프로필"),
            ],
          ),
        ));
  }
}

 - 해당 페이지들을 다 만들어 준다. 

 

 

 

2. GetxController 사용하기 + 다른 클래스에서도 replace 가능하게 하기

class BottomNavigationPageController extends GetxController {
  static BottomNavigationPageController get to => Get.find();

  final currentIndex = 0.obs;

  List<Widget> pages = [
    Home(),
    Letter(),
    Profile(),
  ];

  Widget get currentPage => pages[currentIndex.value];

  void changePage(int _index) {
    currentIndex.value = _index;
  }
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Scaffold(
        body: Get.put(BottomNavigationPageController()).currentPage,
        bottomNavigationBar: BottomNavigationBar(
          currentIndex:
              Get.put(BottomNavigationPageController()).currentIndex.value,
          onTap: Get.put(BottomNavigationPageController()).changePage,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "홈",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "편지",
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: "내 프로필",
            ),
          ],
        ),
      ),
    );
  }
}

 - currentindex를 obx로 해준다.

 

* 다른 페이지에서 특정 bottomitem으로 이동할 때 changePage 함수를 이용한다.

 ex) 사진을 누르면 내 프로필 탭으로 이동 -> index : 2

InkWell(
          onTap: () {
            Get.put(BottomNavigationPageController()).changePage(2);
          },
          child: CircleAvatar(
            backgroundColor: Colors.grey.withOpacity(0.5),
            backgroundImage: AssetImage("assets/images/1.jpg"),
          ),
        ),