flutter 底部导航栏demo code

main.dart

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

import 'conf/config.dart' as conf;
import 'views/bottomBarItem.dart';


void main() {
  runApp(MaterialApp(
    title: conf.appName,
    theme: ThemeData(
      primarySwatch: Colors.red
    ),
    home: testPage(),
  )
  );
}

class testPage extends StatefulWidget {
  @override
  _testPageState createState() => _testPageState();
}

class _testPageState extends State<testPage> {
  int current_index = 0;

  _changePage(index){
    if (index != current_index){
      setState(() {
        current_index = index;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
        title: Text("test bottom bar item"),
      ),

      body: pages[current_index],

      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavItems,
        onTap: (index){
          _changePage(index);
        },
        currentIndex: current_index,
        type: BottomNavigationBarType.fixed, // other

      ),
    );
  }
}

 

 

other page (home.msg,userInfo)

import 'package:flutter/material.dart';


class homePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text("home"),
           
          ],
        ),
      ),
    );
  }
}

 

pages 

import 'package:demo4/views/home.dart';
import 'package:flutter/material.dart';

import 'home.dart';
import 'msgPage.dart';
import 'userInfoPage.dart';

// 底部导航栏页面
final List<BottomNavigationBarItem> bottomNavItems  = [
  BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text("主页")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text("消息")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.home),
      title: Text("个人中心")
  ),
];


final List<Widget> pages = [homePage(),msgPage(),userInfoPage()];