Flutter-BottomNavigationBar

BottomNavigationBar

말 그대로 아래 사진처럼 앱 아래쪽에 내비게이션 바입니다.

import 'package:flutter/material.dart';

class TabPage extends StatefulWidget {
  @override
  _TabPageState createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int _selectedIndex=0;
  List _pages=[
    Text('page1'),Text('page2'),Text('page3')
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child:_pages[_selectedIndex]),
      bottomNavigationBar: BottomNavigationBar(
          onTap: _onItemTapped,
          currentIndex: _selectedIndex,
          items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(icon: Icon(Icons.home),title: Text('Home')),
        BottomNavigationBarItem(icon: Icon(Icons.search),title: Text('Search')),
        BottomNavigationBarItem(icon: Icon(Icons.account_circle),title: Text('Account')),
      ]),
    );
  }

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

 

int _selectedIndex=0; : 상태를 가질 수 있는 변수

onTap : 내비게이션 바의 아이템을 클릭했을 때 _onItemTapped메서드 호출

onItemTapped : 네비게이션바의 아이템마다 상태를 바꿔주는 메소드

BottomNavigationBarItem : 내비게이션 바에 들어갈 아이템 들이고 icon으로 아이콘을 설정해주고 text로 글자도 써줍니다.