20个Flutter实例视频教程-01节底部导航栏和切换效果的制做-1

视频地址：

https://www.bilibili.com/video/av39709290?zw

博客地址：

https://jspang.com/post/flutterDemo.html#toc-ff4

 

flutter create demo01:命令行来建立项目，这里我就不建立，直接用我原来的代码

D:\Flutter\Demo\demo03

 

 

bottom_navigation_widget.dart

新建：bottom_navigation_widget.dart

 

main里面引用这个dart文件

 

先由于Materil的package

而后快捷键：stful实现咱们的动态widget

 

快捷键生成的代码：

 

 

什么是动态widget，就是说咱们这里面的东西要进行变化，只要是变化的须要控制咱们的状态就须要使用动态widget

 

动态widget有两部分，第一部分继承咱们的 statefulWidget，第二部分继承State

 

那么咱们命名为 BottomNavigationWidget，上面命名下面自动跟着变

 

Scaffole脚手架能够理解为里面已经定义好了 什么东西放在哪，咱们根据它里面定义好的属性放上不一样的东西就能够了

像下面这个地方，咱们直接可用 bottomNavigationBar这个属性，由于里面已经定义好了。

 

咱们在Scaffole的bottomNavigationBar里面放一个BottomNavigationBar的组件，然互组件的元素就是Items

里面再放BottomNavigationBarItem。咱们给它设置一个图标Icon

 

 

设置颜色，变量前面带下划线。看视频的评论 说是会被强制私有化。

给按钮加颜色。而后有加了个标题 而且给标题加了颜色

 

这样咱们item就写好。 在复制三个一样的元素节点

 

后面三个节点 咱们只要修改下图标和标题就能够了。

 

预览效果：

可是点击按钮没有什么效果

 

最终代码：

import 'package:flutter/material.dart';

import 'bottom_navigation_widget.dart';

void main()=>runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'Flutter bottomNavigatonBar',
      theme: ThemeData.light(),
      home: BottomNavigationWidget(),
    );
  }
}

main.dart

 

 

import 'package:flutter/material.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _BottomNavigationColor=Colors.blue;//定义颜色 ，私有属性，前面加下划线
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _BottomNavigationColor,
            ),
            title: Text(
              'Home',
              style:TextStyle(color:_BottomNavigationColor)
            )
          ),
           BottomNavigationBarItem(
            icon: Icon(
              Icons.email,
              color: _BottomNavigationColor,
            ),
            title: Text(
              'email',
              style:TextStyle(color:_BottomNavigationColor)
            )
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.pages,
              color: _BottomNavigationColor,
            ),
            title: Text(
              'pages',
              style:TextStyle(color:_BottomNavigationColor)
            )
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.airplay,
              color: _BottomNavigationColor,
            ),
            title: Text(
              'airplay',
              style:TextStyle(color:_BottomNavigationColor)
            )
          ),
        ],
      ),
    );
  }
}

bottom_navigation_widget.dart