This is the fifth part of my journey to build and publish a Flutter based app for the App Store and Google Play.
Apps which start with a Sign in turn end users off. People have low tolerance for such things and wherever possible, apps should deliver their functionality without interrupting the end user with administrative taks. I call it the 'bus top test'. Can you get what you want from your app in the bus stop queue quickly and effectively. If you can't the app designer has failed.
TL:DR – There is not much to see here, but perhaps it is important enough to reiterate. Don't let Sign in pages get in the way of your app.
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.