[Flutter] Bottom Navigation Bar에 GetX 적용하기

Photo by Patrick Fore on Unsplash

BottomNavigationBar 에 currentIndex를 setState 대신 getX를 적용하는 방법을 살펴보자.

우선 getX를 적용하기 전에 tab bar 페이지를 생성하여 BottomNavigationBar를 생성한다. 예시를 들면 다음과 같다.

import 'package:flutter/material.dart';

class NavigationBar extends StatelessWidget {

const NavigationBar({Key key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(bottomNavigationBar:        <-------------
BottomNavigationBar( 
currentIndex: 0,
showSelectedLabels: true,
onTap: (index) {
print(index);
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
activeIcon: Icon(Icons.home),
label: '홈',),
BottomNavigationBarItem(
icon: Icon(Icons.user),
activeIcon: Icon(Icons.user),
label: '로그인',
),]),);
}
}

 

 

이제 네비게이션에 적용할 getXcontroller를 controller 폴더를 생성하여 만든다. 앱 전체에 사용되므로 GetxService를 사용해 볼 수 있다.

import 'package:get/get.dart';

class NavigationController extends GetxService {
static NavigationController get to => Get.find();
RxInt currentIndex = 0.obs;
// ignore: non_constant_identifier_names
void changeIndex(int Index) {
currentIndex(Index);
}
}

BottomNavigationBar 에 currentIndex를 getX controller를 적용한다. StatelessWidget 대신 GetView<NavigationController>를 사용하고 onTap에 controller.changeIndex를 적용한다. bottomNavigationBar에 Obx를 사용하고 currentIndex에 controller.currentIndex.value를 적용해 준다.

import 'package:get/get.dart';
import 'package:my_app/controller/navigation_controller.dart';

class TabPage extends GetView<NavigationController>
//StatelessWidget
{const TabPage({Key key}) : super(key: key);
@overrideWidget 
build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Obx(
() => BottomNavigationBar(
currentIndex: controller.currentIndex.value,
//0,
showSelectedLabels: true,
onTap: controller.changeIndex,
//print(index);
items: [BottomNavigationBarItem(
icon: Icon(Icons.home),
activeIcon: Icon(Icons.home),
label: '홈',),
BottomNavigationBarItem(
icon: Icon(Icons.user),
activeIcon: Icon(Icons.user),
label: '로그인',
),
]
),
));
}
}

GetxService를 사용할 수 있도록 바인딩을 만든다.

import 'package:my_app/controller/navigation_controller.dart';
  
class InitBinding implements Bindings {
@override
void dependencies() {Get.put(NavigationController());
}
}
);
}
}

바인딩을 initialBinding으로 홈화면에 등록해준다.

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
// home: MyHomePage(),
initialBinding: InitBinding(),

...

네비게이션에서 이동할 각 페이지 파일을 새로 만든 후 페이지 파일에 이름을 붙여서 getXcontroller 파일에 enum 형식으로 선언한다.

import 'package:get/get.dart';
enum Navigation { Home, Login } <----

class NavigationController extends GetxService {
static NavigationController get to => Get.find();
RxInt currentIndex = 0.obs;// ignore: non_constant_identifier_names
void changeIndex(int Index) {
currentIndex(Index);
}
}

BottomNavigationBar의 바디에 switch 함수를 사용하여 Obx 적용을 해준다.

import 'package:get/get.dart';
import 'package:my_app/controller/navigation_controller.dart';
import 'package:my_app/routes/home.dart';
import 'package:my_app/routes/login.dart';

class TabPage extends GetView<NavigationController>
//StatelessWidget
{
const TabPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(  
body: Obx(() {                   <---------     
switch (Navigation.values[controller.currentIndex.value]) {
case Navigation.Home:
return Hompage();
break;
case NavigationBar.Login:
return LoginPlace();
break;
}
return Container();
}
),
bottomNavigationBar: Obx(
() => BottomNavigationBar(
currentIndex: controller.currentIndex.value,//0,
showSelectedLabels: true,
onTap: controller.changeIndex,
//print(index);
items: [BottomNavigationBarItem(
icon: Icon(Icons.home),
activeIcon: Icon(Icons.home),
label: '홈',),
BottomNavigationBarItem(
icon: Icon(Icons.user),
activeIcon: Icon(Icons.user),
label: '로그인',)
,]
),
)
);
}
}

emulator를 껐다 다시 켜서 작동하면 네비게이션 바가 잘 작동하는 것을 확인할 수 있다.