A little gossip

Recently, I was learning to use fluent to develop app. Because it is the technology used in the company’s project, I put myself into practical development while learning. I recorded the components I used and learned, and summarized them for review.

BottomNavigationBar

BottomNavigationBarThe bottom navigation bar, displayed at the bottom of the application, is used to select from a small number of views (usually between three and five).
Usually, the home page of a mobile phone app has such a bottom navigation menu, which can be realized by using the bottom navigation bar. The bottom navigation bar is usually used in combination with scaffold. Here, it is used as a Scaffold.bottomNavigationBar Parameters.

Here is the implementation code:

import 'package:flutter/material.dart';
import 'index.dart';
import 'course.dart';
import 'mine.dart';
import 'login.dart';

class HomeScreen extends StatefulWidget {
  HomeScreen({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<HomeScreen> {
  int _selectedIndex = 0;

  //Page components corresponding to the bottom navigation bar
  final _widgetOptions = [IndexScreen(), CourseScreen(), MineScreen()];

  //Page controller component, page view controller.
  PageController _controller = PageController();

  void _onItemTapped(int index) async {
    //Get login information 
    //... omitted here
      if (index == 1 && notLogin == true) {
        //Not logged in
        Navigator.push(
          context,
          new MaterialPageRoute(builder: (context) => new Login()),
        );
      } else {
        //Logged in
        _selectedIndex = index;
        //Jump to the 'jumptopage' method to change the page displayed in the 'pageview' component.
        _controller.jumpToPage(index);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: PageView.builder(
        //Physical property, how the page view should respond to user input.
        //The 'neverscrollablescrollphysics' class does not allow users to scroll.
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return _widgetOptions.elementAt(index);
        },
        itemCount: _widgetOptions.length,
        //The 'controller' property is used to control the object that scrolls the view position of this page.
        controller: _controller,
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            Title: text ("home page"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.import_contacts),
            Title: text ('course '),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            Title: text ('My '),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue[700],
        onTap: _onItemTapped,
      ),
      resizeToAvoidBottomPadding: false,
    );
  }
}

reference material

BottomNavigationBar class
Bottom navigation
Bottom menu bottom navigation bar, tab bar toggle tabbar
Fluent: bottom NavigationBar + pageview crashes when flipping

Reference items

Jedi Jedi, a test and development engineer, developed a flutter commercial project in 100 days of spare time

Related articles

Learning record of flutter app development: fluent_ Swiper rotation chartThis is the first page of this articleIndexScreen()The layout of