Routing
Most apps contain several screens for displaying different types of information. For example, you might have a product screen that displays images where users could tap on a product image to get more information about the product on a new screen.
In Android, new screens are new Activities. In iOS, new screens are new ViewControllers. In Flutter, screens are just Widgets! And to navigate to new screens in Flutter, use the Navigator widget.
How do I navigate between screens?
In React Native, there are three main navigators: StackNavigator, TabNavigator, and DrawerNavigator. Each provides a way to configure and define the screens.
// React Native
const MyApp = TabNavigator(
{ Home: { screen: HomeScreen }, Notifications: { screen: tabNavScreen } },
{ tabBarOptions: { activeTintColor: '#e91e63' } }
);
const SimpleApp = StackNavigator({
Home: { screen: MyApp },
stackScreen: { screen: StackScreen }
});
export default (MyApp1 = DrawerNavigator({
Home: {
screen: SimpleApp
},
Screen2: {
screen: drawerScreen
}
}));
In Flutter, there are two main widgets used to navigate between screens:
A Navigator
is defined as a widget that manages a set of child widgets with a stack discipline. The navigator manages a stack of Route
objects and provides methods for managing the stack, like Navigator.push
and Navigator.pop
. A list of routes might be specified in the MaterialApp
widget, or they might be built on the fly, for example, in hero animations. The following example specifies named routes in the MaterialApp
widget.
// Flutter
class NavigationApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
...
routes: <String, WidgetBuilder>{
'/a': (BuildContext context) => usualNavscreen(),
'/b': (BuildContext context) => drawerNavscreen(),
}
...
);
}
}
To navigate to a named route, the of method of the Navigator
widget is used to specify the BuildContext
(a handle to the location of a widget in the widget tree). The name of the route is passed to the pushNamed
function to navigate to the specified route.
Navigator.of(context).pushNamed('/a');
You can also use the push method of Navigator
which adds the given route
to the history of the navigator that most tightly encloses the given context
, and transitions to it. In the following example, the MaterialPageRoute
widget is a modal route that replaces the entire screen with a platform-adaptive transition. It takes a WidgetBuilder
as a required parameter.
Navigator.push(context, MaterialPageRoute(builder: (BuildContext context)
=> UsualNavscreen()));
How do I use tab navigation and drawer navigation?
In Material Design apps, there are two primary options for Flutter navigation: tabs and drawers. When there is insufficient space to support tabs, drawers provide a good alternative.
Tab navigation
In React Native, createBottomTabNavigator
and TabNavigation
are used to show tabs and for tab navigation.
// React Native
import { createBottomTabNavigator } from 'react-navigation';
const MyApp = TabNavigator(
{ Home: { screen: HomeScreen }, Notifications: { screen: tabNavScreen } },
{ tabBarOptions: { activeTintColor: '#e91e63' } }
);
Flutter provides several specialized widgets for drawer and tab navigation:
- TabController—Coordinates the tab selection between a TabBar and a TabBarView.
- TabBar—Displays a horizontal row of tabs.
- Tab—Creates a material design TabBar tab.
- TabBarView—Displays the widget that corresponds to the currently selected tab.
// Flutter
TabController controller=TabController(length: 2, vsync: this);
TabBar(
tabs: <Tab>[
Tab(icon: Icon(Icons.person),),
Tab(icon: Icon(Icons.email),),
],
controller: controller,
),
A TabController
is required to coordinate the tab selection between a TabBar
and a TabBarView
. The TabController
constructor length
argument is the total number of tabs. A TickerProvider
is required to trigger the notification whenever a frame triggers a state change. The TickerProvider
is vsync
. Pass the vsync: this
argument to the TabController
constructor whenever you create a new TabController
.
The TickerProvider is an interface implemented by classes that can vend Ticker
objects. Tickers can be used by any object that must be notified whenever a frame triggers, but they’re most commonly used indirectly via an AnimationController
. AnimationControllers
need a TickerProvider
to obtain their Ticker
. If you are creating an AnimationController from a State, then you can use the TickerProviderStateMixin
or SingleTickerProviderStateMixin
classes to obtain a suitable TickerProvider
.
The Scaffold
widget wraps a new TabBar
widget and creates two tabs. The TabBarView
widget is passed as the body
parameter of the Scaffold
widget. All screens corresponding to the TabBar
widget’s tabs are children to the TabBarView
widget along with the same TabController
.
// Flutter
class _NavigationHomePageState extends State<NavigationHomePage> with SingleTickerProviderStateMixin {
TabController controller=TabController(length: 2, vsync: this);
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Material (
child: TabBar(
tabs: <Tab> [
Tab(icon: Icon(Icons.person),)
Tab(icon: Icon(Icons.email),),
],
controller: controller,
),
color: Colors.blue,
),
body: TabBarView(
children: <Widget> [
home.homeScreen(),
tabScreen.tabScreen()
],
controller: controller,
)
);
}
}
Drawer navigation
In React Native, import the needed react-navigation packages and then use createDrawerNavigator
and DrawerNavigation
.
// React Native
export default (MyApp1 = DrawerNavigator({
Home: {
screen: SimpleApp
},
Screen2: {
screen: drawerScreen
}
}));
In Flutter, we can use the Drawer
widget in combination with a Scaffold
to create a layout with a Material Design drawer. To add a Drawer
to an app, wrap it in a Scaffold
widget. The Scaffold
widget provides a consistent visual structure to apps that follow the Material Design guidelines. It also supports special Material Design components, such as Drawers
, AppBars
, and SnackBars
.
The Drawer
widget is a Material Design panel that slides in horizontally from the edge of a Scaffold
to show navigation links in an application. You can provide a Button
, a Text
widget, or a list of items to display as the child to the Drawer
widget. In the following example, the ListTile
widget provides the navigation on tap.
// Flutter
Drawer(
child:ListTile(
leading: Icon(Icons.change_history),
title: Text('Screen2'),
onTap: () {
Navigator.of(context).pushNamed('/b');
},
),
elevation: 20.0,
),
The Scaffold
widget also includes an AppBar
widget that automatically displays an appropriate IconButton to show the Drawer
when a Drawer is available in the Scaffold
. The Scaffold
automatically handles the edge-swipe gesture to show the Drawer
.
// Flutter
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
child: ListTile(
leading: Icon(Icons.change_history),
title: Text('Screen2'),
onTap: () {
Navigator.of(context).pushNamed('/b');
},
),
elevation: 20.0,
),
appBar: AppBar(
title: Text('Home'),
),
body: Container(),
);
}
Android |
IOS |