Flutter 底部不規則導航製作

NiceBrother 發表於 2019-08-11

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、效果展示

Flutter 底部不規則導航製作


相關文章

Flutter 滾動控制元件篇-->ListView Flutter

Flutter 滾動控制元件篇-->ListView

Flutter 中的ListView是最常用的可滾動的元件之一,它可以沿一個方向線性排布所有子元件,並且它也支援基於Sliver的延遲構建模型。基於Sliver的延遲構建什麼是基於Sliver的延遲構
Flutter學習系列之Flutter上手環境準備 Flutter

Flutter學習系列之Flutter上手環境準備

記錄一下入門flutter的過程,遇到的問題以及解決的辦法。一、本地環境Windows10 + 牆內+Android Studio。二、安裝Flutter映象環境國內環境需要配置一下以下映象環境。PU
Flutter 基礎控制元件篇-->進度指示器 Flutter

Flutter 基礎控制元件篇-->進度指示器

Flutter 中的Material 元件庫中提供了兩種進度指示器:LinearProgressIndicator和CircularProgressIndicator。它們都可以同時用於精確的進度指示
flutter新手集訓營(上) Flutter

flutter新手集訓營(上)

前端開發是否迎來大統一?flutter是否可以勝任原生開發的效能?帶著一個有一個的疑問,去了解flutter。flutter開發語言上的選擇。為什麼最終使用了dart一個曾經js熱度大增的時刻卻不溫不
Flutter(十一)之封裝幾個小Widget Flutter

Flutter(十一)之封裝幾個小Widget

更新地點: 首發於公眾號,第二天更新於掘金、思否、開發者頭條等地方;更多交流: 可以新增我的微信 372623326,關注我的微博:coderwhy學習完列表渲染後,我打算做一個綜合一點的練習小專案:
Flutter(十)之Flutter的滾動Widget Flutter

Flutter(十)之Flutter的滾動Widget

前言一:接下來一段時間我會陸續更新一些列Flutter文字教程更新進度: 每週至少兩篇;更新地點: 首發於公眾號,第二天更新於掘金、思否、開發者頭條等地方;更多交流: 可以新增我的微信 3726233
Flutter(十二)之練習高仿豆瓣電影列表 Flutter

Flutter(十二)之練習高仿豆瓣電影列表

更新地點: 首發於公眾號,第二天更新於掘金、思否、開發者頭條等地方;更多交流: 可以新增我的微信 372623326,關注我的微博:coderwhy由於Mac的檔期問題(Mac忙其他前些的),這裡給出
flutter - 登陸介面&表單校驗 Flutter

flutter - 登陸介面&表單校驗

flutter 登陸介面和表單校驗先上Gif效果圖可能在掘金是Gif不會動,大家請右擊,在新標籤開啟,或者點選下面的【點選開啟gif】點選開啟gif先畫UI,然後寫校驗,現在我們UI畫好了,之前的佈局
把Flutter擴充套件到微信小程式端的探索 Flutter

把Flutter擴充套件到微信小程式端的探索

Google Flutter是一個非常優秀的跨端框架,不僅可以執行在Android、 iOS平臺,而且可以支援Web和桌面應用。在國內小程式是非常重要的技術平臺,我們也一直思考能否把Flutter擴充
Flutter 外掛的建立及使用 Flutter

Flutter 外掛的建立及使用

在 Flutter 專案的開發中,我們需要根據自己的業務需求來建立各種各樣的外掛,這裡記錄下關於 Flutter 外掛的建立及使用的過程。官方文件這裡主要記錄如下幾點:外掛的建立獲取 Android
Flutter實戰 | 從 0 搭建「網易雲音樂」APP(一、建立專案、新增外掛、通用程式碼) Flutter

Flutter實戰 | 從 0 搭建「網易雲音樂」APP(一、建立專案、新增外掛、通用程式碼)

本系列可能會伴隨大家很長時間,這裡我會從0開始搭建一個「網易雲音樂」的APP出來。下面是該APP 功能的思維導圖:因為工作的原因,一星期有可能只更新一篇該系列的文章,不過一星期最少一篇。本章節為第一節
Flutter 跨端網路抓包 (以Android 為例) Flutter|Android

Flutter 跨端網路抓包 (以Android 為例)

背景在很多公司測試環境使用的是內網測試,我們公司也是。但是我們有點扯的是內網的域名沒有配置內網域名解析,必須手動配置hosts才可以正常訪問測試環境的域名。如下:# localhost is used