[Flutter] BoilerTemplate BottomNavigation

BoilerTemplate BottomNavigation에 대해서 구현할거다.

저번에는 로그인에 대해서 까지만 구현했다. 

로그인 이후에 해당 사용자 정보를 가지고 메인으로 가는 소스를 구현해보자

물론 메인으로 가기전에 캐시에 저장은 할 것이다.

 

1. 로그인 성공 시 main 화면으로 이동

IconButton(
        icon: Image.asset('assets/images/kakao_login.png'),
        iconSize: 350,
        onPressed: () async {
        viewModel.login().then((value) =>
            Navigate.pushPageReplacement(context, MainScreen())
        );
        }
        )

login을 하면 NavigatepushPageReplace로 페이지를 전환 시켜준다.

static pushPageReplacement(BuildContext context, Widget page) async {
    return await Navigator.pushReplacement(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) {
          return page;
        },
      ),
    );
  }

static 메서드이다. 해당 메서드로, 페이지가 이동되는 것이다. 정확히는 Navigate에 Replace된다.

 

ViewModel은 아래와 같다.

해당 값을 기준으로 User에 로그인한 사용자의 정보가 담기고, 로그인 정보는 boolean으로 리턴된다.

class KakaoViewModel{
  final SocialLogin _socialLogin;
  bool isLogined = false;
  User? user;
  KakaoViewModel(this._socialLogin);

  Future login() async{
    isLogined = await _socialLogin.login();
    if(isLogined){
      user = await UserApi.instance.me();
      print(user);
    }
  }
  Future logout() async{
    await _socialLogin.logout();
    isLogined = false;
    user = null;
  }
}

 

 

무튼 어떻게 보면 이제 시작이다.

 

1. BottomNavigation ui

bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
          canvasColor: Theme.of(context).primaryColor,
          primaryColor: Theme.of(context).colorScheme.secondary,
          textTheme: Theme.of(context).textTheme.copyWith(
                bodySmall: TextStyle(color: Colors.grey[500]),
              ),
        ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: <BottomNavigationBarItem>[
            const BottomNavigationBarItem(
              icon: Icon(
                Icons.message,
              ),
              label: '',
            ),
            const BottomNavigationBarItem(
              icon: Icon(
                Icons.group,
              ),
              label: '',
            ),
            const BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
              ),
              label: '',
            ),
            BottomNavigationBarItem(
              icon: IconBadge(icon: Icons.notifications),
              label: '',
            ),
            const BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: '',
            ),
          ],
          onTap: navigationTapped,
          currentIndex: _page,
        ),

 

위 처럼, 해당 화면을 구성할 수 있다. 

 

만약에 해당 네비게이션 아이템을 클릭했을때, 이벤트는 아래와 같은 순서로 작동한다.

클릭시에 navigationTapped 메소드가 호출된다.

해당 pagecontroller는 아래와 같이 초기화 되어있다.

void navigationTapped(int page) {
    _pageController.jumpToPage(page);
  }

class _MainScreenState extends State<MainScreen> {
  late PageController _pageController;
  int _page = 2;

 

두번째 해당 body는 pageview를 가진다.

이는 pageController와 연결이 되며, 해당 자식들은 리스트로 위젯들을 담는다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        physics: NeverScrollableScrollPhysics(),
        controller: _pageController,
        onPageChanged: onPageChanged,
        children: <Widget>[
          Home(),
          Home(),
          Home(),
          Home(),
          Home(),
        ],
      ),

void onPageChanged(int page) {
    setState(() {
      this._page = page;
    });
  }

 

페이지가 변경되면, 해당 메서드를 호출하는데, 상위 변수에 대한 값을 변경하고, setState로 화면을 새로고침하게 한다.