flutter学习--底部导航栏制作

底部导航栏制作

主入口文件的编写

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: '底部导航栏',
      theme: ThemeData.light(),
      home: BottomNavigationWidget(),
    );
  }
}

StatefulWidget 讲解

在编写BottomNaivgationWidget组件前，我们需要简单了解一下什么是StatefulWidget.
StatefulWidget具有可变状态(state)的窗口组件（widget）。使用这个要根据变化状态，调整State值。
在lib目录下，新建一个bottom_navigation_widget.dart文件。
它的初始化和以前使用的StatelessWidget不同，我们在Android studio中直接使用快捷方式生成代码（直接在Android studio中输入stful）

class name extends StatefulWidget {
  _nameState createState() => _nameState();
}

class _nameState extends State<name> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: child,
    );
  }
}

上面的代码可以清楚的看到，使用StatefulWidget分为两个部分，第一个部分是继承与StatefullWidget，第二个部分是继承于State.其实State部分才是我们的重点，主要的代码都会写在State中。

BottomNaivgationWidget自定义

import 'package:flutter/material.dart';


class Botto