import 'package:flutter/material.dart';

import 'botton_navigation_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'demo',

      theme:ThemeData.light(),

      home: BottomNavigationWidget()//導航Widget

    );

  }

}

import 'package:flutter/material.dart';

import 'index.dart';

import 'campus_network.dart';

import 'curriculum.dart';

import 'personal_center.dart';

class BottomNavigationWidget extends StatefulWidget {

  @override

  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();

}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {

  final _BottomNavigationColor = Colors.blue;

  //現在的索引

  int _currentIndex = 0;

  //widget集合

  List<Widget> list = List();

  //重寫初始化方法,將需要導航的widget添加到集合

  @override

  void initState() {

    list

      //..相當於list.

      ..add(IndexScreen())

      ..add(CurriculumScreen())

      ..add(CampusNetworkScreen())

      ..add(PersonalCenterScreen());

    super.initState();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: list[_currentIndex],

      bottomNavigationBar: BottomNavigationBar(

        //超過3個不顯示名字，需要設置

        type: BottomNavigationBarType.fixed,

        items: [

          BottomNavigationBarItem(

            icon: Icon(

              Icons.crop_3_2,

              color:_BottomNavigationColor,

            ),

            title: Text(

              '首頁'

            ),

          ),

          BottomNavigationBarItem(

            icon: Icon(

              Icons.crop_3_2,

              color:_BottomNavigationColor,

            ),

            title: Text(

                '課程'

            ),

          ),

          BottomNavigationBarItem(

            icon: Icon(

              Icons.crop_3_2,

              color:_BottomNavigationColor,

            ),

            title: Text(

                '分校網絡'

            ),

          ),

          BottomNavigationBarItem(

            icon: Icon(

              Icons.crop_3_2,

              color:_BottomNavigationColor,

            ),

            title: Text(

                '個人中心'

            ),

          ),

        ],

        //高亮顯示

        currentIndex: _currentIndex,

        //點擊導航時更新現在的下標

        onTap: (int index){

          setState(() {

            _currentIndex = index;

          });

        },

      ),

    );

  }

}

import 'package:flutter/material.dart';

class IndexScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('index'),

      ),

      body: Center(

        child: Text('index'),

      ),

    );

  }

}