This is the fifth part of a journey to build and publish a Flutter™ based app using Material Components for Flutter (MDC-Flutter).

Why hide away a Login Page as an appBar action?

Making a login page load from an appBar actions button ensures that the login page does not stand in the way of the main app functionality.

Apps ought to be able to provide value to anonymous users. End users who wish to have a more personalised experience should be able to login easily and those that do now should not be confronted with the login page each time they load the app. Users are either logged in or they are not and the app should work to what extent it can either way. A good side effect of this approach is that the login fields are not cramped into a start page.

Flutter screens or pages are called routes. Routes make it easy to define self contained pages in your app. Add a route to a Profile page and back to the first page. ()

Add the routes

Edit main.dart. Add the initialRoute and the routes to the MaterialApp context.

  initialRoute: '/',
  routes: {
  '/': (context) => FirstScreen(),
  '/profile': (context) => ProfileScreen(),

Now adjust the IconButton App Bar action to add an onPressed navigator to your route Navigator.pushNamed(context, '/profile'); and the routes to the MaterialApp context. You dont need to add a returninc action as you are in a material app scaffold and you get the navigation automatically, but if you wish you can add a Navigator.pop(context);to return from the new page to where you came from.

onPressed: () {
  Navigator.pushNamed(context, '/profile');

Theres not much to see here, we need to add some text and text fields.