[Flutter]플러터 디데이 & 가계부 앱 [러브페이] 만들기(1) - 바텀네비게이션

디데이, 가계부가 합쳐진 앱을 만들고자 한다.

앱 이름은 러브페이 라고 지었다.

 

 

앱은 홈(디데이), 가계부, 가계부통계, 마이페이지의 4가지의 탭으로 구성하겠다.

 

나는  GetX를 이용하여 상태관리를 하였다.

 

1. 바텀 네이게이션 컨트롤러

enum PageName { dday, account, chart, mypage }

 void changeBottonNav(int index) {
    var page = PageName.values[index];
    switch (page) {
      case PageName.dday:
        pageMove(index);
        break;
      case PageName.account:
        pageMove(index);
        break;
      case PageName.chart:
        pageMove(index);
        break;
      case PageName.mypage:
        pageMove(0);
        pageMove(index);
        break;
    }
  }
  
  
  void pageMove(int index) {
    pageIndex(index);
  }

 

특정 상황에 바텀 네비게이션을 이동 하기 위해 pageMove를 만들었다.

 

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

enum PageName { dday, account, chart, mypage }

class BottomNavController extends GetxController {
  static BottomNavController get to => Get.find();
  RxInt pageIndex = 0.obs;
  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
  RxBool isCategoryPageOpen = false.obs;

  void changeBottonNav(int index) {
    var page = PageName.values[index];
    switch (page) {
      case PageName.dday:
        pageMove(index);
        break;
      case PageName.account:
        pageMove(index);
        break;
      case PageName.chart:
        pageMove(index);
        break;
      case PageName.mypage:
        pageMove(0);
        pageMove(index);
        break;
    }
  }

  void pageMove(int index) {
    pageIndex(index);
  }

  Future<bool> onWillPop() async {
    setCategoryPage(false);
    return !await navigatorKey.currentState!.maybePop();
  }

  Future<bool> appClose() async {
    if (pageIndex == 0.obs) {
      exit(0);
    } else {
      pageMove(0);
    }
    return true;
  }

  void setCategoryPage(bool ck) {
    isCategoryPageOpen(ck);
  }

  void back() {
    onWillPop();
  }
}

 

뒤로가기 버튼을 눌렀을때 0번 인덱스의 탭일때만 앱 종료를 위해 appClose를 추가 한 바텀네비게이션 컨트롤러 이다.

 

 

 

2. 탭 만들기

탭을 만들기 위해서는 탭의 개수에 맞는 화면이 필요하다.

page1, page2, page3, page4 로 4개의 화면을 만들어주었다.

 

import 'package:accountbook/controller/bottom_controller.dart';
import 'package:accountbook/models/global.dart';
import 'package:accountbook/view/tab1/page1.dart';
import 'package:accountbook/view/tab2/page2.dart';
import 'package:accountbook/view/tab3/page3.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'view/tab4/page4.dart';

class App extends GetView<BottomNavController> {
  App({Key? key}) : super(key: key);
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    Get.parameters['width'] = Get.width.toString();
    return WillPopScope(
      onWillPop: () async {
        BottomNavController.to.appClose();
        return !await navigatorKey.currentState!.maybePop();
      },
      child: Obx(
        () => Scaffold(
          body: IndexedStack(
            index: controller.pageIndex.value,
            children: [
              Page1(),
              Page2(),
              Page3(),
              Page4(),
            ],
          ),
          bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            selectedItemColor: AppColors().colorblack,
            currentIndex: controller.pageIndex.value,
            onTap: controller.changeBottonNav,
            items: [
              BottomNavigationBarItem(
                  icon: const Icon(Icons.event, size: 20),
                  activeIcon: Icon(
                    Icons.event,
                    color: AppColors().colorblack,
                  ),
                  label: '디데이'),
              BottomNavigationBarItem(
                  icon: const Icon(Icons.account_balance, size: 20),
                  activeIcon: Icon(
                    Icons.account_balance,
                    color: AppColors().colorblack,
                  ),
                  label: '가계부'),
              BottomNavigationBarItem(
                  icon: const Icon(Icons.bar_chart_rounded, size: 20),
                  activeIcon: Icon(
                    Icons.bar_chart_rounded,
                    color: AppColors().colorblack,
                  ),
                  label: '통계'),
              BottomNavigationBarItem(
                  icon: const Icon(Icons.person, size: 20),
                  activeIcon: Icon(
                    Icons.person,
                    color: AppColors().colorblack,
                  ),
                  label: '마이페이지'),
            ],
          ),
        ),
      ),
    );
  }
}

 

바텀 네비게이션의 각 페이지별 이미지, 텍스트를 넣기위해 BottomNavigationBarItem를 셋팅한다.

이렇게 하면 바텀 네이게이션에 탭 4개를  추가한 기본 셋팅이 완료 된다.