Advertisement
Guest User

Flutter bottom navigation

a guest
May 24th, 2019
94
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Dart 5.02 KB | None | 0 0
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter/widgets.dart';
  3.  
  4. void main() => runApp(MyApp());
  5.  
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       title: 'Flutter Demo',
  11.       theme: ThemeData(
  12.         primarySwatch: Colors.blue,
  13.       ),
  14.       home: MyHomePage(title: 'Flutter Demo Home Page'),
  15.     );
  16.   }
  17. }
  18.  
  19. class MyHomePage extends StatefulWidget {
  20.   MyHomePage({Key key, this.title}) : super(key: key);
  21.  
  22.   final String title;
  23.  
  24.   @override
  25.   _MyHomePageState createState() => _MyHomePageState();
  26. }
  27.  
  28. class _MyHomePageState extends State<MyHomePage> {
  29.   var _currentTabIndex = 0;
  30.   var _tabChildren = [
  31.     Page1(),
  32.     Page2(),
  33.     Page3(),
  34.     Page4(),
  35.   ];
  36.   @override
  37.   Widget build(BuildContext context) {
  38.     print('MyHomePage: build');
  39.     return DefaultTabController(
  40.       length: _tabChildren.length,
  41.       child: Scaffold(
  42.         appBar: AppBar(
  43.           title: Text(widget.title),
  44.         ),
  45.         body: TabBarView(
  46.           physics: NeverScrollableScrollPhysics(),
  47.           children: _tabChildren,
  48.         ),
  49.         bottomNavigationBar: CustomBottomNavigationBar(),
  50.       ),
  51.     );
  52.   }
  53.  
  54.   Widget bottomNavigationBar() {
  55.     return Builder(
  56.       builder: (context) => TabBar(
  57.             controller: DefaultTabController.of(context),
  58.             tabs: <Widget>[
  59.               Tab(icon: Icon(Icons.home), text: 'Home'),
  60.               Tab(icon: Icon(Icons.keyboard), text: 'Keyboard'),
  61.               Tab(icon: Icon(Icons.save), text: 'Save'),
  62.               Tab(icon: Icon(Icons.settings), text: 'Settings'),
  63.             ],
  64.             labelColor: Colors.blue,
  65.             unselectedLabelColor: Colors.black,
  66.             indicatorColor: Colors.transparent,
  67.             indicatorSize: TabBarIndicatorSize.tab,
  68.           ),
  69.     );
  70.   }
  71. }
  72.  
  73. class CustomBottomNavigationBar extends StatefulWidget {
  74.   @override
  75.   _CustomBottomNavigationBarState createState() =>
  76.       _CustomBottomNavigationBarState();
  77. }
  78.  
  79. class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  80.   var _currentTabIndex = 0;
  81.   @override
  82.   Widget build(BuildContext context) {
  83.     return Builder(
  84.       builder: (context) => BottomNavigationBar(
  85.             currentIndex: _currentTabIndex,
  86.             selectedItemColor: Colors.blue,
  87.             unselectedItemColor: Colors.black,
  88.             items: [
  89.               BottomNavigationBarItem(
  90.                   icon: Icon(Icons.home), title: Text('Home')),
  91.               BottomNavigationBarItem(
  92.                   icon: Icon(Icons.keyboard), title: Text('Keyboard')),
  93.               BottomNavigationBarItem(
  94.                   icon: Icon(Icons.save), title: Text('Save')),
  95.               BottomNavigationBarItem(
  96.                   icon: Icon(Icons.settings), title: Text('Settings')),
  97.             ],
  98.             onTap: (tabIndex) {
  99.               setState(() {
  100.                 _currentTabIndex = tabIndex;
  101.                 DefaultTabController.of(context).animateTo(tabIndex);
  102.               });
  103.             },
  104.           ),
  105.     );
  106.   }
  107. }
  108.  
  109. class Page1 extends StatefulWidget {
  110.   @override
  111.   _Page1State createState() => _Page1State();
  112. }
  113.  
  114. class _Page1State extends State<Page1>
  115.     with AutomaticKeepAliveClientMixin<Page1> {
  116.   @override
  117.   Widget build(BuildContext context) {
  118.     super.build(context);
  119.     print('Page1: build');
  120.     return SingleChildScrollView(
  121.       child: Center(
  122.         child: Column(
  123.           children: <Widget>[Text("Page 1"), TextField()],
  124.         ),
  125.       ),
  126.     );
  127.   }
  128.  
  129.   @override
  130.   bool get wantKeepAlive => true;
  131. }
  132.  
  133. class Page2 extends StatefulWidget {
  134.   @override
  135.   _Page2State createState() => _Page2State();
  136. }
  137.  
  138. class _Page2State extends State<Page2>
  139.     with AutomaticKeepAliveClientMixin<Page2> {
  140.   @override
  141.   Widget build(BuildContext context) {
  142.     super.build(context);
  143.     print('Page2: build');
  144.     return Center(
  145.       child: Column(
  146.         children: <Widget>[Text("Page 2"), TextField()],
  147.       ),
  148.     );
  149.   }
  150.  
  151.   @override
  152.   bool get wantKeepAlive => true;
  153. }
  154.  
  155. class Page3 extends StatefulWidget {
  156.   @override
  157.   _Page3State createState() => _Page3State();
  158. }
  159.  
  160. class _Page3State extends State<Page3>
  161.     with AutomaticKeepAliveClientMixin<Page3> {
  162.   @override
  163.   Widget build(BuildContext context) {
  164.     super.build(context);
  165.     print('Page3: build');
  166.     return Center(
  167.       child: Column(
  168.         children: <Widget>[Text("Page 3"), TextField()],
  169.       ),
  170.     );
  171.   }
  172.  
  173.   @override
  174.   bool get wantKeepAlive => true;
  175. }
  176.  
  177. class Page4 extends StatefulWidget {
  178.   @override
  179.   _Page4State createState() => _Page4State();
  180. }
  181.  
  182. class _Page4State extends State<Page4>
  183.     with AutomaticKeepAliveClientMixin<Page4> {
  184.   @override
  185.   Widget build(BuildContext context) {
  186.     super.build(context);
  187.     print('Page4: build');
  188.     return Center(
  189.       child: Column(
  190.         children: <Widget>[Text("Page 4"), TextField()],
  191.       ),
  192.     );
  193.   }
  194.  
  195.   @override
  196.   bool get wantKeepAlive => true;
  197. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement