The article directories

  • Related articles recommended
  • Implementation effect
  • Implementation analysis
    • Home page implementation
    • Sidebar implementation
  • The source code

Related articles

Guide to build and pit fill the Flutter Environment (Win10 and Android already available)

Flutter entry implements the ListView list page and favorites page

Static layout of the Flutter Widget

The Flutter container class Widget

Implementation effect screenshot

Implementation analysis

Home page implementation analysis

  • Bottom TAB implementation

Flutter provides a complete set of Material Design Widgets that we can use with the address: Material Components Widgets

And the BottomNavigationBar, what we’re using here is the BottomNavigationBar in the Material Design component and the document address is: BottomNavigationBar official document

Define the data you want to use: the TAB icon and question, and the page. The pseudocode is as follows:

void _initData() {/* * Initializes selected and unselected icon */ tabImages = [[getTabImage()'images/bar_home_unselected.png'),
        getTabImage('images/bar_home_selected.png')
      ],
      [
        getTabImage('images/bar_publish_unselected.png'),
        getTabImage('images/bar_publish_selected.png')
      ],
      [
        getTabImage('images/bar_me_unselected.png'),
        getTabImage('images/bar_me_selected.png')]]; Page = [new HomePage(), new FunctionPage(), new MinePage(),]; }Copy the code

Ps: each page created to view the end of the source

You can first see the example given in the official document, or you can also see the example implemented here. The pseudo-code is as follows:

_initData();
 returnScaffold(// contents body: _pageList[_tabIndex], // bottomNavigationBar: new bottomNavigationBar (items: <BottomNavigationBarItem>[ new BottomNavigationBarItem( icon: getTabIcon(0), title: getTabTitle(0)), new BottomNavigationBarItem( icon: getTabIcon(1), title: GetTabTitle (1)), new BottomNavigationBarItem(icon: getTabIcon(2), title: getTabTitle(2)),]type: BottomNavigationBarType. Shifting, / / selected by default homepage currentIndex: _tabIndex, / / iconSize icon size: 24.0, / / onTap click events: _onItemTapped, ), );Copy the code

  • The Scaffold Widget provides the basic Material Design layout so we return the new Scaffold component directly.

  • Body: _pageList[_tabIndex] body Displays the contents of each TAB component. This section uses a set to load the pages of each TAB component. Click on the _tabIndex index to get the list.

  • The TAB bar at the bottom of the bottomNavigationBar, the Items collection stores each TAB item. The BottomNavigationBarItem is the picture and text information displayed by a specific TAB. Type represents the style of the bottom navigation bar, which has two values: Shifting, which is the effect in the screenshot, and Fixed, which is the regular bottom navigation bar. OnTap: _onItemTapped Tapped.

Ps: a method preceded by _ indicates that the method is private

The pseudocode for _onItemTapped is as follows:

  void _onItemTapped(int index) {
    setState(() {
      _tabIndex = index;
    });
  }
Copy the code

Body: _pageList[_tabIndex] is refreshed to the corresponding page.

The sidebar implements analysis

  • Top of the sidebar immersive
  • Sidebar custom ICONS and global opening methods

The pseudo-code is as follows:

// Initialize data _initData();returnScaffold(key: _globalKey, // Sidebar drawer: new drawer (child: ListView(// Remove top grey bar padding: EdgeInsets. Zero, children: <Widget>[ userHeader, ListTile( title: Text("Register and log in"),
              leading: Icon(Icons.favorite),
              onTap: () => _onPageOpen(context, "Register and log in"),
            ),
            ListTile(
              title: Text("Settings"),
              leading: Icon(Icons.settings),
              onTap: () => _onPageOpen(context, "Settings"// bottomNavigationBar: new bottomNavigationBar (),);Copy the code

Padding: EdgeInsets. Zero at the top of the sidebar.

The sidebar can be opened in two ways:

  • One is in the currentScaffoldComponents of thedrawerIt’s called by clicking on the event
Scaffold.of(context).openDrawer();
Copy the code
  • Define a globalkey, as we implemented in this example. Since the global sidebar is open, we are inMainPage.dartFile declaring global pairskey, and then pass the constructor as a parameterkeyPassed to theHomePage.dartPage, then click at this timeHomePage.dartTo open the sidebar, use the following code
 leading: Builder(builder: (context) {
            returnIconButton (icon: icon (the Icons. The menu), / / custom Icons onPressed: () {/ / open the drawer _globalKey menu. The currentState. OpenDrawer (); });Copy the code

Sidebar closure can be invoked by clicking on the event

Navigator.pop(context); // Close the sidebarCopy the code

For more sidebar content, check out this blog for a detailed analysis of drawers of Flutter (everything you need)

The source code

If it is helpful to you, please help to point a star, thank you ~

If there are mistakes welcome to point out, common progress. Source address: FlutterTest