Day 6: How does Flutter implement top navigation, bottom navigation menu, side pull menu and so on?

1. Top navigation

The code is as follows:

import 'package:flutter/material.dart';

void main(a) {
  runApp(MaterialApp(
    home: TabbedAppBarSample(),
  ));
}

class TabbedAppBarSample extends StatefulWidget {
  @override
  _TabbedAppBarSampleState createState(a) => _TabbedAppBarSampleState();
}


/// Select the box at the top
class _TabbedAppBarSampleState extends State<TabbedAppBarSample> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Top navigation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tabbed AppBar'),
            bottom: TabBar(
              isScrollable: true,
              tabs:choices.map((Choice choice){
                return Tab(
                  text: choice.title,
                  icon: Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((Choice choice){
              return Padding(
                  padding:const EdgeInsets.all(16.0), child: ChoiceCard(choice:choice) , ); }).toList(), ), ), ), ); }}class Choice{
  final String title;
  final IconData icon;
  const Choice({
    this.title,
    this.icon,
  });
}


// initialize the data
const List<Choice> choices=const  <Choice>[
  const Choice(title: 'CAR',icon: Icons.directions_car).const Choice(title: 'BICYCLE', icon: Icons.directions_bike).const Choice(title: 'BOAT',icon: Icons.directions_boat).const Choice(title: 'BUS',icon: Icons.directions_bus).const Choice(title: 'TRAIN', icon: Icons.directions_railway).const Choice(title: 'WALK', icon: Icons.directions_walk),];


/// The content of the page
class ChoiceCard extends StatelessWidget{
  const ChoiceCard({Key key, this.choice}):super(key:key);
  final Choice choice;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    final TextStyle textStyle=Theme.of(context).textTheme.display2;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children:<Widget> [
            Icon(choice.icon,size: 128,color: textStyle.color,), Text(choice.title,style: textStyle,), ], ), ), ); }}Copy the code

Effect:

2. Bottom navigation menu

HomePage, SearchPage TravelPage, MyPage page by himself.

import 'package:flutter/material.dart';
import 'package:home_app/HomePage.dart';
import 'package:home_app/MyPage.dart';
import 'package:home_app/SearchPage.dart';
import 'package:home_app/TravelPage.dart';


void main(a) {
  runApp(MaterialApp(
    home: TabNavigator(),
  ));
}

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

class _TabNavigatorState extends State<TabNavigator> with SingleTickerProviderStateMixin {
  final _defaultColor=Colors.grey;
  final _activeColor=Colors.blue;
  int _currentIndex=0;
  var _controller=PageController(
    initialPage: 0,);@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: <Widget>[HomePage(),SearchPage(),TravelPage(),MyPage()],
        physics: NeverScrollableScrollPhysics(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index){
          _controller.jumpToPage(index);
          setState(() {
            _currentIndex=index;
          });
        },
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              icon:Icon(
                Icons.home,
                color: _defaultColor,
              ),
              activeIcon: Icon(
                Icons.home,
                color: _activeColor,
              ),
              title: Text(
                'home', style: TextStyle( color: _currentIndex ! =0? _defaultColor:_activeColor), ), ), BottomNavigationBarItem( icon:Icon( Icons.search, color: _defaultColor, ), activeIcon: Icon( Icons.search, color: _activeColor, ), title: Text('search', style: TextStyle( color: _currentIndex ! =1? _defaultColor:_activeColor), ), ), BottomNavigationBarItem( icon:Icon( Icons.camera_alt, color: _defaultColor, ), activeIcon: Icon( Icons.camera_alt, color: _activeColor, ), title: Text('brigade take', style: TextStyle( color: _currentIndex ! =2? _defaultColor:_activeColor), ), ), BottomNavigationBarItem( icon:Icon( Icons.account_circle, color: _defaultColor, ), activeIcon: Icon( Icons.account_circle, color: _activeColor, ), title: Text('I', style: TextStyle( color: _currentIndex ! =3? _defaultColor:_activeColor), ), ), ], ), ); }@override
  void dispose(a) {
    // TODO: implement dispose
    super.dispose(); _controller.dispose(); }}Copy the code

Effect:

3. Side drop-down menu function

The main dart page

import 'package:flutter/material.dart';
import 'package:home_app/TabNavigator.dart';
import 'package:home_app/TabbedAppBarSample.dart';

import 'MyHomePage.dart';

void main(a) {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    returnMaterialApp( title: appTitle, home: MyHomePage(title: appTitle), ); }}Copy the code

MyHomePage page

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key,this.title}) :super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title),),
      body: Center(child: Text('My Page!'),),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children:<Widget> [
            DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap:(){
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: (){
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}
Copy the code

Effect: