使用BottomNavigationBarItem创建底部导航

1.main.dart入口

import 'package:flutter/material.dart';

import 'navigator/tab_navigator.dart';

void main() {
  runApp(MyApp());
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: TabNavigator());
  }
}

2.导航页面TabNavigator

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/home_page.dart';
import 'package:flutter_app/pages/my_page.dart';
import 'package:flutter_app/pages/search_page.dart';
import 'package:flutter_app/pages/stock_page.dart';

class TabNavigator extends StatefulWidget {
  @override
  _TabNavigatorState createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  final _defaultColor = Colors.grey;
  final _activeColor = Colors.blue;
  int _currentIndex = 0;
  final PageController _controller = PageController(
    initialPage: 0,
  );
  void _pageChange(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "观奇股票王",
        ),
        centerTitle: true,
      ),
      body: PageView(
        onPageChanged: _pageChange,
        controller: _controller,
        children: [
          HomePage(),
          StockPage(),
          SearchPage(),
          MyPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            _controller.jumpToPage(index);
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                  color: _defaultColor,
                ),
                activeIcon: Icon(
                  Icons.home,
                  color: _activeColor,
                ),
                title: Text(
                  "首页",
                  style: TextStyle(
                    color: _currentIndex == 1 ? _activeColor : _defaultColor,
                  ),
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.camera,
                  color: _defaultColor,
                ),
                activeIcon: Icon(
                  Icons.camera,
                  color: _activeColor,
                ),
                title: Text(
                  "股票",
                  style: TextStyle(
                    color: _currentIndex == 3 ? _activeColor : _defaultColor,
                  ),
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.message,
                  color: _defaultColor,
                ),
                activeIcon: Icon(
                  Icons.message,
                  color: _activeColor,
                ),
                title: Text(
                  "消息",
                  style: TextStyle(
                    color: _currentIndex == 4 ? _activeColor : _defaultColor,
                  ),
                )),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.account_circle,
                  color: _defaultColor,
                ),
                activeIcon: Icon(
                  Icons.account_circle,
                  color: _activeColor,
                ),
                title: Text(
                  "我的",
                  style: TextStyle(
                    color: _currentIndex == 2 ? _activeColor : _defaultColor,
                  ),
                )),
          ]),
    );
  }
}

3.四个子页面

1.股票

import 'package:flutter/material.dart';
class StockPage extends StatefulWidget {
  @override
  _StockPageState createState() => _StockPageState();
}

class _StockPageState extends State<StockPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text("股票"),
      ),
    );
  }
}

2.寻找

import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text("寻找"),
      ),
    );
  }
}

import 'package:flutter/material.dart';
class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text("寻找"),
      ),
    );
  }
}

3.我的页面

import 'package:flutter/material.dart';
class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}
const CITY_NAMES=['北京','上海','广州','深圳','杭州','苏州','成都','武汉','郑州','云南'];
class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:ListView(
children: _buildList(),
),
      ),
    );
  }
}


List _buildList(){
return CITY_NAMES.map((city)=>_item(city)).toList();
}

Widget _item(String city){
return Container(
height: 80,
margin: EdgeInsets.only(bottom: 5),
alignment: Alignment.center,
decoration: BoxDecoration(color:Colors.teal),
child: Text(
city,
style: TextStyle(color: Colors.white,fontSize: 20),
),
);
}

4.首页

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:Text("首页"),
      ),
    );
  }
}

效果如图