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