[Flutter] bottomNavigationBar 를 사용해서 화면 전환하기

[Flutter] BottomNavigationBar 를 사용해서 화면 전환하기

 

flutter.dev

 

안녕하세요, 

오늘은 bottomNavigationBar를 사용해서 세가지 화면을 전환하는 앱을 만들어보겠습니다.

 

---

bottomNavigationBar 를 활용한 앱만들기

 

---

1. 우선 Fltter project를 생성하고, 아래의 Directory와 dart file을 생성합니다.

- lib/home.dart

- lib/pages

- lib/pages/first_page.dart

- lib/pages/second_page.dart

- lib/pages/third_page.dart

 

 

2. first/second/third에 Stateless Widget을 상속받는 First/Second/ThirdPage 클래스를 생성하고, 화면 중앙에 Text를 표시하는 코드를 작성합니다.

 

import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('This is a First Page'),
    );
  }
}

 

3. home.dart 에서는 상태변화를 처리해야하므로 Stateful Widget을 상속받는 Home 클래스를 작성합니다.

그리고 Home 위젯을 사용할 수 있도록 main.dart 를 수정합니다.

 

import 'package:bnb_test/home.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is th root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'bottomNavigationBar Test',
      home: Home(),
    );
  }
}

 

4. home.dart 화면에 Appbar / Text / BottomNavigationBar를 추가합니다.

아래와같이 표시되지만 탭바는 아직 동작하지 않습니다.

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

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

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('bottomNavigationBar Test'),
      ),
      body: Center(child: Text('Start BNB test'),),
      bottomNavigationBar: BottomNavigationBar(
        selectedItemColor: Colors.grey,
        items: [
          const BottomNavigationBarItem(icon: Icon(Icons.card_giftcard),label: 'Tab1'),
          const BottomNavigationBarItem(icon: Icon(CupertinoIcons.gift),label: 'Tab2'),
          const BottomNavigationBarItem(icon: Icon(CupertinoIcons.cube_box),label: 'Tab3'),
        ],
      )
    );
  }
}

 

5. 상태변경 값을 전달하기 위한 코드를 작성하고, body에 입력했던 Text 대신 page[_selectedIndex]를 입력합니다.

추가로 bottomNavigationBar 옵션에 currentIndex/onTab 을 입력하면 끝입니다.

 

class _HomeState extends State<Home> {

  int _selectedIndex = 0;

  static List<Widget> pages = <Widget>[
    FirstPage(),
    SecondPage(),
    ThirdPage()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

body: pages[_selectedIndex],

currentIndex: _selectedIndex,
onTap: _onItemTapped,

 

오늘은 간단하게 bottomNavigationBar를 사용했습니다.

한두번 따라하다보면 금방 혼자서도 잘하실텐데, 혹시 이해가 안되시는 부분이 있다면 댓글남겨주세요!