Flutter底部导航栏的实现方式

本文实例为大家分享了flutter底部导航栏的实现代码，供大家参考，具体内容如下

老规格，先看图：

程序主结构如下：

1.在程序主入口文件main.dart添加如下代码

import 'package:flutter/material.dart';
import 'bottom_navigation.dart';

void main() => runapp(myapp());

class myapp extends statelesswidget {
 @override
 widget build(buildcontext context) {
  return materialapp(
   title: 'flutter demo',
   theme: themedata.light(),
   home: bottomnavigationwidget(),
  );
 }
}

2.创建4个界面，home_page.dart、constant_page.dart、find_page.dart、my_page.dart

home_page.dart

import 'package:flutter/material.dart';

class homepage extends statelesswidget {
 @override
 widget build(buildcontext context) {
  return scaffold(
   appbar: appbar(title: text('homepage'),),
   body: center(
    child: text('这是首页'),
   ),
  );
 }
}

constant_page.dart

import 'package:flutter/material.dart';

class constantpage extends statelesswidget {
 @override
 widget build(buildcontext context) {
  return scaffold(
   appbar: appbar(title: text('constantpage'),),
   body: center(
    child: text('这是联系人'),
   ),
  );
 }
}

find_page.dart

import 'package:flutter/material.dart';

class findpage extends statelesswidget {
 @override
 widget build(buildcontext context) {
  return scaffold(
   appbar: appbar(title: text('findpage'),),
   body: center(
    child: text('这是发现'),
   ),
  );
 }
}

my_page.dart

import 'package:flutter/material.dart';

class mypage extends statelesswidget {
 @override
 widget build(buildcontext context) {
  return scaffold(
   appbar: appbar(title: text('mypage'),),
   body: center(
    child: text('这是我的'),
   ),
  );
 }
}

3.创建动态组件bottomnavigationwidget，新建bottom_navigation.dart

import 'package:flutter/material.dart';
import 'pages/home_page.dart';
import 'pages/constant_page.dart';
import 'pages/find_page.dart';
import 'pages/my_page.dart';

class bottomnavigationwidget extends statefulwidget {

 @override
 _bottomnavigationwidgetstate createstate() => new _bottomnavigationwidgetstate();
}

class _bottomnavigationwidgetstate extends state<bottomnavigationwidget> {
 final list<widget> list = list();
 int _currentindex = 0;
 @override
 void initstate() {
  list
   ..add(homepage())
   ..add(constantpage())
   ..add(findpage())
   ..add(mypage());
  super.initstate();
 }

 @override
 widget build(buildcontext context) {
  return scaffold(
   body: list[_currentindex],
   bottomnavigationbar: bottomnavigationbar(
    currentindex: _currentindex,
     ontap: (int index){
      setstate(() {
       _currentindex = index;
      });
     },
     type: bottomnavigationbartype.fixed,
     items: [
      bottomnavigationbaritem(
       icon: icon(icons.home,color: colors.blue,),
       title: text('首页',style: textstyle(color: colors.blue))
      ),
      bottomnavigationbaritem(
        icon: icon(icons.contacts,color: colors.blue,),
        title: text('联系',style: textstyle(color: colors.blue))
      ),
      bottomnavigationbaritem(
        icon: icon(icons.find_in_page,color: colors.blue,),
        title: text('发现',style: textstyle(color: colors.blue))
      ),
      bottomnavigationbaritem(
        icon: icon(icons.menu,color: colors.blue,),
        title: text('我的',style: textstyle(color: colors.blue))
      ),

     ]
   ),
  );
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。