[flutter/dart] bottomNavigatorBar 화면 이동하기

1. bottomNavigatorBar(하단바) 만들기

bottomNavigationBar: BottomNavigationBar(
        showUnselectedLabels: false,
        showSelectedLabels: false,
        currentIndex: tab,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            label: '첫 번째 화면',
            icon: Icon(Icons.heart_broken,),
          ),
          BottomNavigationBarItem(
            label: '두 번째 화면',
            icon: Icon(Icons.star, ),
          ),
          BottomNavigationBarItem(
            label: '세 번째 화면',
            icon: Icon(Icons.square, ),
          ),
        ],
      ),

showUnselectedLabels : 선택되지 않은 하단 바의 label을 나타낼지 말지 결정
showSelectedLabels : 선택된 하단 바의 label을 나타낼지 말지 결정
-> 둘 다 true or false로 설정하시면 됩니다.

currentIndex : 현재 select된 item의 index입니다.

​

플러터에서는 하단 바에 최소 2개의 아이콘이 있어야 합니다.

3개의 아이콘까지는 화면상 문제가 없지만 4개부터는 위치가 이상하게 보이는 문제가 발생합니다.

그럴 때 BottomNavigatorBar에 "type: BottomNavigationBarType.fixed"를 추가해 주시면 해결됩니다.

위의 코드로 완성된 하단바입니다.
화면 이동을 설정하지 않아 아이콘을 눌러도 아직 이동은 되지 않습니다.

2.하단바 버튼 선택 시 화면 이동하기

하단바에 있는 아이콘을 눌렀을 때 화면의 전환이 이루어지도록 하기 위해서는

​

1) 현재 UI의 상태를 저장할 state를 만들어야 합니다.

지금 몇 번째 탭에 있는지 상태를 저장할 state를 만들어 줍니다.

var tab = 0;

tab이 0이면 0번 탭을 보여주는 상태입니다.
변수 생성할 때 초기화 값으로 홈 화면이 보이게 설정해두었습니다.
저는 정수로 표현했지만

var tab = '원하는 텍스트';

이렇게도 가능합니다.

​

2) state에 따라 탭이 어떻게 보일지 설정하기

body: [first(), second(), third()][tab],

tab이 0이면 first()화면이 보이게 되고, tab이 1이면 second()화면이 보이게 됩니다.
list자료와 list자료에서 데이터를 뽑는 문법입니다.

저는 페이지 별로 파일을 분리하여 바로 함수로 호출하였습니다.
파일을 분리하기 전이면

body: [Text("첫 번째 화면"), Text("두 번째 화면"), Text("세 번째 화면")][tab],

이렇게 하면 바로 확인이 가능합니다.

​

3) 마지막으로 tab과 하단바 연결시키기
0번 하단바를 누르면 0번 탭이 보이도록 하는 코드도 있어야 합니다.

onTap: (i) {
      setState(() {
          tab = i;
      });
},

BottomNavigatorBar() 안에 onTap: 파라미터를 추가할 수 있습니다.

onTab()은 눌렀을 때 코드를 실행해 줍니다.
i라는 파라미터를 추가하면 지금 몇 번째 버튼을 눌렀는지 알려줍니다.
0번 버튼을 누르면 i는 0이 됩니다.

​

이것을 활용하여 tab에 i를 넣어주게 되면
1번 버튼을 누르면 i는 1이 되고 i의 값이 tab으로 넘어가면서 1번 탭이 보이게 됩니다.
​
여기서 주의해야 할 점은
state를 변경해야 하기 때문에 setState를 사용해 주셔야 합니다.

​

위의 코드를 합치면 아래와 같은 화면이 완성됩니다.

별 모양 아이콘을 누르면 두 번째 화면이 나타나게 되고
네모 아이콘을 누르면 세 번째 화면이 나타나게 됩니다.

전체코드

import 'package:flutter/material.dart';
import 'first.dart';
import 'second.dart';
import 'third.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var tab = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AppBar"),
      ),

      body: [first(), second(), third()][tab],

      bottomNavigationBar: BottomNavigationBar(

        showUnselectedLabels: false,//선택되지 않은 하단바의 label 숨기기
        showSelectedLabels: false, //선택된 하단바의 label 숨기기
        currentIndex: tab, //현재 select된 bar item의 index, 변수 tab부터 시작
        type: BottomNavigationBarType.fixed,
        onTap: (i) {
          setState(() {
            tab = i;
          });
        },
        items: [
          BottomNavigationBarItem(
            label: '첫 번째 화면',
            icon: Icon(Icons.heart_broken,),
          ),
          BottomNavigationBarItem(
            label: '두 번째 화면',
            icon: Icon(Icons.star, ),
          ),
          BottomNavigationBarItem(
            label: '세 번째 화면',
            icon: Icon(Icons.square, ),
          ),
        ],
      ),
    );
  }
}