Flutter 底部不規則導航製作

1、main.dart檔案

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

void main () =>runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title:'不規則底部導航',
        //自定義主題樣本
        theme:ThemeData(
          primarySwatch:Colors.lightBlue
        ),
        home:BottomAppBarDemo(),
    );
  }
}
複製程式碼

2、bootom_appBar.dart

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

class BottomAppBarDemo extends StatefulWidget {
  @override
  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
  List<Widget> _eachView;
  int _index = 0;
  @override
  void initState() {
    _eachView = List();
    _eachView ..add(EachView('主頁的頁面'));
    _eachView ..add(EachView('副頁的頁面'));
    // TODO: implement initState
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //變換頁面
      body: _eachView[_index],
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){
            return EachView('新新增的頁面');
          }));
        },
        tooltip: '新增',
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        //工具欄比NavigationBar靈活
        color: Colors.lightBlue,
        //與fab融合
        //圓形缺口
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index = 0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.airport_shuttle),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index = 1;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

複製程式碼

3、each_view.dart

import 'package:flutter/material.dart';

class EachView extends StatefulWidget {
  String _title;
  EachView(this._title);
  @override
  _EachViewState createState() => _EachViewState();
}

class _EachViewState extends State<EachView> {
  @override
  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text(widget._title),),
     body: Center(child: Text(widget._title),),
   );
  }
}

複製程式碼

4、效果展示