Flutter- bottom navigation bar to switch

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'),
      ),
    );
  }
}

 

Guess you like

Origin www.cnblogs.com/ssjf/p/11771752.html