본문 바로가기
ETC/Flutter

[flutter] BottomNavigationBar 사용하기

by 안주형 2021. 10. 17.

바텀네비게이션 바 구현

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;
    });
  }
}

댓글