Flutter底部導航加側邊欄，頂部導航欄集合（第一章）

寫在前面：Flutter的每個頁面，大致分爲如下結構。如圖：

一，效果圖。

二，分析：

三，代碼分別列出來： 主頁：main

import 'package:flutter/material.dart';
import 'package:flutter_day/views/MyBottomNavigation.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //應用名字
      title: 'Flutter Do',
      //樣式
      theme: ThemeData(
        // This is the theme of your application.
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // chang  ing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,//主題顏色

      ),
      //
      home: MyBottomNavigation(),//主頁
 
    );
  }
}

底部導航欄：MyBottomNavigation（）；

import 'package:flutter/material.dart';
import 'package:flutter_day/views/pages/Four.dart';
import 'package:flutter_day/views/pages/One.dart';
import 'package:flutter_day/views/pages/Three.dart';
import 'package:flutter_day/views/pages/Two.dart';
//有狀態的widget
class MyBottomNavigation extends StatefulWidget {
  MyBottomNavigation({Key key}) : super(key: key);

  @override
  _MyBottomNavigationState createState() => _MyBottomNavigationState();
}
class _MyBottomNavigationState extends State<MyBottomNavigation> {
  int _selectedIndex = 1;//聲明選擇的默認下標。1
  final _widgetOptions = [//body集合，類是與Fragment
    One(),
    Two(),
    Three(),
    Four(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //標題
//      appBar: AppBar(
//        title: Text('BottomNavigationBar Sample'),
//        //標題樣式
//        textTheme: TextTheme(title: TextStyle(color: Colors.green)),
//        backgroundColor: Colors.redAccent,
//        ),
      //內容
      body: Center(
        //根據選擇的_selectedIndex 切換不同的頁面
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      //底部
      bottomNavigationBar: BottomNavigationBar(
        //todo:超過4個要設置這個屬性。
        type: BottomNavigationBarType.fixed,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.music_video), title: Text('音樂')),
          BottomNavigationBarItem(
              icon: Icon(Icons.movie), title: Text('視頻')),
          BottomNavigationBarItem(
              icon: Icon(Icons.supervisor_account), title: Text('聯繫人')),
          BottomNavigationBarItem(icon: Icon(Icons.camera), title: Text('朋友圈')),
        ],
        currentIndex: _selectedIndex,//當前點擊的Index值，
        fixedColor: Colors.blue,//點擊後的顏色
        onTap: _onItemTapped,//監聽
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

我把頂部導航欄集成在，One頁面。

import 'package:flutter/material.dart';
import 'package:flutter_day/views/TopPage.dart';
class One extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => OneState();
}

class OneState extends State<One> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    body: TopPage(),
    );
  }
}

TopPage();

import 'package:flutter/material.dart';
import 'package:flutter_day/views/pages/item/ITEM_TITLE.dart';
import 'package:flutter_day/views/pages/item/ItemSquare.dart';
import 'package:flutter_day/views/pages/item/ItemSquare_dujia.dart';
import 'package:flutter_day/views/pages/item/ItemSquare_text.dart';
import 'package:flutter_day/views/pages/item/Item_DianTai.dart';
import 'package:flutter_day/views/pages/item/Item_Type.dart';
import 'package:flutter_day/views/MyDrawer.dart';
import 'package:flutter_day/views/pages/item/Item_MusicList.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class TopPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> with SingleTickerProviderStateMixin {
  //Tab頁的控制器，可以用來定義Tab標籤和內容頁的座標
  TabController _tabController;

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  //生命週期方法插入渲染樹時調用，只調用一次

  void initState() {
    super.initState();
    //初始化控制器
    _tabController = TabController(
        length: 4, //Tab頁的個數
        vsync: this //動畫效果的異步處理，默認格式;
        );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: MyDrawer(),//側邊欄
      appBar: AppBar(
          elevation: 10,
          title: Flex( //容器，比例擺放，
            direction: Axis.horizontal,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Row(),
              ),
              Expanded(//這個是爲了 讓倆中間的導航不至於太過分散
              flex: 3,
                child: TabBar(
                  //指示器顏色
                  indicatorColor: Colors.white,
                  //指示器的間距
                  indicatorPadding: EdgeInsets.only(left: 40, right: 40),
                  //指示器的大小 label：指示器根據圖片的大小決定，tab：指示器鋪滿
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicatorWeight: 2,
                  //指示器
                  tabs: <Widget>[
                    Tab(
                      icon: Icon(Icons.music_note),
                    ),
                    Tab(
                      icon: Icon(Icons.queue_music),
                    ),
                  ],
                  controller: _tabController,
                ),
              ),
              Expanded(//這個是爲了 讓倆中間的導航不至於太過分散
                flex: 1,
                child: Row(),
              ),
            ],
          )),
      body: TabBarView(controller: _tabController, children: <Widget>[
      new Text('第一頁'),
      new Text('第二頁')
      ]),
    );
  }
}

**把Drawer也集成的第一個頁面。這樣其他的頁面 側滑就不會起作用的，除非集成在主頁面的位置，這個看個人需求 **

import 'package:flutter/material.dart';

class MyDrawer extends StatelessWidget {
  const MyDrawer({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Drawer(
        child: MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 38),
            child: Row(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                  child: ClipOval(
                      child: Image.network(
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4214474476,1941437198&fm=27&gp=0.jpg',
                    width: 80,
                  )),
                ),
                Text(
                  'ASD',
                  style: TextStyle(fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),
          Expanded(
            child: ListView(
              children: <Widget>[
                ListTile(
                  leading: const Icon(Icons.add),
                  title: const Text('Add account'),
                ),
                ListTile(
                  leading: const Icon(Icons.settings),
                  title: const Text('Manage accounts'),
                ),
              ],
            ),
          )
        ],
      ),
    ));
  }
}

纔開始學Flutter不足之處，多多指出，感謝！