How to use dynamic home page in Flutter?
Today, I’ll give some examples for setting your homepage in dynamic way in Flutter app. You known, Flutter has a MaterialApp widget class to start your app. This class has a property which name is “home” and you can use this property with a creating a new class. But, If you want to change your home in some reasons on booting your app, how can do this?
In the basic, you can do this by using a condition on booting but if you want to check the given user to authenticated and you want to decide which page should be home for this user you need to use asynchrony. Why? Because, which method you using for auth system, it should have a asynchrony function for first checking.
I’ll give a example for authentication in this post.
First of all, if you are new in Flutter, you can look my old post for starting and creating a new Flutter project. I’ll not show to create a new Flutter project in this post. Think a basic app which has a authentication. So, which pages should be in this app? Answer is login page and home page. If the user is logged-in, you need to show to home page to this user. Otherwise, you need to show login page. So, look this list for classes which in app.
- HomePage
- LoginPage
- AuthService
We have 3 classes. The 2 classes are for pages and the other class is for serving auth service. I’ll fake the asynchrony function in this post. Because, i want to focus changing home property on running your app in this post. Think a basic auth functions, so what are these? Login and logout (Register can be optional if you uses Firebase). So, The auth class have two function and these function should be asynchrony because if you want to login or logout you should send a request or you need to wait something like this. Let’s look the activity diagram for this scenario.
It’s so simple and basic for the tutorial. Time to start!
Let’s start writing from our auth service class. I said we have two methods which are login and logout in this class and I’ll use randomize response for the login method because you know, this function should be true or false in the real world. I’ll use a void response for the logout method.
Next, create my pages. I said, I have two pages in this example. In the login page, user can login to app but i want to use random result to login because you know every user can’t login the app in the first time. I used dart:math library in authService for this and i want to show response type in login page. In the home page, user can logout and go back to login page.
Yes, we have page and service classes for app. So, the time to run app. So, the main goal will be in main.dart file because we need to wait auth login method in this then we need to decide app home widget by the respose of login method result. I’ll use async and await keywords in this file. This keywords are feature of dart language.
That’s all.
Github: https://github.com/anilcancakir/dynamic-home-example-flutter
