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(),
    );
  }
}

 

 

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)
            )
          ),
        ],
      ),
    );
  }
}