Flutter 2. ToDo 앱 만들기. (2) 바텀바를 통해 여러 페이지 구현하기.

Flutter로 간단한 ToDo앱을 만들어보는 프로젝트입니다.

 

처음 시작화면 구성부터 내용 추가, 삭제, 검색 기능을 메소드로 구현해 보겠습니다.

 

이 편은 스플래시 시작화면 구성하는 방법을 설명합니다.

 

이 프로젝트는 macOS 에서 VScode를 사용했스며, iPhone 14 Pro Max 시뮬레이터를 사용했습니다.

 

github : https://github.com/tjdwns4712/flutterToDoApp

 

깃허브에서 프로젝트 전체 소스코드를 확인할 수 있습니다.

 

 

ToDo를 전체적으로 만들고 싶으시다면, 1편을 보고 오시는 것을 추천드립니다. 

https://miacoder.tistory.com/2

Flutter 1. ToDo 앱 만들기. (1) 스플래시 시작화면 구성하기.

 

 

이번에는 바텀바를 이용해 요러 페이지를 한화면에서 손쉽게 구현하는 방법을 알아보겠습니다.

 

 

1. bottomBar 이란?

하단에 바를 만들어 페이지를 옮길 수 있는 기능을 의미합니다.

 

 

 

 

 

2. bottomBar 코드

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

  @override
  State<bottomBarpage> createState() => _bottomBarpageState();
}

class _bottomBarpageState extends State<bottomBarpage> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    const homePage(),
    const mypagePage(),
  ];

  void _onTap(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: SizedBox(
        height: 95,
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          onTap: _onTap,
          currentIndex: _currentIndex,
          backgroundColor: Colors.white,
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.my_library_books),
              label: '리스트',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: '마이',
            ),
          ],
          iconSize: 30,
        ),
      ),
    );
  }
}

 

동적요소가 있기 때문에 statefulWidget를 사용합니다.

 

int _currentIndex = 0;

현재 페이지를 표시하기 위한 변수를 선언합니다.

 

final List<Widget> _children = [

    const homePage(),

    const mypagePage(),

  ];

bottomBar에 넣을 페이지들의 배열 _children을 생성합니다. 첫 번째는 homePage파일을 불러오는 것이고, 두 번째는 mypagePage파일을

불러옵니다.

 

  void _onTap(int index) {

    setState(() {

      _currentIndex = index;

    });

  }

_onTap메소드를 선언합니다. 이 메소드는 입력받은 값(index)를 현재 페이지를 나타내는 변수 _currentIndex에 저장하는

역할을 합니다.

여기서 setState를 선언한 후 안에 원하는 기능을 넣어야 정상적으로 작동합니다. 

 

 

3. Flutter 코드

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: _children[_currentIndex],

      bottomNavigationBar: SizedBox(

        height: 95,

        child: BottomNavigationBar(

          type: BottomNavigationBarType.fixed,

          onTap: _onTap,

          currentIndex: _currentIndex,

          backgroundColor: Colors.white,

          items: const <BottomNavigationBarItem>[

            BottomNavigationBarItem(

              icon: Icon(Icons.my_library_books),

              label: '리스트',

            ),

            BottomNavigationBarItem(

              icon: Icon(Icons.person),

              label: '마이',

            ),

          ],

          iconSize: 30,

        ),

      ),

    );

  }

 

Scaffold를 선언하고 body에는 앞서 만든 List인 _children[]에 현재 페이지를 나타내는 변수인 _currentIndex를 넣어

 _children[_currentIndex]를 만듭니다. 

이는 _children리스트의 _currentIndex번째 결과를 가져옵니다.

 

bottomBar을 사용하기 위해서는 bottomNavigator 위젯을 사용합니다.

 

SixedBox위젯과 height속성을 통해 bottomBar의 높이를 조절할 수 있습니다.

 

type 속성을 통해 type: BottomNavigationBarType.fixed 와 같이 bottomBar높이를 가변으로 할 지, 고정으로 할 지 정할 수 있습니다.

 

onTap속성은 bottomBar에 표시되는 아이콘을 눌렀을 때 어떤 행동을 수행할지를 정합니다.

위에서 만들어둔 _onTap메소드를 넣습니다.

이렇게 된다면 입력받은 값을 현재 값으로 바꾸고, 현재 값에 해당하는 List의 파일을 불러올 것입니다.

 

currentIndex는 기본적으로 표시할 초기 페이지를 설정합니다.

여기서는 _currentIndex 값을 그대로 보여줍니다.

이렇게 된다면 다른 기능을 수행한 뒤 돌아왔을때 기존 값을 유지하고 있습니다.

 

items 속성을 통해 bottomBar에 표시할 아이콘과 이름을 정할 수 있습니다.

icon을 통해 아이콘을, label을 통해 이름을 설정할 수 있습니다.

 

iconSize를 통해 아이콘의 크기를 조절할 수 있습니다.

 

 

4. 결과

첫 번째 아이콘을 눌렀을 때 homePage.dart화면이 출력.

두 번쨰 아이콘을 눌렀을 때 mypagePage.dart화면이 출력.

 

다음 시간에는 Json 형식을 만들어 값을 저장하는 방법에 대해 알아보겠습니다.