Flutter Basics for Beginners (Part III)

Congratulations, at least, to everyone living in Siberia with the onset of summer!)))





Navigation is a rather difficult topic today.





We will look at how navigation is arranged in Flutter, what is generally needed to switch from one screen to another, and of course we will not forget about passing arguments between screens.





And finally, a very common use case: creating a BottomNavigationBar.





'Well, let's not waste a minute, let's start!





Our plan
  • Part 1  - introduction to development, first appendix, concept of state;





  • Part 2 - pubspec.yaml file and using flutter on the command line;





  • Part 3 (current article) - BottomNavigationBar and Navigator;





  • Part 4 - MVC. We will use this particular pattern as one of the simplest;





  • Part 5 - http package. Creation of the Repository class, first requests, listing of posts;





  • Part 6 - Working with pictures, displaying pictures in the form of a grid, receiving pictures from the network, adding your own to the application;





  • Part 7 - Creating your own theme, adding custom fonts and animations;





  • Part 8 - A little about testing;





Navigator and navigation stack

Flutter is pretty simple in terms of navigation, there are no Fragments and Activities.





Quite simply, each page is a widget called Route.





Navigation is done through the Navigator object:





// Navigator.of(context)   Navigator
// : NavigatorState,   push  pop 
// push       Navigator
// pop       
// MaterialPageRoute     
//   
Navigator.of(context).push(
	MaterialPageRoute(builder: (context) => OurPage())
);
      
      



Let's look at the Navigator stack using a specific example.





We have two screens: a list of books and information about a book.





The first screen that appears when launching the application is the list of books:





:





.





Back Up ( ) :





push(route)



, pop()



.





!





My Little Pony .





pages:





:





import 'package:flutter/material.dart';

//  ,      ,   id
class Pony {
  final int id;
  final String name;
  final String desc;

  Pony(this.id, this.name, this.desc);
}

//   
// final   ,   
//      ponies
//   
final List<Pony> ponies = [
  Pony(
      0,
      "Twillight Sparkle",
      "Twilight Sparkle is the central main character of My Little Pony Friendship is Magic. She is a female unicorn pony who transforms into an Alicorn and becomes a princess in Magical Mystery Cure"
  ),
  Pony(
      1,
      "Starlight Glimmer",
      "Starlight Glimmer is a female unicorn pony and recurring character, initially an antagonist but later a protagonist, in the series. She first possibly appears in My Little Pony: Friends Forever Issue and first explicitly appears in the season five premiere."
  ),
  Pony(
      2,
      "Applejack",
      "Applejack is a female Earth pony and one of the main characters of My Little Pony Friendship is Magic. She lives and works at Sweet Apple Acres with her grandmother Granny Smith, her older brother Big McIntosh, her younger sister Apple Bloom, and her dog Winona. She represents the element of honesty."
  ),
  Pony(
      3,
      "Pinkie Pie",
      "Pinkie Pie, full name Pinkamena Diane Pie,[note 2] is a female Earth pony and one of the main characters of My Little Pony Friendship is Magic. She is an energetic and sociable baker at Sugarcube Corner, where she lives on the second floor with her toothless pet alligator Gummy, and she represents the element of laughter."
  ),
  Pony(
      4,
      "Fluttershy",
      "Fluttershy is a female Pegasus pony and one of the main characters of My Little Pony Friendship is Magic. She lives in a small cottage near the Everfree Forest and takes care of animals, the most prominent of her charges being Angel the bunny. She represents the element of kindness."
  ),
];

// PonyListPage    ,
// ..      
//   
class PonyListPage extends StatelessWidget {
  
  // build    , 
  //    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Pony List Page")),
      //     
      body: Padding(
        //  EdgeInsets    double :
        // left, top, right, bottom -  , ,   
        // EdgeInsets.all(10) -      
        // EdgeInsets.only(left: 10, right: 15) -   
        //    
        // EdgeInsets.symmetric -   
        //    (left  right)    (top  bottom)
        padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
        //   
          child: ListView(
            // map   , 
            //     
            //      ( Material).
            //  map   
            //   ,   
            //  Material 
            children: ponies.map<Widget>((pony) {
              // Material   ,
              //     
              //   ripple     
              return Material(
                color: Colors.pinkAccent,
                // InkWell  
                //  , : 
                child: InkWell(
                  // splashColor -  ripple 
                  splashColor: Colors.pink,
                  //    
                  onTap: () {
                    //   
                  },
                  //    
                  //  Container   Text
                  // Container    (padding)
                  //    (margin),
                  //   ,  ,
                  //     
                  child: Container(
                      padding: EdgeInsets.all(15),
                      child: Text(
                          pony.name,
                          style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.white)
                      )
                  ),
                ),
              );
              // map  Iterable ,  
              //      toList() 
            }).toList(),
          )
      ),
    );
  }

}
      
      



, Dart , .





PonyDetailPage:






import 'package:flutter/material.dart';

import 'pony_list_page.dart';

// ,   PonyListPage  
//    
class PonyDetailPage extends StatelessWidget {
  //       id 
  final int ponyId;

  //  PonyDetailPage  ponyId,
  //     
  //  
  PonyDetailPage(this.ponyId);

  @override
  Widget build(BuildContext context) {
    //     id
    //  :   ponies 
    //   pony_list_page.dart
    final pony = ponies[ponyId];
    return Scaffold(
      appBar: AppBar(
        title: Text("Pony Detail Page"),
      ),
      body: Padding(
        //    
        padding: EdgeInsets.all(15),
        // Column      
        // crossAxisAlignment -    () 
        //   ()
        // mainAxisAlignment  
        //       
        //    
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Container(
                padding: EdgeInsets.all(10),
                //     color  Container,
                // ..  decoration  
                // color: Colors.pinkAccent,
                
                // BoxDecoration   ,
                //   Container,
                //  : gradient, borderRadius, border, shape
                //  boxShadow
                //        
                //  
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(15),
                      topRight: Radius.circular(15)
                  ),
         					//  Container'    BoxDecoration
                  color: Colors.pinkAccent,
                ),
                child: Text(
                    //   pony
                    pony.name,
                    style: Theme.of(context).textTheme.headline4.copyWith(color: Colors.white),
                )
            ),
            Container(
                padding: EdgeInsets.all(10),
                child: Text(
                    //   pony
                    pony.desc,
                    style: Theme.of(context).textTheme.bodyText1
                )
            )
          ],
        ),
      )
    );
  }
}
      
      



.





PonyListPage:





//    
onTap: () {
  //     :
  // Navigator.of(context).push(route)
  // PonyDetailPage  pony id,
  //    
	Navigator.push(context, MaterialPageRoute(
  	builder: (context) => PonyDetailPage(pony.id)
  ));
},
      
      



:





@override
  Widget build(BuildContext context) {
    //  MaterialApp -   , 
    //     
    // Material Design  .
    return MaterialApp(
      //  
      //  ,    
      title: 'Json Placeholder App',
      //  
      debugShowCheckedModeBanner: false,
      //  ,     
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //      - PonyListPage
      home: PonyListPage(),
    );
  }
      
      



:





! , Back .





:





//  NavigatorState     
//    (PonyDetailPage)
//     ,    
Navigator.pop(context, result)
      
      



. .





: Navigator API 2.0, .





BottomNavigationBar.





BottomNavigationBar Navigator'

100% , , :





( , , ).





- .





models, tab.dart



:





Tab



TabItem



:





import 'package:flutter/material.dart';

//     
//   
class MyTab {
  final String name;
  final MaterialColor color;
  final IconData icon;

  const MyTab({this.name, this.color, this.icon});
}

//    
//   
//         :
// ,   
enum TabItem { POSTS, ALBUMS, TODOS }
      
      



, :





import 'package:flutter/material.dart';
import "../models/tab.dart";

//      
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  // GlobalKey    ,
  //      
  //  ,     
  // NavigatorState -  Navigator 
  final _navigatorKeys = {
    TabItem.POSTS: GlobalKey<NavigatorState>(),
    TabItem.ALBUMS: GlobalKey<NavigatorState>(),
    TabItem.TODOS: GlobalKey<NavigatorState>(),
  };

  //   
  var _currentTab = TabItem.POSTS;

  //   
  void _selectTab(TabItem tabItem) {
    setState(() => _currentTab = tabItem);
  }

  @override
  Widget build(BuildContext context) {
    // WillPopScope  
    //   Back
    return WillPopScope(
      //    back   
      //    :
      //        ()
      //    Back,     
      //       
      //  : c   ,    ,
      //       
      onWillPop: () async {
          if (_currentTab != TabItem.POSTS) {
            if (_currentTab == TabItem.TODOS) {
              _selectTab(TabItem.ALBUMS);
            } else {
              _selectTab(TabItem.POSTS);
            }
            return false;
          } else {
            return true;
          }

      },
      child: Scaffold(
        // Stack     
        //  ,    
        //  ,      
        body: Stack(children: <Widget>[
          _buildOffstageNavigator(TabItem.POSTS),
          _buildOffstageNavigator(TabItem.ALBUMS),
          _buildOffstageNavigator(TabItem.TODOS),
        ]),
        // MyBottomNavigation   
        bottomNavigationBar: MyBottomNavigation(
          currentTab: _currentTab,
          onSelectTab: _selectTab,
        ),
      ),);
  }

  //     - ,   
  Widget _buildOffstageNavigator(TabItem tabItem) {
    return Offstage(
      // Offstage   :
      //      
      //   ,    
      offstage: _currentTab != tabItem,
      // TabNavigator   
      child: TabNavigator(
        navigatorKey: _navigatorKeys[tabItem],
        tabItem: tabItem,
      ),
    );
  }

}
      
      



, Navigator , , .





Offstage



, .





back - WillPopScope



.





bottom_navigation.dart



:





import 'package:flutter/material.dart';
import '../models/tab.dart';

//    
// const ,  tabs  
//     
//     ,
//  ,     
const Map<TabItem, MyTab> tabs = {
  TabItem.POSTS : const MyTab(name: "Posts", color: Colors.red, icon: Icons.layers),
  TabItem.ALBUMS : const MyTab(name: "Albums", color: Colors.blue, icon: Icons.image),
  TabItem.TODOS : const MyTab(name: "Todos", color: Colors.green, icon: Icons.edit)
};

class MyBottomNavigation extends StatelessWidget {
  // MyBottomNavigation   onSelectTab
  //    
  MyBottomNavigation({this.currentTab, this.onSelectTab});

  final TabItem currentTab;
  // ValueChanged<TabItem> -  ,
  //   onSelectTab    ,
  //   TabItem 
  final ValueChanged<TabItem> onSelectTab;

  @override
  Widget build(BuildContext context) {
    //    BottomNavigationBar 
    //   
    return BottomNavigationBar(
        selectedItemColor: _colorTabMatching(currentTab),
        selectedFontSize: 13,
        unselectedItemColor: Colors.grey,
        type: BottomNavigationBarType.fixed,
        currentIndex: currentTab.index,
        //  
        items: [
          _buildItem(TabItem.POSTS),
          _buildItem(TabItem.ALBUMS),
          _buildItem(TabItem.TODOS),
        ],
        //     
        //      onSelectTab,
        //     
        onTap: (index) => onSelectTab(
            TabItem.values[index]
        )
    );
  }

  //   
  BottomNavigationBarItem _buildItem(TabItem item) {
    return BottomNavigationBarItem(
        //  
        icon: Icon(
          _iconTabMatching(item),
          color: _colorTabMatching(item),
        ),
        //    
        label: tabs[item].name,
    );
  }

  //   
  IconData _iconTabMatching(TabItem item) => tabs[item].icon;

  //   
  Color _colorTabMatching(TabItem item) {
    return currentTab == item ? tabs[item].color : Colors.grey;
  }

}


      
      



TabNavigator (tab_navigator.dart)



:





import 'package:flutter/material.dart';
import '../models/tab.dart';

import 'pony_list_page.dart';

class TabNavigator extends StatelessWidget {
  // TabNavigator :
  // navigatorKey -    NavigatorState
  // tabItem -   
  TabNavigator({this.navigatorKey, this.tabItem});

  final GlobalKey<NavigatorState> navigatorKey;
  final TabItem tabItem;

  @override
  Widget build(BuildContext context) {
    // -     
    //    navigatorKey 
    // ,   Navigator'
    // navigatorKey,      ,
    //       
    // Navigator'a,   !
    return Navigator(
      key: navigatorKey,
      // Navigator   initialRoute,
      //      
      //   .
      //      ,  ,
      //    initialRoute  /
      // initialRoute: "/",
      
      // Navigator      
      //     onGenerateRoute
      onGenerateRoute: (routeSettings) {
        //    
        Widget currentPage;
        if (tabItem == TabItem.POSTS) {
          //     PonyListPage
          currentPage = PonyListPage();
        } else if (tabItem == TabItem.POSTS) {
          currentPage = PonyListPage();
        } else {
          currentPage = PonyListPage();
        }
        //  Route (  )
        return MaterialPageRoute(builder: (context) => currentPage,);
      },
    );
  }

}
      
      



main.dart



:





return MaterialApp(
   //...
   //      
   home: HomePage(),
);
      
      



home_page.dart



:





It is also good practice to organize the code correctly, so in the pages folder, create a new home folder and drag our two files there:





And finally, let's make three stub pages: PostListPage, AlbumListPage and TodoListPage:






import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//    
class PostListPage extends StatefulWidget {
  @override
  _PostListPageState createState() => _PostListPageState();
}

class _PostListPageState extends State<PostListPage> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Post List Page"),
      ),
      body: Container()
    );
  }
}
      
      



The same structure is for the other two.





After that, we will indicate them in TabNavigator'e



:





onGenerateRoute: (routeSettings) {
  //    
  Widget currentPage;
  if (tabItem == TabItem.POSTS) {
  //   
    currentPage = PostListPage();
  } else if (tabItem == TabItem.ALBUMS) {
    currentPage = AlbumListPage();
  } else {
    currentPage = TodoListPage();
  }
   //  Route (  )
   return MaterialPageRoute(builder: (context) => currentPage);
},
      
      



Conclusion

Congratulations!





I am sincerely glad and grateful to you for your good reviews and support!





Useful links:





  • source code on Github





  • Navigator 2.0 API





  • Navigation Cookbook





See you soon!








All Articles