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不足之处，多多指出，感谢！