Flutter BottomNavigationBar 예제
03 Jun 2020 | Flutter하단 탭을 이용한 네비게이션 예제 코드입니다.
main.dart
import 'package:flutter/material.dart'; void main() => runApp(SnowDeerApp()); class SnowDeerApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'SnowDeer App', debugShowCheckedModeBanner: false, theme: ThemeData( primaryColor: Colors.deepPurple, ), home: MainWidget(), ); } } class MainWidget extends StatefulWidget { @override State createState() => _MainWidgetState(); } class _MainWidgetState extends State<MainWidget> { var _index = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Hello Snowdeer'), ), body: Center( child: Text('Page Index: $_index'), ), bottomNavigationBar: BottomNavigationBar( currentIndex: _index, onTap: (index) { setState(() { _index = index; }); }, items: [ BottomNavigationBarItem( title: Text('Home'), icon: Icon(Icons.home), ), BottomNavigationBarItem( title: Text('DoAction'), icon: Icon(Icons.email), ), BottomNavigationBarItem( title: Text('DoBehavior'), icon: Icon(Icons.favorite), ), ]), ); } }
실제 페이지 이동하는 예제
import 'package:flutter/material.dart'; void main() => runApp(SnowDeerApp()); class SnowDeerApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'SnowDeer App', debugShowCheckedModeBanner: false, theme: ThemeData( primaryColor: Colors.deepPurple, ), home: MainWidget(), ); } } class MainWidget extends StatefulWidget { @override State createState() => _MainWidgetState(); } class _MainWidgetState extends State<MainWidget> { var _index = 0; var _pages = [ HomePageWidget(), DoActionPageWidget(), DoBehaviorPageWidget(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Hello Snowdeer'), actions: [ IconButton( icon: Icon( Icons.add, color: Colors.white, ), onPressed: () {}, ) ], ), body: _pages[_index], bottomNavigationBar: BottomNavigationBar( currentIndex: _index, onTap: (index) { setState(() { _index = index; }); }, items: [ BottomNavigationBarItem( title: Text('Home'), icon: Icon(Icons.home), ), BottomNavigationBarItem( title: Text('DoAction'), icon: Icon(Icons.email), ), BottomNavigationBarItem( title: Text('DoBehavior'), icon: Icon(Icons.favorite), ), ]), ); } } class HomePageWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('Home'), ); } } class DoActionPageWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('DoAction'), ); } } class DoBehaviorPageWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text('DoBehavior'), ); } }