Program entry
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 () // Navigation Widget ); } }
Navigation 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 the extends State <BottomNavigationWidget> { Final _BottomNavigationColor = Colors.blue; // current index int _currentIndex = 0 ; // the widget set List <the Widget> List = List (); // override the initialization method, will be navigated added to the widget set @override void InitState () { list // .. equivalent List. ..Add (IndexScreen ()) ..add(CurriculumScreen()) ..add(CampusNetworkScreen()) ..add(PersonalCenterScreen()); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: list[_currentIndex], bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon( Icons.crop_3_2, color:_BottomNavigationColor, ), title: Text( 'Home' ), ), BottomNavigationBarItem( icon: Icon( Icons.crop_3_2, color:_BottomNavigationColor, ), title: Text( 'course' ), ), BottomNavigationBarItem( icon: Icon( Icons.crop_3_2, color:_BottomNavigationColor, ), title: Text( 'Campus Network' ), ), BottomNavigationBarItem( icon: Icon( Icons.crop_3_2, color:_BottomNavigationColor, ), title: Text( 'Individual centers' ), ), ], // Highlight currentIndex: _currentIndex, // update index now when you click navigation onTap: ( int index) { setState(() { _currentIndex = index; }); }, ), ); } }
Need to jump widget
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'), ), ); } }