[Flutter] Widgets(1) - bottomNavigationBar with Getx

오늘은 bottomNavigationBar 를 Getx 로 구현하는 예제 입니다.

1. app.dart 수정

2. tab_page_controller.dart 추가

3. tab_page.dart 추가

 

1. app.dart 수정

app.dart 에서는 더이상 화면을 보여줄 필요가 없이 로그인 성공시, bottomNavigationBar 화면인 tabPage 로 바로 이동하게 수정하였음.

 

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sns_login/src/controller/login_user_controller.dart';
import 'package:sns_login/src/pages/login_page.dart';
import 'package:sns_login/src/pages/tab_page.dart';

class App extends StatelessWidget {
  final LoginUserController _loginUserCtrl = Get.put(LoginUserController());

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else {
          if (snapshot.hasData) {
            print('providerData: ' + snapshot.data.providerData[0].providerId.toString());
            _loginUserCtrl.mappingUserInfo(snapshot);

            return Scaffold(
                body: TabPage(),
            );
          }
          return LoginPage();
        }
      },
    );
  }
}

 

2. tab_page_controller.dart 추가

tabPage 의 index값을 obx 로 선언하고, 해당 인덱스를 변경하는 메소드 및 getter 구현

 

import 'package:get/get.dart';

class TabPageController extends GetxController {

  static TabPageController get to => Get.find();
  RxInt _curPage = 0.obs;

  @override
  void onInit() {
    super.onInit();
  }

  RxInt get curPage => _curPage;

  void changeCurPage(int index) {
    _curPage(index);
  }
}

 

3. tab_page.dart 추가

Scaffold 전체를 Obx 로 처리하였음.

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sns_login/src/controller/tab_page_controller.dart';


class TabPage extends StatefulWidget { // StatefulWidget

  @override
  _TabPageState createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {

  final TabPageController _tabPageCtrl = Get.put(TabPageController());
  List? _pages;

  @override
  void initState() {
    // 생성자 다음에 초기화 호출 부분, 변수 초기화 용도
    // TODO: implement initState
    super.initState();
    _pages = [
      Text('Home Page'),
      Text('Study Page'),
      Text('Manage Page'),
      Text('Test Page'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    print('tabPage >> build');

    return Obx(()=> Scaffold(
      body: Center(child: _pages![_tabPageCtrl.curPage.toInt()]),
      bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Color.fromRGBO(38, 100, 100, 1.0),
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.grey,
          type: BottomNavigationBarType.fixed,
          // This is all you need!
          onTap: _tabPageCtrl.changeCurPage, //_onItemTapped,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: ('Home')), // 로그인 사용자 정보 관련
            BottomNavigationBarItem(
                icon: Icon(Icons.edit),
                label: ('Study')),
            BottomNavigationBarItem(
                icon: Icon(Icons.account_circle),
                label: ('Manage')),
            BottomNavigationBarItem(
                icon: Icon(Icons.card_travel),
                label: ('Test')),
          ],
          currentIndex: _tabPageCtrl.curPage.toInt()
      ),
    ));
  }

}

 

최종 화면은 아래와 같습니다.