Flutter Tutorial for Beginners | All In One

Chapter One: Introduction Welcome to the blog for the flutter app development. This is Nibesh Khadka from Khadka's Coding Lounge. This blog is going to be a tutorial on app development with Flutter. Yes, there's everything that's mentioned on the Poster. About App In this series, we'll be making an app . This app is our vision of a platform for the Hindu community. It is supposed to be a one-stop destination for everything related to Hinduism, for instance, Finding temples, Finding priests, Venues for marriage and baptisms, Shops selling items like incense sticks, flowers, garlands, etc. Astha - Being Hindu Disclaimer: This tech blog has no intention to divide any religious groups or beliefs. This is just an effort to teach an emerging tech in a context that might not have been realized before. Chapters Introductions This blog has been divided into 12 chapters (14 including this one and the conclusion). We've tried to divide the chapters such that each will represent a single goal. Their order is based on the user-screen flow. This blog has also been divided into a series, each chapter as an individual blog which can be found . This very long blog here is mashed and edited to participate in the writing competition on HashNode. here Launch Icon and Splash Screen for Flutter App After creating an initial project, this chapter will walk through the steps to set up the app with a launch icon and also create and set a splash screen for our app with packages already available at . Pub.Dev Onboarding With Go Router in Flutter This section will see our app getting a few images and a very mundane animation, to onboard users. We'll make use of Go Router and Shared Preferences to make sure onboarding only occurs only once when the app is launched for the first time. Define Theme In Flutter After making the onboarding screen, we'll shift our focus to defining a global theme for our application. We'll use a beautiful font, and a set of colors for our app's widgets like the app bar, button, and so on. How to Create Custom Widgets: App Bar, Drawer, and Bottom Navigation Bar in Flutter After, defining the theme, we'll then make some global widgets. We'll make a custom app bar that'll have dynamic content. Instead of using the drawer menu, we'll also create a bottom navigation bar. Now, as per the drawer, we'll use it for settings about user accounts links. Authentication in Flutter | User Interface Design With the app bar and menus in place, we have to move to the next section. According to the user screen flow, the first screen the app will go to is authentication(unless onboarding). So, we'll take our time to create an authentication screen, add some animation, create a dynamic input form, and many more. The next three chapters, including this one, have the same main goal i.e Authenticate. But then the chapter got very lengthy. So, we had to divide them into mini-goals, which are UI, Set-Up, and Authentication. Flutter Firebase Setup | Cloud & Emulator To add users or to do anything else involving data, we'll need a very important thing: the Database. We will use Firebase for all the backend including the database. In this short chapter, we'll set up Firebase for our project. Flutter Firebase Authentication | Email and Password After firebase is set up we'll now write our code to authenticate the users. We'll use email and password to authenticate. Not only that we'll also use Firebase Cloud Functions to be secure and efficient. Improve User Experience with Snack Bars, Alert Dialogs, and Progress Indicators It's always good practice to provide users feedback on their actions. There are many ways to do so. Some of them are Snack Bars, Alert Dialogs, Progress Indicators, etc. We'll implement it there in our Authentication Screen. Permission Handler and Location It's mandatory to ask for permission to access local files and apps. In our app as well we'll need to access some features. We'll access the user's location and save it on the Firebase Firestore. Google Maps Places API With Flutter In this section, we'll use google's Place API to acquire a list of temples nearby the user's locations. The location will be saved on Firebase Firestore using Firebase Cloud Functions. Flutter Page Design Here we're back again to visuals and aesthetics. We'll make two pages in this part, the homepage and the temple page. Realtime Changes With Flutter and Firebase Here, we'll be using Streams and StreamBuilders to reflect real-time changes to the Firestore in our app. Flutter App Development | Conclusion It's a very short chapter where we'll conclude this blog. Here, we will share some awesome courses, books, and blogs out there. Also, a small DIY task has been prepared for all the readers to practice what we've learned so far in the series. UI/UX These are two designs we found on Figma, we took motivation from: figma.com/community/file/895207405259865401 figma.com/community/file/1032754160766949478 Screenshots Here are a few screenshots of the prototype. Home Screen Temple List Screen SignIn Screen Registration Screen User ScreenFlow The following diagram roughly illustrates the user screen flow in our app. Pre-Requisites Though beginner-friendly it won't be an absolute zero-level blog. Don't expect an explanation of every nook and crannies. We will not explain what a widget does, but how that widget fit in our situation at a particular moment. We are using Linux OS, so codes are tested on android, though flutter will adjust it for ios as well. Go through the following checklist before we start. Figma SDK installed. Android Emulator installed Google Clouds Account with billing enabled, required for Firebase and Google Maps API. Have a basic understanding of Flutter widgets & Dart. We'll write firebase cloud functions in JavaScript, so it'll help if you know JS basics. Few commands in Linux OS. VS code installed. Project Structure Let's take a brief moment for the folder structures on the project. At first, we were following a simple and one-layer structure of: main.dart Providers Screens Models But as the project got bigger it got messier with this structure. And Hence, we decided to use the same structure but upgrade to a more layered structure, where each screen will have its respective folders as above, while a few global widgets and settings will be on a global folder. Conclusion So, this was a brief introduction to the blog on Flutter App Development. We hope you're excited as we are. Chapter Two: Launch Icon and Splash Screen for Flutter App Getting Started Here's a user screen flow image of the first things a user goes through on app launch. We'll start in the order of user-screen flow. Hence, in this section, we'll set the launch icon as well as a splash screen for our application. Now let's get started by creating our application. On your terminal: # I am using the Desktop Directory cd Desktop # Create a Flutter project flutter create astha # Go to the folder and open the folder on VS Code. cd astha code . Assets All the project images will be stored in the assets folder in the root directory and further into their relevant sub-directories. So, let's create a folder for images to store. # In your project root for instance /home/ /Desktop/astha mkdir assets assets/splash You can use the image of your choice or download the following images to use. I made them on . canva Splash Screen - Om Splash App Launch Icon - Om and Lotus Splash Image I resized these images at to achieve different sizes as mentioned in the . imageresizer native splash package Make sure to download them inside . After that to use these images, we'll need to add them to the pubspec file so. In pubsec.yaml file you'll find the assets section commented just uncomment it or replace it with the following: assets/splash # To add assets to your application, add an assets section, like this: # The outer **assets** not folder name # but a variable that tells flutter SDK where to look for assets into assets: # Splash Screens - assets/splash/om_splash.png - assets/splash/om_lotus_splash.png - assets/splash/om_lotus_splash_1152x1152.png Remember any image sources you'll use from local storage needs to be registered in pubspec.yaml file as above. Packages For the launch icon, we'll use . flutter_launcher_icons For our splash screen, we'll use . flutter_native_splash If you're gonna use the version I'm using then just paste it inside pubspec.yaml Installation # On dependencies section dependencies: flutter: sdk: flutter flutter_native_splash: ^2.1.1 #On dev_dependencies section dev_dependencies: flutter_test: sdk: flutter flutter_launcher_icons: ^0.9.2 Do mind the indentation and also make sure to visit each package's page and follow the readme instructions for the setup if anything's changed. Please remember that the settings will only work up to Android 11 as intended. From Android 12+, the splash screen will only show up on launch from emulator icon tap but not on app run from VS Code(for some reason it hasn't worked in mine/is being overridden by launcher icon). Another thing to remember is that the splash screen will be clipped as a round image in the center. I tried to change the window background but failed nonetheless. Note: Set-Up Now that we've added the packages we're gonna need to provide a few additional settings. So, again in pubspec.yaml file: #Just add these towards the end # Launch icon settings flutter_icons: android: true ios: true image_path: "assets/splash/om_splash.png" adaptive_icon_background: "#FFD1A6" adaptive_icon_foreground: "assets/splash/om_splash.png" # Splash Screen Settings flutter_native_splash: #general color: "#ffffff" image: assets/splash/om_lotus_splash.png android_12: image: assets/splash/om_lotus_splash_1152x1152.png # icon_background_color: "#FFD1A6" Now save the file and go to the VS Code terminal and run these commands. # For splash screen flutter pub run flutter_native_splash:create # For launch icon flutter pub run flutter_launcher_icons:main Possible Error While running the second command I encountered an error, it turns out to be an SDK version's incompatibility issue. Hence, on , find, and change Compiled, Minimum, and Target SDK versions. android>app>build.gradle # Only change these values don't delete anything else. android { ....... compileSdkVersion 31 ... defaultConfig { applicationId "com.example.astha" minSdkVersion 21 targetSdkVersion 30 .... } After this save the file and in your terminal run the following command again. # For launch icon flutter pub run flutter_launcher_icons:main Home Page In upcoming chapters, we'll create onboard and lock our app for only registered users. But for now, to test our launcher icon and splash screen let's create a simple home screen. On file: main.dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() async { // concrete binding for applications based on the Widgets framewor WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.black38), ); // Firebase initalize runApp(const Home()); } class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State createState() => _HomeState(); } class _HomeState extends State { @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: Center(child: Text("Home Page")), ), ); } } Check out this short clip on what we did so far. https://youtu.be/IJyYcTKksTU Summary Alright, with this the first part of the series is completed. Flutter App Development We implemented Launch Icon in android with the flutter_launcher_icons package. We also implemented a splash screen for our app with the flutter_native_splash package. We are also working on some expected breakage for Android 12. Chapter Three: Onboarding With Go Router in Flutter About In this chapter of the tutorial, we will make an onboarding screen and apply it to our app. For that, we'll install , , and packages for our app. GoRouter Provider Shared_Preferences To Onboard Or Not Let's again have a look at the user-screen flow from the image below. Let's go over the routing logic we'll be using for onboarding. Has the user/app been onboarded? -> If yes, then no need to onboard until the lifetime of the application i.e until the app is uninstalled. -> If no, then go to the onboarding screen, just once and then never in the app's lifetime. So, how are we going to achieve this? It is simple, you see go router has a option available, where the property of redirect, can be used to write check statements, to inquire about current routes: where is it now, where is it heading, and such. With this, we can redirect to onboard or not. redirect state That's great but what/how will we check? That's where shared preferences come in. We can store simple data in local storage using shared preferences. So during app initialization: We'll fetch an integer/key stored in local storage, that's responsible to keep count of onboard state, via shared preferences. When the app is launched for the first time, the shared preferences will return null because the integer does not exist yet. For us, it's equivalent to the idea of never having been onboarded. After that, on the router, we'll check if the integer is null, if so then go to the onboard screen. When onboarding is done, here we'll finally set that non-existent integer to a non-null value and save it in the local storage using the Provider package. Now when we launch an app again for the second time, the router will find that the integer is not a null value anymore, so it'll redirect to our next page instead of the onboard screen. Install Packages You can find the code of the project up until now in this . So, let's go to our projects pubspec.yaml file and add the following packages. repository dependencies: flutter: sdk: flutter flutter_native_splash: ^2.1.1 # Our new pacakges go_router: ^3.0.5 shared_preferences: ^2.0.13 provider: ^6.0.2 Reformat Before we start doing things, let's do some changes to our project. First, we'll create some files and folders. #Your cursor should be inside lib your lib folder # make some folder mkdir globals screens globals/providers globals/settings globals/settings/router globals/settings/router/utils screens/onboard screens/home # make some files touch app.dart globals/providers/app_state_provider.dart globals/settings/router/app_router.dart globals/settings/router/utils/router_utils.dart screens/onboard/onboard_screen.dart screens/home/home.dart The file is like this now. main.dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; void main() { // concrete binding for applications based on the Widgets framewor WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.black38), ); runApp(const Home()); } class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State createState() => _HomeState(); } class _HomeState extends State { @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: Center(child: Text("Home Page")), ), ); } } Let's move the Home class to the home.dart file. Now our files look like this: main.dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:temple/screens/home/home.dart'; void main() { // concrete binding for applications based on the Widgets framewor WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.black38), ); runApp(const Home()); } home.dart import 'package:flutter/material.dart'; class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State createState() => _HomeState(); } class _HomeState extends State { @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: Center(child: Text("Home Page")), ), ); } } Router Utils While routing we'll need to provide several properties like Router Path, Named Route, Page Title, and such. It will be efficient if these values can be outsourced from a module. Hence, we created file. utils/router_utils.dart router_utils.dart // Create enum to represent different routes enum APP_PAGE { onboard, auth, home, } extension AppPageExtension on APP_PAGE { // create path for routes String get routePath { switch (this) { case APP_PAGE.home: return "/"; case APP_PAGE.onboard: return "/onboard"; case APP_PAGE.auth: return "/auth"; default: return "/"; } } // for named routes String get routeName { switch (this) { case APP_PAGE.home: return "HOME"; case APP_PAGE.onboard: return "ONBOARD"; case APP_PAGE.auth: return "AUTH"; default: return "HOME"; } } // for page titles to use on appbar String get routePageTitle { switch (this) { case APP_PAGE.home: return "Astha"; default: return "Astha"; } } } Go Router Finally, we can go to the router file where we'll create routes and redirect logic. So, on file. app_router.dart Create an class. AppRouter import 'package:go_router/go_router.dart'; import 'package:temple/screens/home/home.dart'; import 'utils/router_utils.dart'; class AppRouter { get router => _router; final _router = GoRouter( initialLocation: "/", routes: [ GoRoute( path: APP_PAGE.home.routePath, name: APP_PAGE.home.routeName, builder: (context, state) => const Home(), ), ], redirect: (state) {}); } The AppRouter is a router class we'll use as a . The router we just created now has one router which is the route to our home page. Likewise, the property tells the router to go to the homepage immediately after the app starts. But, if some conditions are met then, it can be redirected to somewhere else, which is done through a . However, we have yet to implement our router. To do so let's head to the app.dart file. provider "/" initialLocation redirect Use Router instead of Navigator MaterialApp.The router creates a MaterialApp that uses the Router instead of a Navigator. Check out the differences . We'll need to use the declarative way for our go_router. here app.dart import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:provider/provider.dart'; import 'package:temple/globals/settings/router/app_router.dart'; class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State createState() => _MyAppState(); } class _MyAppState extends State { @override Widget build(BuildContext context) { return MultiProvider( providers: [ Provider(create: (context) => AppRouter()), ], child: Builder( builder: ((context) { final GoRouter router = Provider.of (context).router; return MaterialApp.router( routeInformationParser: router.routeInformationParser, routerDelegate: router.routerDelegate); }), ), ); } } MyApp class will be the parent class for our app i.e class used in runApp(). Hence, this is where we'll use a router. Moreover, we are returning , because as the app grows we'll use many other providers. MultiProvider As mentioned before we need to pass the MyApp class in runApp() method in our main.dart file. // Insde main() method void main() { ............ // Only change this line runApp(const MyApp()); // } Now save all the files and run the app in your emulator. You'll see a homepage that'll look like this. Provider We'll be writing our logic about the onboard status on a provider class, and since, it's a global state we'll write it on the file inside the " " folder. app_state_provider.dart lib/globals/providers app_state_provider.dart import 'package:flutter/foundation.dart'; import 'package:shared_preferences/shared_preferences.dart'; class AppStateProvider with ChangeNotifier { // lets define a method to check and manipulate onboard status void hasOnboarded() async { // Get the SharedPreferences instance SharedPreferences prefs = await SharedPreferences.getInstance(); // set the onBoardCount to 1 await prefs.setInt('onBoardCount', 1); // Notify listener provides converted value to all it listeneres notifyListeners(); } } Inside hasOnboarded() function, we set the integer of onBoardCount to one or non-null value, as mentioned previously. Now, do you know how to implement this provider in our app? Yes, we'll need to add another provider to the app.dart's MultiProvider. app.dart import 'package:temple/globals/providers/app_state_provider.dart'; .... ..... MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => AppStateProvider()), Provider(create: (context) => AppRouter()) ] Make sure to declare AppStateProvider before AppRouter, which we'll discuss later. For now, we'll make a very simple onboard screen for testing purposes. Onboard Screen onboard_screen.dart import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:provider/provider.dart'; import 'package:temple/globals/providers/app_state_provider.dart'; class OnBoardScreen extends StatefulWidget { const OnBoardScreen({Key? key}) : super(key: key); @override State createState() => _OnBoardScreenState(); } void onSubmitDone(AppStateProvider stateProvider, BuildContext context) { // When user pressed skip/done button we'll finally set onboardCount integer stateProvider.hasOnboarded(); // After that onboard state is done we'll go to homepage. GoRouter.of(context).go("/"); } class _OnBoardScreenState extends State { @override Widget build(BuildContext context) { final appStateProvider = Provider.of (context); return Scaffold( body: Center( child: Column( children: [ const Text("This is Onboard Screen"), ElevatedButton( onPressed: () => onSubmitDone(appStateProvider, context), child: const Text("Done/Skip")) ], )), ); } } In this file, a stateful widget class was created. The main thing to notice here, for now, is function. This function we'll be called when the user either pressed the button during onboarding or the button when onboarding is done. Here, it calls the method we defined earlier in the provider which sets things in motion. After that, our router will take us to the homepage. onSubmitDone() skip done hasOnboarded Now we're done!, or Are we? We still haven't introduced redirect instructions to our router. Hence, let's make some changes to our app router. Go-Router Redirect app_router.dart // Packages import 'package:go_router/go_router.dart'; import 'package:shared_preferences/shared_preferences.dart'; //Custom files import 'package:temple/screens/home/home.dart'; import 'utils/router_utils.dart'; import 'package:temple/screens/onboard/onboard_screen.dart'; import 'package:temple/globals/providers/app_state_provider.dart'; class AppRouter { //=======================change #1 start ===========/ AppRouter({ required this.appStateProvider, required this.prefs, }); AppStateProvider appStateProvider; late SharedPreferences prefs; //=======================change #1 end===========/ get router => _router; // change final to late final to use prefs inside redirect. late final _router = GoRouter( refreshListenable: appStateProvider, //=======================change #2===========/ initialLocation: "/", routes: [ GoRoute( path: APP_PAGE.home.routePath, name: APP_PAGE.home.routeName, builder: (context, state) => const Home(), ), // Add the onboard Screen //=======================change #3 start===========/ GoRoute( path: APP_PAGE.onboard.routePath, name: APP_PAGE.onboard.routeName, builder: (context, state) => const OnBoardScreen()), //=======================change #3 end===========/ ], redirect: (state) { //=======================change #4 start===========/ // define the named path of onboard screen final String onboardPath = state.namedLocation(APP_PAGE.onboard.routeName); //#4.1 // Checking if current path is onboarding or not bool isOnboarding = state.subloc == onboardPath; //#4.2 // check if sharedPref as onBoardCount key or not //if is does then we won't onboard else we will bool toOnboard = prefs.containsKey('onBoardCount') ? false : true; //#4.3 //#4.4 if (toOnboard) { // return null if the current location is already OnboardScreen to prevent looping return isOnboarding ? null : onboardPath; } // returning null will tell router to don't mind redirect section return null; //#4.5 //=======================change #4 end===========/ }); } Let's go through the changes we made. We created two fields: appStateRouter and prefs. The SharedPrefences instance are needed to check whether we have already onboarded or not, based on the existence of the onboard count integer. The appStateProvider will provide all the changes that matter to the router. prefs The router property is set to listen to the changes from appStateProvider. refreshListenableTo We added the OnBoardScreen route to the routes list. Here we, First created a named location for the onboard screen. Then checks whether the current route(state.subloc) is headed towards the onboard screen or not. isOnboarding If local storage already has integer then we'll not onboard else we will. onBoardCount Based on the value of we'll return either null or onBoardPath to redirect towards. We checked if the current route is going towards with and if so returned null. We need to do this, if we don't then the router will enter a loop and cause an error. toOnboard onBoardScreen isOboarding Lastly, if we don't have to redirect anywhere then return null which tells the router to ignore redirect for now. (PS: I haven't mentioned changes in import.) Proxy Provider For Router Alright, so at this point, you probably have your linter screaming errors with red colors. It's the result of us declaring two fields in AppRouter, yet we aren't providing their values in our app.dart. So, let's fix it. app.dart import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:provider/provider.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:temple/globals/providers/app_state_provider.dart'; import 'package:temple/globals/settings/router/app_router.dart'; class MyApp extends StatefulWidget { // Declared fields prefs which we will pass to the router class //=======================change #1==========/ SharedPreferences prefs; MyApp({required this.prefs, Key? key}) : super(key: key); //=======================change #1 end===========/ @override State createState() => _MyAppState(); } class _MyAppState extends State { @override Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => AppStateProvider()), //=======================change #2==========/ // Remove previous Provider call and create new proxyprovider that depends on AppStateProvider ProxyProvider ( update: (context, appStateProvider, _) => AppRouter( appStateProvider: appStateProvider, prefs: widget.prefs)) ], //=======================change #2 end==========/ child: Builder( builder: ((context) { final GoRouter router = Provider.of (context).router; return MaterialApp.router( routeInformationParser: router.routeInformationParser, routerDelegate: router.routerDelegate); }), ), ); } } First, create a field prefs, we need to pass it as the value on our file which is what we call MyApp class. main.dart We'll create a AppRouter provider, that'll depend on the AppStateProvider. The proxy provider is not the only way to pass a value. Proxy main.dart Now, there is another red warning, because we have yet to pass our prefs field in the main.dart file. import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:temple/app.dart'; //=======================change #1==========/ // make app an async funtion to instantiate shared preferences void main() async { // concrete binding for applications based on the Widgets framewor WidgetsFlutterBinding.ensureInitialized(); //=======================change #2==========/ // Instantiate shared pref SharedPreferences prefs = await SharedPreferences.getInstance(); SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.black38), ); //=======================change #3==========/ // Pass prefs as value in MyApp runApp(MyApp(prefs: prefs)); } Here we simply converted the method to an async method. We did it to instantiate the shared preferences, which then is passed as value for MyApp class's prefs field. Now, when you run the app, it should work as intended. main() OnBoardScreen UI & Animation Now, that we've made the functionality work. Let's do something about the onboard screen itself. You can download the following images or use your own. I created them at for free. canva onboard_screen.dart import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:provider/provider.dart'; import 'package:temple/globals/providers/app_state_provider.dart'; class OnBoardScreen extends StatefulWidget { const OnBoardScreen({Key? key}) : super(key: key); @override State createState() => _OnBoardScreenState(); } void onSubmitDone(AppStateProvider stateProvider, BuildContext context) { // When user pressed skip/done button we'll finally set onboardCount integer stateProvider.hasOnboarded(); // After that onboard state is done we'll go to homepage. GoRouter.of(context).go("/"); } class _OnBoardScreenState extends State { // Create a private index to track image index int _currentImgIndex = 0; // #1 // Create list with images to use while onboarding // #2 final onBoardScreenImages = [ "assets/onboard/FindTemples.png", "assets/onboard/FindVenues.png", "assets/onboard/FindTemples.png", "assets/onboard/FindVenues.png", ]; // Function to display next image in the list when next button is clicked // #4 void nextImage() { if (_currentImgIndex _currentImgIndex += 1); } } // Function to display previous image in the list when previous button is clicked // #3 void prevImage() { if (_currentImgIndex > 0) { setState(() => _currentImgIndex -= 1); } } @override Widget build(BuildContext context) { final appStateProvider = Provider.of (context); return Scaffold( body: SafeArea( child: Container( color: const Color.fromARGB(255, 255, 209, 166), padding: const EdgeInsets.all(10.0), child: Column( children: [ // Animated switcher class to animated between images // #4 AnimatedSwitcher( switchInCurve: Curves.easeInOut, switchOutCurve: Curves.easeOut, transitionBuilder: ((child, animation) => ScaleTransition(scale: animation, child: child)), duration: const Duration(milliseconds: 800), child: Image.asset( onBoardScreenImages[_currentImgIndex], height: MediaQuery.of(context).size.height * 0.8, width: double.infinity, // Key is needed since widget type is same i.e Image key: ValueKey (_currentImgIndex), ), ), // Container to that contains set butotns // #5 Container( color: Colors.black26, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( // Change visibility by currentImgIndex // #6 onPressed: prevImage, icon: _currentImgIndex == 0 ? const Icon(null) : const Icon(Icons.arrow_back), ), IconButton( // Change visibility by currentImgIndex // #7 onPressed: _currentImgIndex == onBoardScreenImages.length - 1 ? () => onSubmitDone(appStateProvider, context) : nextImage, icon: _currentImgIndex == onBoardScreenImages.length - 1 ? const Icon(Icons.done) : const Icon(Icons.arrow_forward), ) ], )) ], )))); } } I know it's a bit too much code. So, let's go through them a chunk at a time. // Create a private index to track image index int _currentImgIndex = 0; // #1 // Create list with images to use while onboarding // #2 final onBoardScreenImages = [ "assets/onboard/FindTemples.png", "assets/onboard/FindVenues.png", "assets/onboard/FindTemples.png", "assets/onboard/FindVenues.png", ]; A private variable is created to keep track of images. _currentIndex Images in the list will be shown on the screen based on _currentIndex. onBoardScreenImages // Function to display next image in the list when next button is clicked // #1 void nextImage() { if (_currentImgIndex _currentImgIndex += 1); } } // Function to display previous image in the list when previous button is clicked // #2 void prevImage() { if (_currentImgIndex > 0) { setState(() => _currentImgIndex -= 1); } } These functions will keep track of currentIndex by managing the local state properly. // Animated switcher class to animated between images AnimatedSwitcher( switchInCurve: Curves.easeInOut, switchOutCurve: Curves.easeOut, transitionBuilder: ((child, animation) => ScaleTransition(scale: animation, child: child)), duration: const Duration(milliseconds: 800), child: Image.asset( onBoardScreenImages[_currentImgIndex], height: MediaQuery.of(context).size.height * 0.8, width: double.infinity, // Key is needed since widget type is same i.e Image key: ValueKey (_currentImgIndex), ), ), We're using to switch between our image widgets while using . BTW, if you remove the property you'll get the default FadeTransition. AnimatedSwitcher ScaleTransition transitionBuilder Container( color: Colors.black26, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( // Change visibility by currentImgIndex // #1 onPressed: prevImage, icon: _currentImgIndex == 0 ? const Icon(null) : const Icon(Icons.arrow_back), ), IconButton( // Change visibility by currentImgIndex // #2 onPressed: _currentImgIndex == onBoardScreenImages.length - 1 ? () => onSubmitDone(appStateProvider, context) : nextImage, icon: _currentImgIndex == onBoardScreenImages.length - 1 ? const Icon(Icons.done) : const Icon(Icons.arrow_forward), ) ], )) ], )) This container is where we switch the button appearance based on the index. The back arrow will disappear in case the image is the first on the list of images. The front arrow will be replaced by the done icon if the image is the last one on the list of images. If it's the next button, the function will be triggered on click. Whereas, the done button will trigger the . nextImage() submitButton() Homework Test what you've learned so far, and how far can you go. I won't provide source code for the homework, please escape the tutorial hell by making mistakes and fixing them by yourself. When you save and restart the app, you'll likely encounter an error related to the image. Fix it by yourself, we have done this in the previous part of this series. Create Skip Button. The skip Button should be a text button. Position it at the bottom center but inside the container of other buttons. The text should be red. Implement the same logic as submit button. If you've done this part then share the screenshot in the comment section. Summary In this chapter, we created an onboard screen with GoRouter, Shared Preferences, and Provider packages. Here are the things we did in brief: We created router utils file for efficient work. We also used to implement declarative routing using the package. MaterialApp.Router GoRouter Then we used the package to store onboard information on local storage. SharedPreferences With AppStateProvider class we wrote our onboard logic and redirected our routes inside AppRouter class. We also created a simple onboard screen with a animation. ScaleTransition Progress until now looks like this: https://youtu.be/HW6za8BYW7M Chapter Four: Define A Flutter Theme Intro In this short chapter, we will define a global theme for our applications. We'll mainly work on two aspects colors and fonts. Check out the style guide below. Please find the source code for the progress so far from . Now, since this application is for Hindus, I tried to apply a few holy colors like Saffron as the primary color, red as an accent/secondary color, and Green as the background color of the app. The text colors are the result of experimenting with color contrast. For the font, I am using Proxima Nova. You can download your fonts from . here here Styling Your Flutter App Alright, now that we've seen what our app's roughly going to look like. Let's create a folder and a file inside the globals folder. theme app_theme.dart # on the root of the project mkdir lib/globals/theme # Create file touch lib/globals/theme/app_theme.dart Defining Themes With ColorScheme Now inside the file let's define the colors that our app is going to use. app_theme app_theme.dart import 'package:flutter/material.dart'; // Instantiate new theme data final ThemeData asthaTutorialTheme = _asthaTutorialTheme(); //Define Base theme for app ThemeData _asthaTutorialTheme() { // We'll just overwrite whatever's already there using ThemeData.light() final ThemeData base = ThemeData.light(); // Make changes to light() theme return base.copyWith( colorScheme: base.colorScheme.copyWith( primary: const Color.fromARGB(255, 255, 153, 51), onPrimary: Colors.white, secondary: const Color.fromARGB(255, 223, 27, 12), onSecondary: Colors.white, background: const Color.fromARGB(255, 228, 243, 228), onBackground: Colors.black, ), ); } Flutter can be used to define the colors of many components. Copying the theme leaves us less work to do. However, if you've tried the theme you're gonna need to experiment a little bit, cause some colors might get overwritten. The primary color is for navigation/app bars while the secondary is the accent color. We must define styles for buttons separately with the respective class. ColorScheme Light dark ButtonTheme Defining Text Theme As mentioned before we'll be using font. Create a folder inside the assets folder and download the font if you'll be using the same one. Now, as we've done previously we need to tell flutter to look for the font by adding a path on the pubspec file. ProximaNova fonts The fonts section should be commented on in the pubspec file, add the following instructions. fonts: - family: Proxima Nova Rg Regular fonts: - asset: assets/fonts/ProximaNovaRegular.ttf Let's now head back to our theme and begin writing instructions for what our texts are gonna look like. We'll create a separate function to keep our main function lean. _asthaTutorialTextTheme // Outside of _asthaTutorialTheme function create another function TextTheme _asthaTutorialTextTheme(TextTheme base) => base.copyWith( // This'll be our appbars title headline1: base.headline1!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 30, fontWeight: FontWeight.w500, color: Colors.white), // for widgets heading/title headline2: base.headline2!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 26, fontWeight: FontWeight.w400, color: Colors.black, ), // for sub-widgets heading/title headline3: base.headline3!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 24, fontWeight: FontWeight.w400, color: Colors.black, ), // for widgets contents/paragraph bodyText1: base.bodyText1!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 20, fontWeight: FontWeight.w300, color: Colors.black), // for sub-widgets contents/paragraph bodyText2: base.bodyText2!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 18, fontWeight: FontWeight.w300, color: Colors.black), ); In flutter, is a material design class for text. I've tried to provide font size and font weight to maintain a hierarchy and be less bland. TextTheme After defining the function, we'll need to pass it to our main function: . _asthaTutorialTheme // Inside the base.copyWith method .... return base.copyWith( colorScheme: base.colorScheme.copyWith( // Leave it as it is .... ), // Add text theme textTheme: _asthaTutorialTextTheme(base.textTheme), ); Elevated Button Theme in Flutter is a button style that overrides the default appearances of ElevatedButtons. Like previously, we'll create a separate function to define the button style. ElevatedButtonThemeData ElevatedButtonThemeData _elevatedButtonTheme(ElevatedButtonThemeData base) => ElevatedButtonThemeData( style: ButtonStyle( backgroundColor: MaterialStateProperty.all ( const Color.fromARGB(255, 223, 27, 12), ), foregroundColor: MaterialStateProperty.all (Colors.white), ), ); contains the state of a widget's material. Button like elevated, text or outline consists of many material state properties such as background color, that's why we're defining color property as such above. Material StateProperty With that out of the way, let's pass this function to the property inside a copy of the base theme. elevatedButtonTheme // below text theme add this // Define styles for elevated button elevatedButtonTheme: _elevatedButtonTheme(base.elevatedButtonTheme), Styling Input Widgets in Flutter We're going to be using input forms for authentication later on in the series. We'll need to add a few styles for that as well. InputDecorationTheme _inputDecorationTheme(InputDecorationTheme base) => const InputDecorationTheme( // Label color for the input widget labelStyle: TextStyle(color: Colors.black), // Define border of input form while focused on focusedBorder: OutlineInputBorder( borderSide: BorderSide( width: 1.0, color: Colors.black, style: BorderStyle.solid, ), ), ); We've made input such that when focused on it'll have a solid border with a width of 1px. Similarly, colors for both text and border will be black. Can you add the function to our main function? I'll leave it to you then. _inputDecorationTheme Now, putting it all together: app_theme.dart import 'package:flutter/material.dart'; // Kinda like a getter to import theme from other files final ThemeData asthaTutorialTheme = _asthaTutorialTheme(); //Define Base theme for app ThemeData _asthaTutorialTheme() { final ThemeData base = ThemeData.light(); return base.copyWith( colorScheme: base.colorScheme.copyWith( primary: const Color.fromARGB(255, 255, 153, 51), onPrimary: Colors.white, secondary: const Color.fromARGB(255, 223, 27, 12), onSecondary: Colors.white, error: Colors.red, background: const Color.fromARGB(255, 228, 243, 228), onBackground: Colors.black, ), textTheme: _asthaTutorialTextTheme(base.textTheme), // below text theme add this // Define styles for elevated button elevatedButtonTheme: _elevatedButtonTheme(base.elevatedButtonTheme), // Set Themes for Input Your homework // Define theme for text input ); } // Outside of _asthaTutorialTheme function create another function TextTheme _asthaTutorialTextTheme(TextTheme base) => base.copyWith( // This'll be our appbars title headline1: base.headline1!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 30, fontWeight: FontWeight.w500, color: Colors.white), // for widgets heading/title headline2: base.headline2!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 26, fontWeight: FontWeight.w400, color: Colors.black, ), // for sub-widgets heading/title headline3: base.headline3!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 24, fontWeight: FontWeight.w400, color: Colors.black, ), // for widgets contents/paragraph bodyText1: base.bodyText1!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 20, fontWeight: FontWeight.w300, color: Colors.black), // for sub-widgets contents/paragraph bodyText2: base.bodyText2!.copyWith( fontFamily: "Proxima Nova Rg Regular", fontSize: 18, fontWeight: FontWeight.w300, color: Colors.black), ); InputDecorationTheme _inputDecorationTheme(InputDecorationTheme base) => const InputDecorationTheme( // Label color for the input widget labelStyle: TextStyle(color: Colors.black), // Define border of input form while focused on focusedBorder: OutlineInputBorder( borderSide: BorderSide( width: 1.0, color: Colors.black, style: BorderStyle.solid, ), ), ); ElevatedButtonThemeData _elevatedButtonTheme(ElevatedButtonThemeData base) => ElevatedButtonThemeData( style: ButtonStyle( backgroundColor: MaterialStateProperty.all ( const Color.fromARGB(255, 223, 27, 12), ), foregroundColor: MaterialStateProperty.all (Colors.white), ), ); Adding Theme to GoRouter We're using class for declarative routing. It provides a property to define a global theme for its children. So, in our file where we call upon this class, let's add the theme we just defined. MaterialApp.router theme app.dart app.dart // import theme at top import 'package:temple/globals/theme/app_theme.dart'; //In MaterialApp.router return MaterialApp.router( routeInformationParser: router.routeInformationParser, theme: asthaTutorialTheme, // add our theme here. routerDelegate: router.routerDelegate); A kind reminder, your package name can be different while importing Test Theme I've changed the screen a little bit, to test our theme. Please feel free to experiment on your own. Home import 'package:flutter/material.dart'; class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State createState() => _HomeState(); } class _HomeState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: Icon(Icons.person), title: Text( "This is appbar", style: Theme.of(context).textTheme.headline1, ), ), body: SafeArea( child: Container( padding: const EdgeInsets.all(20), color: Theme.of(context).colorScheme.background, child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [ Card( child: Container( width: 300, height: 200, padding: const EdgeInsets.all(4), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Hi", style: Theme.of(context).textTheme.headline2, textAlign: TextAlign.left, ), Text( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu id lectus in gravida mauris, nascetur. Cras ut commodo consequat leo, aliquet a ipsum nulla.", style: Theme.of(context).textTheme.bodyText1, ) ]), ), ), Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ TextButton( child: const Text("Text Button"), onPressed: () {}, ), ElevatedButton( child: Text( "Hi", style: Theme.of(context).textTheme.bodyText1!.copyWith( color: Colors.white, ), ), onPressed: () {}, ), ], ) ]) ), ), ); } } The code yielded the following screen. Homework Do me a favor I've forgotten to add the text theme in the code, can you add it by yourself? Summary In this chapter we: We defined a set of colors for our app. We also added font and then defined styles for texts. We gave a border to the input form that our app will use. Then we also tested the theme with a mock page. If you want to learn more, visit Google Shrine App Tutorial, . MDC-103 Chapter Five: How to Create Custom Widgets: App Bar, Drawer, and Bottom Navigation Bar in Flutter Intro In this section, we'll work on three widgets that'll be part of every screen in the app. Three global widgets we're building are , and . All of these three widgets a readily available in Flutter SDK. So usually, you don't have to make custom ones. App Bar Bottom Navigation Bar, Drawer As the app grows, the dynamic content for the app bar also increases, hence it's better to write it once and use it everywhere with slight modification. As far as navigation goes, we are not going to use a instead, we'll be using the . But we'll be using a drawer to manage navigation tasks related to the User Account, for instance, logout, user profile settings, order history, etc. You'll find the source code up until now from this . drawer bottom navigation bar repo Creating Custom App Bar We'll first create an app bar. First, let's create a folder and file for our app bar inside the globals folder. # Cursor on root folder # Create widgets and app_bar folder mkdir lib/globals/widgets lib/globals/widgets/app_bar # Create app_bar.dart touch lib/globals/widgets/app_bar/app_bar.dart Before we work on the app bar let's consider some features our app bar will have and how can we make it more flexible. Is the current screen a main screen or a sub-screen? If it's a sub-screen we'll have to display the back arrow while hiding it on the main screen. Let's say we have search functionality, which is triggered by clicking the search icon. In doing so we'll have to go to a sub-page like mentioned previously. Moreover, we'll have to use navigation features as well. We'll also need a person icon somewhere in the app bar, which we'll trigger the custom drawer we'll create later. Maybe we'll want to add icons like shopping cart, bell icon, and more depending on the page, we are on. app_bar.dart import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; class CustomAppBar extends StatefulWidget with PreferredSizeWidget { // Preffered size required for PreferredSizeWidget extension final Size prefSize; // App bar title depending on the screen final String title; // A bool to check whether its a subpage or not. final bool isSubPage; // An example of search icon press. final bool hasSearchFunction; CustomAppBar( {required this.title, this.isSubPage = false, this.hasSearchFunction = false, this.prefSize = const Size.fromHeight(56.0), Key? key}) : super(key: key); @override Size get preferredSize => const Size.fromHeight(56.0); @override State createState() => _CustomAppBarState(); } class _CustomAppBarState extends State { @override Widget build(BuildContext context) { return AppBar( title: Text(widget.title), automaticallyImplyLeading: false, leading: widget.isSubPage ? IconButton( icon: const Icon(Icons.arrow_back), onPressed: () => GoRouter.of(context).pop(), ) : null, actions: [ widget.hasSearchFunction ? IconButton( onPressed: () => GoRouter.of(context).goNamed(APP_PAGE.search.routeName), icon: const Icon(Icons.search)) : const Icon(null), IconButton( onPressed: () { print("Don't poke me!!"); }, icon: const Icon(Icons.person)) ], ); } } In Flutter, is a class interface that can be used to provide default size to a widget that otherwise is unconstrained. The getter function is something that the class requires you to provide and the default value we're using is 56px. As for the field prefSize, we'll provide the same value for height to the app bar and infinite width as with getter. PreferredSizeWidget preferredSize PrefferedSized Other fields we've declared are all dynamic and need to provide value when called on their relevant pages. The field helps to determine if the icons like Back Arrow and Search will appear on a screen or not. Likewise, the person icon will eventually slide the Drawer in and out. isSubPage The property helps to determine what should be at the front: the title or the back arrow. automaticallyImplyLeading Now, let's go to the homepage and replace the app bar there with the custom app bar. home.dart // Changed to custom appbar appBar: CustomAppBar( title: APP_PAGE.home.routePageTitle, ), // =====// Except for the title, all other fields have default values. The title of the page can be derived from RouterUtils we made earlier on in the onboard section. This is what the app bar looks like for now. We'll need to make some changes when we create the user drawer but for now, let's make the bottom navigation bar. Create Bottom Navigation Bar Nowadays, there's a trend to make the bottom nav bar the main navigation bar with tabs on each page as the sub-nav bars, like in the google play store app. After some consideration, we've decided that our main navigation will have links to three screens: Home, Favorites, and Shop. Previously we created the file to take care of the route necessities like route path, named route path, and page title. Before we proceed through the bottom navigation bar, let's make some changes in the router_utils file first. router_utils enum APP_PAGE { onboard, auth, home, search, shop, favorite, } extension AppPageExtension on APP_PAGE { // create path for routes String get routePath { switch (this) { case APP_PAGE.home: return "/"; case APP_PAGE.onboard: return "/onboard"; case APP_PAGE.auth: return "/auth"; case APP_PAGE.search: return "/serach"; case APP_PAGE.favorite: return "/favorite"; case APP_PAGE.shop: return "/shop"; default: return "/"; } } // for named routes String get routeName { switch (this) { case APP_PAGE.home: return "HOME"; case APP_PAGE.onboard: return "ONBOARD"; case APP_PAGE.auth: return "AUTH"; case APP_PAGE.search: return "Search"; case APP_PAGE.favorite: return "Favorite"; case APP_PAGE.shop: return "Shop"; default: return "HOME"; } } // for page titles String get routePageTitle { switch (this) { case APP_PAGE.home: return "Astha"; case APP_PAGE.auth: return "Register/SignIn"; case APP_PAGE.shop: return "Shops"; case APP_PAGE.search: return "Search"; case APP_PAGE.favorite: return "Your Favorites"; default: return "Astha"; } } } Finally, Let's create relevant files and folders in globals. # Cursor on root folder # Create bottom_nav_bar folder mkdir lib/globals/widgets/bottom_nav_bar # Create bottom_nav_bar.dart touch lib/globals/widgets/bottom_nav_bar/bottom_nav_bar.dart bottom_nav_bar.dart Flutter provides a widget which is what we'll use to create our bottom navigation bar. Bottom Navigation Bar import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; class CustomBottomNavBar extends StatefulWidget { // create index to select from the list of route paths final int navItemIndex; //#1 const CustomBottomNavBar({required this.navItemIndex, Key? key}) : super(key: key); @override _CustomBottomNavBarState createState() => _CustomBottomNavBarState(); } class _CustomBottomNavBarState extends State { // Make a list of routes that you'll want to go to // #2 static final List _widgetOptions = [ APP_PAGE.home.routeName, APP_PAGE.favorite.routeName, APP_PAGE.shop.routeName, ]; // Function that handles navigation based of index received // #3 void _onItemTapped(int index) { GoRouter.of(context).goNamed(_widgetOptions[index]); } @override Widget build(BuildContext context) { return BottomNavigationBar( // List of icons that represent screen. // # 4 items: const [ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.favorite), label: 'Favorites', ), BottomNavigationBarItem( icon: Icon(Icons.shop), label: 'Shop', ), ], // Backgroud color // ==========================================// // #5 backgroundColor: Theme.of(context).colorScheme.primary, currentIndex: widget.navItemIndex, // current selected index selectedItemColor: Theme.of(context).colorScheme.onPrimary, // selected item color selectedIconTheme: IconThemeData( size: 30, // Make selected icon bigger than the rest color: Theme.of(context) .colorScheme .onPrimary, // selected icon will be white ), unselectedIconTheme: const IconThemeData( size: 24, // Size of non-selected icons color: Colors.black, ), selectedLabelStyle: const TextStyle( fontSize: 20, // When selected make text bigger fontWeight: FontWeight.w400, // and bolder but not so thick ), unselectedLabelStyle: const TextStyle( fontSize: 16, color: Colors.black, ), onTap: _onItemTapped, ); // ==========================================// } } Many things are happening here. We created a field, its value will be different for each screen CustomBottomNavBar is called. The value ranges from 0 to 2 since we're only using three screens. Remember in programming, index and position are different. navItemIndex List of Named Routes for Go_Router to navigate to. The value of navItemIndex we get from the three screens i.e Home, Favorite, and Shop, and the order of the paths in this list should match, or else it'll navigate to the wrong screen. The function is responsible to provide the correct route based on the index. Have you noticed that we're not passing any index to the function when it's called down below to the onTap property? That's because we don't have to, the onTap property is built that way. _onItemTapped Icons that'll get displayed on the screens. Here, the Home Icon is the first icon. So, we should call the bottom nav bar at HomeScreen with navItemIndex of 0 and so on. Here, we style our Navigation Bar and change the size and color of selected items. With this the navigation bar is ready. It's time to test it out on the homepage. home.dart The scaffold class has a property where we'll pass the custom navigation bar. bottomNavigationBar appBar:.... bottomNavigationBar: const CustomBottomNavBar( navItemIndex: 0, ), body:... Create Custom Drawer It's now time to create a User drawer, that'll only handle the navigation of user-related settings, for instance, logout, order history, profile, etc. It'll slide in once we click the person icon in the app bar. Let's proceed to create files and folders first. # Cursor on root folder # Create user_drawer folder mkdir lib/globals/widgets/user_drawer # Create user_drawer.dart file touch lib/globals/widgets/user_drawer/user_drawer.dart Let's go over the design, just to be clear what do we mean by User Drawer? The scaffold has a property, which is configured to slide a panel, usually a class when triggered. This panel is popularly used as a menu that slides in when a hamburger icon is clicked. However, we already have the bottom nav menu. Moreover, the drawer menu also covers the whole device's height and most of the width which we don't want. So, don't use the Drawer class, instead, we'll pass an to the drawer/ property of Scaffold. The alert dialog will be centered and can have desired dimensions as well. drawer Drawer alert dialog endDrawer user_drawer.dart import 'package:flutter/material.dart'; class UserDrawer extends StatefulWidget { const UserDrawer({Key? key}) : super(key: key); @override _UserDrawerState createState() => _UserDrawerState(); } class _UserDrawerState extends State { @override Widget build(BuildContext context) { return AlertDialog( backgroundColor: Theme.of(context).colorScheme.primary, actionsPadding: EdgeInsets.zero, scrollable: true, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15), ), title: Text( "Astha", style: Theme.of(context).textTheme.headline2, ), // A line between the title section and the list of links content: const Divider( thickness: 1.0, color: Colors.black, ), actions: [ // Past two links as list tiles ListTile( leading: Icon( Icons.person_outline_rounded, color: Theme.of(context).colorScheme.secondary, ), title: const Text('User Profile'), onTap: () { print("User Profile Button Pressed"); }), ListTile( leading: Icon( Icons.logout, color: Theme.of(context).colorScheme.secondary, ), title: const Text('Logout'), onTap: () { print("Log Out Button Pressed"); }), ], ); } } We're using list tiles that'll act as individual links. Our drawer is ready, but for it to work properly it is not enough to be added on the home page as value to the property of the scaffold. We have to understand and implement the following: endDrawer The scaffold is responsible for opening & closing a drawer. Each page has its scaffold. So, we need to differentiate them with a unique key representing for each scaffold. Scaffold State The same scaffold key needs to be passed down the Custom App Bar, where we trigger the alert dialog by pressing the person icon. Global Scaffold Key Let's go to the home page to create a scaffold key for the home page. Create Global Key class _HomeState extends State { // create a global key for scafoldstate // #1 final GlobalKey _scaffoldKey = GlobalKey(); ........ Provide Scaffold key to the key properties return Scaffold( // Provide key to scaffold // #2 key: _scaffoldKey, ..... Pass the key to Custom App Bar appBar: CustomAppBar( title: APP_PAGE.home.routePageTitle, // pass the scaffold key to custom app bar // #3 scaffoldKey: _scaffoldKey, ), You'll get an error because there's no field in Custom App Bar, ignore it, for now, we'll fix it in a moment. scaffoldKey Pass the Drawer to the drawer property // #4 // Pass our drawer to drawer property // if you want to slide left to right use // drawer: UserDrawer(), // if you want to slide right to left use endDrawer: const UserDrawer(), Note: Remember to repeat this process for each main screen passed onto the bottom navigation bar. The whole home page now looks like this: import 'package:flutter/material.dart'; import 'package:temple/globals/widgets/app_bar/app_bar.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; import 'package:temple/globals/widgets/bottom_nav_bar/bottom_nav_bar.dart'; import 'package:temple/globals/widgets/user_drawer/user_drawer.dart'; class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State createState() => _HomeState(); } class _HomeState extends State { // create a global key for scafoldstate // #1 final GlobalKey _scaffoldKey = GlobalKey(); @override Widget build(BuildContext context) { return Scaffold( // Provide key to scaffold // #2 key: _scaffoldKey, // Changed to custom appbar appBar: CustomAppBar( title: APP_PAGE.home.routePageTitle, // pass the scaffold key to custom app bar // #3 scaffoldKey: _scaffoldKey, ), // #4 // Pass our drawer to drawer property // if you want to slide lef to right use // drawer: UserDrawer(), // if you want to slide right to left use endDrawer: const UserDrawer(), bottomNavigationBar: const CustomBottomNavBar( navItemIndex: 0, ), primary: true, body: SafeArea( child: Container( padding: const EdgeInsets.all(20), color: Theme.of(context).colorScheme.background, child: Column(mainAxisAlignment: MainAxisAlignment.start, children: [ Card( child: Container( width: 300, height: 200, padding: const EdgeInsets.all(4), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Hi", style: Theme.of(context).textTheme.headline2, textAlign: TextAlign.left, ), Text( "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eu id lectus in gravida mauris, nascetur. Cras ut commodo consequat leo, aliquet a ipsum nulla.", style: Theme.of(context).textTheme.bodyText1, ) ]), ), ), Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ TextButton( child: const Text("Text Button"), onPressed: () {}, ), ElevatedButton( child: Text( "Hi", style: Theme.of(context).textTheme.bodyText1!.copyWith( color: Colors.white, ), ), onPressed: () {}, ), ], ) ])), ), ); } } Open Drawer Using ScaffoldKey Now, we need to make changes to the custom app bar. Create and pass the Global Scaffold Key // Declare new global key field of type ScaffoldState // #1 final GlobalKey scaffoldKey; const CustomAppBar( {required this.title, required this.scaffoldKey, //#2 pass the new scaffold key to constructor this.isSubPage = false, this.hasSearchFunction = false, this.prefSize = const Size.fromHeight(56.0), Key? key}) : super(key: key); This should fix the error we're facing. Pop Alert Dialog On Tap IconButton( icon: const Icon(Icons.person), // #3 // Slide right to left onPressed: () => widget.scaffoldKey.currentState!.openEndDrawer(), // slide lef to right // onPressed: () => widget.scaffoldKey.currentState!.openDrawer(), ), Now, the alert dialog will work as a custom user drawer. Have a look at this short clip about its workings. https://youtu.be/zFJPhW8s63Y Homework Here are a few tasks for you to practice: Create A simple favorite and shop screen. Link your bottom navigation bar to these screens. Only on the shop page display a shopping cart in the app bar. Create a search page: It should be a sub-page of the home page. You can use a search icon, that'll navigate to the search page, on tap. It should only display the back arrow icon as a leading icon. Pressing the back arrow should take you back to the home page. Sub-pages don't have a bottom navigation bar, so don't display it there. Summary With this comes an end to the 4th chapter, which was dedicated to creating global widgets that'll be used throughout the application. Here, We created a custom app bar, which will display icons based on the conditions we've provided. We also made a menu that'll stick at the bottom of our application instead of sliding in and out. We also created a secondary menu that'll be responsible for navigating to the user's settings like profile, order history, logging the user out, etc. Chapter Six: Authentication in Flutter | User Interface Design Introduction This chapter is one of the most important parts of this blog as you can tell from the chapter's title because now, according to our user-flow screen given below, we have to authenticate the user. Authentication is a basic yet very important aspect of any application regardless of platform. Serverless/Headless apps are on trend these days. Among them, Google's Firebase is one of the popular ones, especially for mobile applications. In this chapter of the series, we'll create an authentication UI. We'll create a dynamic input form widget to be more efficient. We'll also write some validations for the input, and animate sign in registration form transitions. You can find code up until from . here Create Authentication Form In Flutter We're going to make a simple form. For , we'll have four inputs: email, username, password, and confirm password inputs, while the form only uses two inputs: email and password. registration sign-in Let's create relevant files and folders in our project. # cursor on root folder # create folders mkdir lib/screens/auth lib/screens/auth/widgets lib/screens/auth/providers lib/screens/auth/utils # Create files touch lib/screens/auth/auth_screen.dart lib/screens/auth/providers/auth_provider.dart lib/screens/auth/widgets/text_from_widget.dart lib/screens/auth/widgets/auth_form_widget.dart lib/screens/auth/utils/auth_validators.dart lib/screens/auth/utils/auth_utils.dart Create Dynamic Text Form Widget Before we create our dynamic widget, let's go over the details of how dynamic it's going to be. text form field We'll make our dynamic text form widget in the file. text_from_widget.dart import 'package:flutter/material.dart'; class DynamicInputWidget extends StatelessWidget { const DynamicInputWidget( {required this.controller, required this.obscureText, required this.focusNode, required this.toggleObscureText, required this.validator, required this.prefIcon, required this.labelText, required this.textInputAction, required this.isNonPasswordField, Key? key}) : super(key: key); // bool to check if the text field is for password or not final bool isNonPasswordField; // Controller for the text field final TextEditingController controller; // Functio to toggle Text obscuractio on password text field final VoidCallback? toggleObscureText; // to obscure text or not bool final bool obscureText; // FocusNode for input final FocusNode focusNode; // Validator function final String? Function(String?)? validator; // Prefix icon for input form final Icon prefIcon; // label for input form final String labelText; // The keyword action to display final TextInputAction textInputAction; @override Widget build(BuildContext context) { return TextFormField( controller: controller, decoration: InputDecoration( // Input with border outlined border: const OutlineInputBorder( // Make border edge circular borderRadius: BorderRadius.all(Radius.circular(10.0)), ), label: Text(labelText), prefixIcon: prefIcon, suffixIcon: IconButton( onPressed: toggleObscureText, // If is non-password filed like emal the suffix icon will be null icon: isNonPasswordField ? const Icon(null) : obscureText ? const Icon(Icons.visibility) : const Icon(Icons.visibility_off), ), ), focusNode: focusNode, textInputAction: textInputAction, obscureText: obscureText, validator: validator, // onSaved: passwordVlidator, ); } } Let's go over a few important fields of our dynamic input widget class. // bool to check if the text field is for password or not final bool isNonPasswordField; //# 1 // Function to toggle Text obscuraction on password text field final VoidCallback? toggleObscureText; //# 2 // to obscure text or not bool final bool obscureText; // Validator function final String? Function(String?)? validator; //# 3 We are checking if the input type is a password or not. We're going to need that to determine whether to display a suffix icon that toggles the visibility of the password. Boolean obscure text will change the password's visibility from asterisks to strings and vice-versa. A validator is a function of a property in TextFormField. It returns null when valid and a custom string when invalid. validator Input Validation in Flutter Now, that our dynamic input is ready. Let's write some validators before we move on to create our form. We created a separate file for this sole purpose. We'll write three functions, which will separately validate Email, Password, and Confirm Passwords for user input. auth_validators.dart Create Email Validator in Flutter class AuthValidators { // Create error messages to send. // #1 static const String emailErrMsg = "Invalid Email Address, Please provide a valid email."; static const String passwordErrMsg = "Password must have at least 6 characters."; static const String confirmPasswordErrMsg = "Two passwords don't match."; // A simple email validator that checks presence and position of @ // #2 String? emailValidator(String? val) { final String email = val as String; // If length of email is <=3 then its invlaid // #3 if (email.length <= 3) return emailErrMsg; // Check if it has @ // # 4 final hasAtSymbol = email.contains('@'); // find position of @ // # 5 final indexOfAt = email.indexOf('@'); // Check numbers of @ // # 6 final numbersOfAt = "@".allMatches(email).length; // Valid if has @ // # 7 if (!hasAtSymbol) return emailErrMsg; // and if number of @ is only 1 // # 8 if (numbersOfAt != 1) return emailErrMsg; //and if '@' is not the first or last character // # 9 if (indexOfAt == 0 || indexOfAt == email.length - 1) return emailErrMsg; // Else its valid return null; } } Inside the auth_validators.dart, we create an class. AuthValidators Then we created three error messages that'll be sent as output to the relevant error. Email Validator Function that takes input value from its input form. Email is invalid if its length <=3. (4&7) Checks if there's a symbol and returns the error message on absence. @ (5&9) Checks the position of . If the position is in the beginning or at the end, that means the email is invalid. @ (6&8) If the number of is more or less than one, then the input is an invalid email. @ That was a very simple validator, where we checked four things: if the input for email is empty, the length of the email input is less than 4, and the position and number @ in the input. Reminder: Do not change the order of return statements. It will cause an error. Create Password Validator in Flutter We'll continue with the second validator for the password. We'll only validate the password if it's not empty and its length is greater than 5. So, once again inside AuthValidator class, we'll create a new function . passwordValidator // Password validator String? passwordVlidator(String? val) { final String password = val as String; if (password.isEmpty || password.length <= 5) return passwordErrMsg; return null; } Create Confirm Password Validator in Flutter During registration, there will be two password input fields, the second one is to confirm the given password. Our validator will take two inputs: the original password and the second password. confirmPassword // Confirm password String? confirmPasswordValidator(String? val, firstPasswordInpTxt) { final String firstPassword = firstPasswordInpTxt; final String secondPassword = val as String; // If either of the password field is empty // Or if thier length do not match then we don't need to compare their content // #1 if (firstPassword.isEmpty || secondPassword.isEmpty || firstPassword.length != secondPassword.length) { return confirmPasswordErrMsg; } // If two passwords do not match then send error message // #2 if (firstPassword != secondPassword) return confirmPasswordErrMsg; return null; } For password confirmation, we checked: If either of the two passwords is empty or if their lengths don't match each other. If so, then return the error message. The second condition compares the content of two passwords, if they don't match then returns the error message. Like this our three validators are ready for action. Altogether AuthValidators Class looks like this. class AuthValidators { // Create error messages to send. static const String emailErrMsg = "Invalid Email Address, Please provide a valid email."; static const String passwordErrMsg = "Password must have at least 6 characters."; static const String confirmPasswordErrMsg = "Two passwords don't match."; // A simple email validator that checks presence and position of @ String? emailValidator(String? val) { final String email = val as String; // If length of email is <=3 then its invlaid if (email.length <= 3) return emailErrMsg; // Check if it has @ final hasAtSymbol = email.contains('@'); // find position of @ final indexOfAt = email.indexOf('@'); // Check numbers of @ final numbersOfAt = "@".allMatches(email).length; // Valid if has @ if (!hasAtSymbol) return emailErrMsg; // and if number of @ is only 1 if (numbersOfAt != 1) return emailErrMsg; //and if '@' is not first or last character if (indexOfAt == 0 || indexOfAt == email.length - 1) return emailErrMsg; // Else its valid return null; } // Password validator String? passwordVlidator(String? val) { final String password = val as String; if (password.isEmpty || password.length <= 5) return passwordErrMsg; return null; } // Confirm password String? confirmPasswordValidator(String? val, firstPasswordInpTxt) { final String firstPassword = firstPasswordInpTxt; final String secondPassword = val as String; // If either of the password field is empty // Or if thier length do not match then we don't need to compare their content if (firstPassword.isEmpty || secondPassword.isEmpty || firstPassword.length != secondPassword.length) { return confirmPasswordErrMsg; } // If two passwords do not match then send error message if (firstPassword != secondPassword) return confirmPasswordErrMsg; return null; } } Homework on Validators Here's something for you to practice. is an invalid email address because symbols(_, ., -) should always be followed by letters or numbers. Can you write a validator for this error? xyz..abc@mail.com On the password validator, check that it should contain both numbers and letters to be valid. Add a username validator, check that it should not be the same as an email address. By the way, the username is the optional input. How to create Register & Sign in Form in Flutter? Auth Form Widget: Temporary Now, that we've made our dynamic input as well as validator it's time to put them together to create an authentication form visuals. We'll create our form widget in the file which will be displayed in file. auth_form_widget.dart auth_screen.dart auth_form_widget.dart import 'package:flutter/material.dart'; class AuthFormWidget extends StatefulWidget { const AuthFormWidget({Key? key}) : super(key: key); @override State createState() => _AuthFormWidgetState(); } class _AuthFormWidgetState extends State { // Define Form key final _formKey = GlobalKey (); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(8), child: Form( key: _formKey, child: TextFormField(), ), ); } } In flutter, class can act as a container to display TextFormFields(if they are more than one). It also requires a which can be obtained via the global key of type FormState as we did just now. Before this form widget bulks up let's connect it to the auth_screen and display it on the app. We'll change it later on after connecting auth screen to the router. Form FormState Authentication Screen auth_screen.dart import 'package:flutter/material.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; import 'package:temple/screens/auth/widgets/auth_form_widget.dart'; class AuthScreen extends StatelessWidget { const AuthScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(APP_PAGE.auth.routePageTitle)), body: // Safe area prevents safe gards widgets to go beyond device edges SafeArea( //===========// // to dismiss keyword on tap outside use listener child: Listener( onPointerDown: (PointerDownEvent event) => FocusManager.instance.primaryFocus?.unfocus(), //===========// child: SingleChildScrollView( child: SizedBox( width: double.infinity, child: Column(children: [ // Display a welcome user image Padding( padding: const EdgeInsets.all(8.0), child: Image.asset( 'assets/AuthScreen/WelcomeScreenImage_landscape_2.png', fit: BoxFit.fill, ), ), const AuthFormWidget() ]), ), ), ), ), ); } } Here is auth_screen.dart, this is it, we'll not make any changes in the future. Since the app is only accessible to registered users, the authentication screen will be the first screen our user will be prompted to after onboarding. So, we don't need to display user_drawer or the bottom navbar. Dismissal of the active keyboard, when tapped outside, is an important characteristic to have. class responds to gesture events like a mouse click, tap, etc. Together with we can track the focus node tree and unfocus the active keyboard. You might be wondering why am I using it on auth_screen as a whole instead of auth_form_widget. That's because gesture detector events should cover the whole visible area which in this case is . Listener FocusManager SingleChildScrollView Next, is the image section, if you're using the source code from the GitHub repo image should already be in the AuthScreen folder inside assets. Let's add the path in the pubspec file. assets: # Splash Screens - assets/splash/om_splash.png - assets/splash/om_lotus_splash.png - assets/splash/om_lotus_splash_1152x1152.png # Onboard Screens - assets/onboard/FindTemples.png - assets/onboard/FindVenues.png // New line # Auth Screens - assets/AuthScreen/WelcomeScreenImage_landscape_2.png It's time to add auth_screen to app_router.dart Connect Auth Screen to Router app_router.dart routes: [ GoRoute( path: APP_PAGE.home.routePath, name: APP_PAGE.home.routeName, builder: (context, state) => const Home(), ), // Add the onboard Screen GoRoute( path: APP_PAGE.onboard.routePath, name: APP_PAGE.onboard.routeName, builder: (context, state) => const OnBoardScreen()), // New line from here // Add Auth Screen on Go Router GoRoute( path: APP_PAGE.auth.routePath, name: APP_PAGE.auth.routeName, builder: (context, state) => const AuthScreen()), ], Temporary Navigation To AuthScreen We're yet to write a backend/business logic in this blog. But we do have to test UI. So, let's create a temporary link in our user_drawer.dart file that'll take us to auth_screen. user_drawer.dart ............... actions: [ ListTile( leading: Icon( Icons.person_outline_rounded, color: Theme.of(context).colorScheme.secondary, ), title: const Text('User Profile'), onTap: () { print("User Profile Button Pressed"); }), // ============================// // A temporarry link to auth screen ListTile( leading: Icon( Icons.login, color: Theme.of(context).colorScheme.secondary, ), title: const Text('Register/Login'), onTap: () => GoRouter.of(context).goNamed(APP_PAGE.auth.routeName)), // ============================// ListTile( leading: Icon( Icons.logout, color: Theme.of(context).colorScheme.secondary, ), title: const Text('Logout'), onTap: () { print("Log Out Button Pressed"); }), ], ..... Save it all and run the app, navigate to auth_screen from the user drawer(press the person icon for the drawer), and you'll see auth screen. Now that we can see the authentication screen, let's create a full-fledged auth form. A Complete Auth Form Widget The codes for the file is long. So, let's go over it a few pieces at a time first. auth_form_widget.dart Instantiate AuthValidators inside _AuthFormWidgetState class. // Instantiate validator final AuthValidators authValidator = AuthValidators(); Create and . controllers focus nodes // controllers late TextEditingController emailController; late TextEditingController usernameController; late TextEditingController passwordController; late TextEditingController confirmPasswordController; // create focus nodes late FocusNode emailFocusNode; late FocusNode usernameFocusNode; late FocusNode passwordFocusNode; late FocusNode confirmPasswordFocusNode; Create obscure text bool // to obscure text default value is false bool obscureText = true; Auth Mode Instead of creating two separate screens for registering and signing in, we'll just toggle between the few inputs displayed, on and off. For that, let's create a boolean to control authMode. // This will require toggling between register and signin mode bool registerAuthMode = false; Instantiate and Dispose Instantiate all the and focus nodes on function. Similarly, these all also need to be disposed of once done so let's do that as well with the method. text editing controllers initState dispose @override void initState() { super.initState(); emailController = TextEditingController(); usernameController = TextEditingController(); passwordController = TextEditingController(); confirmPasswordController = TextEditingController(); emailFocusNode = FocusNode(); usernameFocusNode = FocusNode(); passwordFocusNode = FocusNode(); confirmPasswordFocusNode = FocusNode(); } @override void dispose() { super.dispose(); emailController.dispose(); usernameController.dispose(); passwordController.dispose(); confirmPasswordController.dispose(); emailFocusNode.dispose(); usernameFocusNode.dispose(); passwordFocusNode.dispose(); confirmPasswordFocusNode.dispose(); } Password Visibility Handler Create a function that'll toggle the password's visibility on the relevant icon tap. void toggleObscureText() { setState(() { obscureText = !obscureText; }); } Snackbar Widget Let's create a to pop info on various circumstances. snack bar // Create a scaffold messanger SnackBar msgPopUp(msg) { return SnackBar( content: Text( msg, textAlign: TextAlign.center, )); } Prepare for List of Widgets In Column Let's change the child of Form we're returning to a column. @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(8), child: Form( key: _formKey, child: Column(children: [],) ), ); } Input Widgets It's time to create our email, username, password, and confirm password input forms. Inside column's children for from widget, we'll add inputs one by one. Email Input // Email DynamicInputWidget( controller: emailController, obscureText: false, focusNode: emailFocusNode, toggleObscureText: null, validator: authValidator.emailValidator, prefIcon: const Icon(Icons.mail), labelText: "Enter Email Address", textInputAction: TextInputAction.next, isNonPasswordField: true, ), const SizedBox( height: 20, ), Make sure to import DynamicInput Widget Username Input // Username DynamicInputWidget( controller: usernameController, obscureText: false, focusNode: usernameFocusNode, toggleObscureText: null, validator: null, prefIcon: const Icon(Icons.person), labelText: "Enter Username(Optional)", textInputAction: TextInputAction.next, isNonPasswordField: true, ), const SizedBox( height: 20, ), Password Input // password DynamicInputWidget( controller: passwordController, labelText: "Enter Password", obscureText: obscureText, focusNode: passwordFocusNode, toggleObscureText: toggleObscureText, validator: authValidator.passwordVlidator, prefIcon: const Icon(Icons.password), textInputAction: registerAuthMode ? TextInputAction.next : TextInputAction.done, isNonPasswordField: false, ), const SizedBox( height: 20, ), Confirm Password Input // confirm password DynamicInputWidget( controller: confirmPasswordController, focusNode: confirmPasswordFocusNode, isNonPasswordField: false, labelText: "Confirm Password", obscureText: obscureText, prefIcon: const Icon(Icons.password), textInputAction: TextInputAction.done, toggleObscureText: toggleObscureText, validator: (val) => authValidator.confirmPasswordValidator( val, passwordController.text), ), const SizedBox( height: 20, ), Regsiter/SignIn Button Later on, we'll also need to create and toggle functions to register and sign in once we set up the firebase back-end. For now, we'll just toggle the register/sign-in texts of the elevated button. // Toggle register/singin button text. Later on we'll also need to toggle register or signin function Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () {}, child: const Text('Cancel'), ), const SizedBox( width: 20, ), ElevatedButton( onPressed: () {}, child: Text(registerAuthMode ? 'Register' : 'Sign In'), style: ButtonStyle( elevation: MaterialStateProperty.all(8.0), ), ), ], ), Toggle Auth Mode Manage authentication mode with setState(). Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(registerAuthMode ? "Already Have an account?" : "Don't have an account yet?"), TextButton( onPressed: () => setState(() => registerAuthMode = !registerAuthMode), child: Text(registerAuthMode ? "Sign In" : "Regsiter"), ) ], ) Register/Sigin Animated Transition If you save the file and run it. You probably notice the toggle doesn't work. That's because we haven't implemented animated transition yet. Two input widgets: and widgets need to be hidden during the sign-in process but visible on registration. So, we'll use the toggle visibility base on the value of the variable we created earlier. We'll use animation for a smooth transition during the toggle. username confirm password registerAuthMode class can be used for animation, while class can be used for fade-in/out widgets. With the combination of these two, we'll toggle input with animated opacity while the animated container will squeeze/fill the space occupied by input smoothly. AnimatedContainer AnimatedOpacity So, let's animate the username, sized-box widget following it, and confirm-password input widget. // Username AnimatedContainer( duration: const Duration(milliseconds: 500), height: registerAuthMode ? 65 : 0, child: AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: DynamicInputWidget( controller: usernameController, obscureText: false, focusNode: usernameFocusNode, toggleObscureText: null, validator: null, prefIcon: const Icon(Icons.person), labelText: "Enter Username(Optional)", textInputAction: TextInputAction.next, isNonPasswordField: true, ), ), ), // We'll also need to fade in/out sizedbox AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: const SizedBox( height: 20, ), ), // Confirm password AnimatedContainer( duration: const Duration(milliseconds: 500), height: registerAuthMode ? 65 : 0, child: AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: DynamicInputWidget( controller: confirmPasswordController, focusNode: confirmPasswordFocusNode, isNonPasswordField: false, labelText: "Confirm Password", obscureText: obscureText, prefIcon: const Icon(Icons.password), textInputAction: TextInputAction.done, toggleObscureText: toggleObscureText, validator: (val) => authValidator.confirmPasswordValidator( val, passwordController.text), ), ), ), After this, you'll be able to see two inputs on the authentication screen, cause sign-in mode is our default mode. Now, our Form Widget UI is ready. Don't be confused, you can find all as a whole down below. auth_form_widget.dart import 'package:flutter/material.dart'; import 'package:temple/screens/auth/utils/auth_validators.dart'; import 'package:temple/screens/auth/widgets/text_from_widget.dart'; class AuthFormWidget extends StatefulWidget { const AuthFormWidget({Key? key}) : super(key: key); @override State createState() => _AuthFormWidgetState(); } class _AuthFormWidgetState extends State { // Define Form key final _formKey = GlobalKey (); // Instantiate validator final AuthValidators authValidator = AuthValidators(); // controllers late TextEditingController emailController; late TextEditingController usernameController; late TextEditingController passwordController; late TextEditingController confirmPasswordController; // create focus nodes late FocusNode emailFocusNode; late FocusNode usernameFocusNode; late FocusNode passwordFocusNode; late FocusNode confirmPasswordFocusNode; // to obscure text default value is false bool obscureText = true; // This will require to toggle between register and sigin in mode bool registerAuthMode = false; // Instantiate all the *text editing controllers* and focus nodes on *initState* function @override void initState() { super.initState(); emailController = TextEditingController(); usernameController = TextEditingController(); passwordController = TextEditingController(); confirmPasswordController = TextEditingController(); emailFocusNode = FocusNode(); usernameFocusNode = FocusNode(); passwordFocusNode = FocusNode(); confirmPasswordFocusNode = FocusNode(); } // These all need to be disposed of once done so let's do that as well. @override void dispose() { super.dispose(); emailController.dispose(); usernameController.dispose(); passwordController.dispose(); confirmPasswordController.dispose(); emailFocusNode.dispose(); usernameFocusNode.dispose(); passwordFocusNode.dispose(); confirmPasswordFocusNode.dispose(); } // Create a function that'll toggle the password's visibility on the relevant icon tap. void toggleObscureText() { setState(() { obscureText = !obscureText; }); } // Let's create a snack bar to pop info on various circumstances. // Create a scaffold messanger SnackBar msgPopUp(msg) { return SnackBar( content: Text( msg, textAlign: TextAlign.center, )); } @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(8), child: Form( key: _formKey, child: Column( children: [ // Email DynamicInputWidget( controller: emailController, obscureText: false, focusNode: emailFocusNode, toggleObscureText: null, validator: authValidator.emailValidator, prefIcon: const Icon(Icons.mail), labelText: "Enter Email Address", textInputAction: TextInputAction.next, isNonPasswordField: true, ), const SizedBox( height: 20, ), // Username AnimatedContainer( duration: const Duration(milliseconds: 500), height: registerAuthMode ? 65 : 0, child: AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: DynamicInputWidget( controller: usernameController, obscureText: false, focusNode: usernameFocusNode, toggleObscureText: null, validator: null, prefIcon: const Icon(Icons.person), labelText: "Enter Username(Optional)", textInputAction: TextInputAction.next, isNonPasswordField: true, ), ), ), AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: const SizedBox( height: 20, ), ), DynamicInputWidget( controller: passwordController, labelText: "Enter Password", obscureText: obscureText, focusNode: passwordFocusNode, toggleObscureText: toggleObscureText, validator: authValidator.passwordVlidator, prefIcon: const Icon(Icons.password), textInputAction: registerAuthMode ? TextInputAction.next : TextInputAction.done, isNonPasswordField: false, ), const SizedBox( height: 20, ), AnimatedContainer( duration: const Duration(milliseconds: 500), height: registerAuthMode ? 65 : 0, child: AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: DynamicInputWidget( controller: confirmPasswordController, focusNode: confirmPasswordFocusNode, isNonPasswordField: false, labelText: "Confirm Password", obscureText: obscureText, prefIcon: const Icon(Icons.password), textInputAction: TextInputAction.done, toggleObscureText: toggleObscureText, validator: (val) => authValidator.confirmPasswordValidator( val, passwordController.text), ), ), ), const SizedBox( height: 20, ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () {}, child: const Text('Cancel'), ), const SizedBox( width: 20, ), ElevatedButton( onPressed: () {}, child: Text(registerAuthMode ? 'Register' : 'Sign In'), style: ButtonStyle( elevation: MaterialStateProperty.all(8.0), ), ), ], ), const SizedBox( height: 20, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(registerAuthMode ? "Already Have an account?" : "Don't have an account yet?"), TextButton( onPressed: () => setState(() => registerAuthMode = !registerAuthMode), child: Text(registerAuthMode ? "Sign In" : "Regsiter"), ) ], ) ], ), ), ); } } Our validator's still not going to work, because we still haven't handled what to do on form submission. But let's check out the result of our hard work. https://youtu.be/glba5xwAnHQ Summary Let's summarize what we did so far. Created Dynamic Input Widget. Wrote our validators for the inputs we'll be taking in. Create both sign-in and registration forms on one screen. Animated the transition between Registration and Sign In authentication. Chapter Seven: Flutter Firebase Setup | Cloud & Emulator Intro We'll now Create Firebase Project; Connect the Firebase cloud project with a Flutter project from the Command Line Terminal; Install the Firebase and FlutterFire CLI; Set up Firebase locally with the local emulator suite. Setting Up The project source code until the last part can be found in this . folder Create A Firebase Project Please, create a Firebase project on the . If you have never created a Firebase project then follow the instructions from this by Google. console code lab Install Firebase CLI We'll rely on the package for our development. Configuring the FlutterFire package can be done with FlutterFire . But FlutterFire CLI relies on the Firebase CLI. FlutterFire CLI Follow the instruction to install the CLI and then login into the Firebase account. No, need to initialize Firebase, for now, we will do it later on after FlutterFire CLI configurations. here Install Dependencies After the firebase CLI installation, before we link our project to the firebase project, we'll install some dependencies. On your terminal: # Root of the flutter project # Firebase core flutter pub add firebase_core # Firebase Auth flutter pub add firebase_auth # Firebase Firestore flutter pub add cloud_firestore # Firebase Cloud Functions flutter pub add cloud_functions # Firebase Storage flutter pub add firebase_storage We've installed Firebase Core, Firebase Auth, Firebase Cloud Functions, and Firebase Storage packages for flutter. Install and Configure FlutterFire CLI Let's install and configure the CLI on the terminal # Install Firebase CLI dart pub global activate flutterfire_cli # On the root of your project # configur cli flutterfire configure During the configuration process: You'll be asked to choose the right project from the list(if there are multiple). You'll also be asked to choose apps for the project. Chose only android and ios. You can select/deselect with the space bar. You'll be asked to provide the bundle id for IOS. I just gave the same one as android: . com.example.flutterfirebase_practice Now we're done with flutter fire installation and configurations, and next, we need to initialize it. Firebase Initialization On the file of the project let's initialize firebase. main.dart // Import import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; // Inside main() method // Initialize Firebase await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); Now our main.dart file should look like this. import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:temple/app.dart'; import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; void main() async { // concrete binding for applications based on the Widgets framewor WidgetsFlutterBinding.ensureInitialized(); // Instantiate shared pref SharedPreferences prefs = await SharedPreferences.getInstance(); SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.black38), ); // Initialize Firebase await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); // Pass prefs as value in MyApp runApp(MyApp(prefs: prefs)); } Set-Up Firebase Backend: Cloud and Emulator We'll be writing a lot of code as backend, separate from our flutter side to keep it secure and clean. So, let's set up firebase separately for both cloud and emulators. Reminder: Before we start configuration, make sure to create a Firestore database(on test mode) from the firebase console of the project you've created. Otherwise, you'll get an error during the process telling you there's no database created. # On the root of your project firebase init You'll be asked to choose from different Firebase products. Choose four: Firestore, Firebase Storage, Cloud Functions, and Emulators. Next, you have to choose the Firebase project or create one. Since we've already created one, chose the right project from the existing ones. Just press enter, on all the file options provided there. Select JavaScript as the language to use for firebase functions. Select 'y' for both linter and installations. During the process, you'll be prompted to Emulators settings. Here, please select four products: Authentication, Firestore, Storage, and Functions Emulators. Just press enter to select the default ports. Enter "Y" to enable emulator UI. Press enter for the rest. Now, we've set up all the necessities. Wait there's still more, we still haven't linked the flutter project to Firebase Emulator Suite. Connect Firebase Emulator Suite to Flutter Project. To connect to the emulator we once again need to make some changes to the file. main.dart Import required dependencies if you haven't already import 'dart:io' show Platform; // Its required for emulator import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:cloud_functions/cloud_functions.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_storage/firebase_storage.dart'; Create Global Boolean // Outside of any class or methods, before main() const bool _useEmulator = true; Connection Handler Create a function that'll connect to the emulator with the required settings. // Outside of main, preferably at the end of the file // Settings for firebase emulator connection Future _connectToEmulator() async { // Provide url to the emulator, localhost might not work on android emulator. final host = Platform.isAndroid ? '10.0.2.2' : 'localhost'; //#1 // Provide port for all the local emulator prodcuts // #2 const authPort = 9099; const firestorePort = 8080; const functionsPort = 5001; const storagePort = 9199; // Just to make sure we're running locally print("I am running on emulator"); // Instruct all the relevant firebase products to use the firebase emulator // # 3 await FirebaseAuth.instance.useAuthEmulator(host, authPort); FirebaseFirestore.instance.useFirestoreEmulator(host, firestorePort); FirebaseFunctions.instance.useFunctionsEmulator(host, functionsPort); FirebaseStorage.instance.useStorageEmulator(host, storagePort); } Let's go through the vitals. When running on an android emulator it's not localhost. So, it can give you errors so, check the platform and provide the right URL. Each firebase product will run on its port. So, provide the right port. You can find the port for all products in the file. firebase.json Instruct all the products to use Firebase Emulator if it's running. Initialize Emulator On Main Now, we need to call this function on the method right after you initialize firebase. main() // Set app to run on firebase emulator if (_useEmulator) { await _connectToEmulator(); } Full Code We're all set to use the emulator now. The final form of our main.dart is: import 'dart:io' show Platform; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:cloud_functions/cloud_functions.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_storage/firebase_storage.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:firebase_core/firebase_core.dart'; import 'firebase_options.dart'; // Custom modules import 'package:temple/app.dart'; const bool _useEmulator = true; void main() async { // concrete binding for applications based on the Widgets framewor WidgetsFlutterBinding.ensureInitialized(); // Instantiate shared pref SharedPreferences prefs = await SharedPreferences.getInstance(); SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.black38), ); // Initialize Firebase await Firebase.initializeApp( options: DefaultFirebaseOptions.currentPlatform, ); // Set app to run on firebase emulator if (_useEmulator) { await _connectToEmulator(); } // Pass prefs as value in MyApp runApp(MyApp(prefs: prefs)); } // Settings for firebase emulator connection Future _connectToEmulator() async { // Provide url to the emulator, localhost might not work on android emulator. final host = Platform.isAndroid ? '10.0.2.2' : 'localhost'; // Provide port for all the local emulator prodcuts const authPort = 9099; const firestorePort = 8080; const functionsPort = 5001; const storagePort = 9199; // Just to make sure we're running locally print("I am running on emulator"); // Instruct all the relevant firebase products to use firebase emulator await FirebaseAuth.instance.useAuthEmulator(host, authPort); FirebaseFirestore.instance.useFirestoreEmulator(host, firestorePort); FirebaseFunctions.instance.useFunctionsEmulator(host, functionsPort); FirebaseStorage.instance.useStorageEmulator(host, storagePort); } Start Emulator To run the firebase emulator type the following command. // On terminal firebase emulators:start When you run your android emulator you should see the "I am running on emulator" message(emulator should be running). Error: Could not start Firestore Emulator, port taken. At some point when we accidentally forget to close the port, we'll get an error that the port is already taken. To fix that we have to kill the port. # Provide the port that has been given in an error message like 8080 npx kill-port 8080 Now, that the active port has been terminated, you can start the emulator again, which will look like the image below. Summary In this very short chapter, we connected our temple app to the Firebase project. Let's retrace our steps, we: Created Firebase Project & Firestore DB. Installed Firebase CLI & FlutterFire CLI. We installed Firestore, Functions, Storage, and Authentication packages. We then connected these Firebase products to the cloud Firebase project on Firebase Init. During the initialization, we also installed Firebase Emulator and did all the configuration. We then wrote a simple and easy function that handles Local Emulator Connection for us. Now know how to solve the port unavailable error issue. Chapter Eight: Flutter Firebase Authentication | Email and Password Intro In the last two chapters, we created a Login/Register UI and Set-Up connection of our Flutter project to the Firebase project. By the end of the chapter, we'll be able to authenticate users in our app. Before that, you can find the progress so far in this of the repo. folder Authentication Using Email and Password Redirect Router On Authentication Status Our user-screen flow is such that after onboarding we check if the user is authenticated or not. If not go to the authentication screen else go to the homepage. So, we have to tell the router to redirect on authentication status changes. Let's do so on our file. We'll have to make changes inside the method of Go Router. app_router.dart redirect ... redirect: (state) { .... // define the named path of auth screen // #1 final String authPath = state.namedLocation(APP_PAGE.auth.routeName); // Checking if current path is auth or not // # 2 bool isAuthenticating = state.subloc == authPath; // Check if user is loggedin or not based on userLog Status // #3 bool isLoggedIn = FirebaseAuth.instance.currentUser != null ? true : false; print("isLoggedIn is: $isLoggedIn"); if (toOnboard) { // return null if the current location is already OnboardScreen to prevent looping return isOnboarding ? null : onboardPath; } // only authenticate if a user is not logged in // #4 else if (!isLoggedIn) { return isAuthenticating ? null : authPath; // #5 } // returning null will tell the router to don't mind redirecting the section return null; }); So, what we did was: We defined a named path for the authentication screen. Similarly, a boolean to check if the app is en route to auth screen already. returns the status of the current user: null if absent(logged out mostly), true if logged in. FirebaseAuth.instance.currentUser If the user is absent then redirect from whatever route currently you're now to the authentication route. Unless the current route is already an authentication route then return null. You see if you don't check the current route, then the router may enter an infinite loop. Firebase User Authentication In With Email and Password We are using Local Emulator. But in case you're using Firebase Cloud, then first you will have to go to the firebase of your project, then enable Email/Password SignIn from the Authentication. console Now, on the file from we'll add authentication functions. auth_providers.dart screens/auth/providers Import the following files import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; Create Class and Instantiate Let's create AuthStateProvider Class and instantiate FirebaseAuth. class AuthStateProvider with ChangeNotifier { FirebaseAuth authInstance = FirebaseAuth.instance; } Registration with Email and Password Write a method. Registration // Our Function will take email,password, username and buildcontext // #1 void register(String email, String password, String username, BuildContext context) async { try { // Get back usercredential future from createUserWithEmailAndPassword method // # 2 UserCredential userCred = await authInstance .createUserWithEmailAndPassword(email: email, password: password); // Save username name await userCred.user!.updateDisplayName(username); // After that access "users" Firestore in firestore and save username, email and userLocation // # 3 await FirebaseFirestore.instance .collection('users') .doc(userCred.user!.uid) .set( { 'username': username, 'email': email, 'userLocation': null, }, ); // if everything goes well user will be registered and logged in // now go to the homepage // #4 GoRouter.of(context).goNamed(APP_PAGE.home.routeName); } on FirebaseAuthException catch (e) { // In case of error // if email already exists // # 5 if (e.code == "email-already-in-use") { print("The account with this email already exists."); } if (e.code == 'weak-password') { // If password is too weak // #6 print("Password is too weak."); } } catch (e) { // For anything else // #6 print("Something went wrong please try again."); } // notify the listeneres notifyListeners(); } Let's go over the details: Our function will take in the email address, password, username, and BuildContext. We'll need the build context for routing. We use the method made available by FlutterFire. createUserWithEmailAndPassword After registration of the user, we'll also write a new document in the 'users' collection on . Ignore the field for now. When we will deal with that in upcoming parts. Firestore userLocation If the operation is successful, then go to the home page. Firebase automatically logs in new users so we don't have to do that ourselves. Now, the is not null anymore, the router will redirect the user to the homepage. currentUser (5 & 6) In case of errors send the user an appropriate message. Right now, we're just printing the message. Later, we'll implement a snack bar and alert boxes to display messages on the application screen. Sign In With Email and Password Now that, we've made our registration function, let's make the sign-in function as well. // Our Function will take email, password and build context void login(String email, String password, BuildContext context) async { try { // try signing in # 1 UserCredential userCred = await authInstance.signInWithEmailAndPassword( email: email, password: password); // if succesfull leave auth screen and go to homepage GoRouter.of(context).goNamed(APP_PAGE.home.routeName); } on FirebaseAuthException catch (e) { // On error // If user is not found if (e.code == 'user-not-found') { print("No user found for that email."); } // If password is wrong if (e.code == 'wrong-password') { print("Wrong password."); } } catch (e) { print("Something went wrong please try again"); } // notify the listeners. notifyListeners(); } We're using the method from FlutterFire. Everything else is the same as in the registration method. sign-in The Sign-Out Method is a very basic and simple method. Sign-Out void logOut() async { await authInstance.signOut(); notifyListeners(); } Putting All Pieces Together Our AuthStateProvider Class looks like this now. import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; class AuthStateProvider with ChangeNotifier { FirebaseAuth authInstance = FirebaseAuth.instance; // Our Function will take email,password, username and buildcontext void register(String email, String password, String username, BuildContext context) async { try { // Get back usercredential future from createUserWithEmailAndPassword method UserCredential userCred = await authInstance .createUserWithEmailAndPassword(email: email, password: password); // Save username name await userCred.user!.updateDisplayName(username); // After that access "users" Firestore in firestore and save username, email and userLocation await FirebaseFirestore.instance .collection('users') .doc(userCred.user!.uid) .set( { 'username': username, 'email': email, 'userLocation': null, }, ); // if everything goes well user will be registered and logged in // now go to the homepage GoRouter.of(context).goNamed(APP_PAGE.home.routeName); } on FirebaseAuthException catch (e) { // In case of error // if email already exists if (e.code == "email-already-in-use") { print("The account with this email already exists."); } if (e.code == 'weak-password') { // If password is too weak print("Password is too weak."); } } catch (e) { // For anything else print("Something went wrong please try again."); } // notify listeneres notifyListeners(); } // Our Function will take email, and password and build context void login(String email, String password, BuildContext context) async { try { // try signing in UserCredential userCred = await authInstance.signInWithEmailAndPassword( email: email, password: password); // if succesfull leave auth screen and go to homepage GoRouter.of(context).goNamed(APP_PAGE.home.routeName); } on FirebaseAuthException catch (e) { // On error // If user is not found if (e.code == 'user-not-found') { print("No user found for that email."); } // If password is wrong if (e.code == 'wrong-password') { print("Wrong password."); } } catch (e) { print("Something went wrong please try again"); } // notify the listeners. notifyListeners(); } void logOut() async { await authInstance.signOut(); notifyListeners(); } } Add Provider To Widget Tree Our first beta version of authentication functions is ready to be tested. So, let's first enlist our provider in the widget tree with MultipleProviders. app.dart providers: [ ChangeNotifierProvider(create: (context) => AppStateProvider()), // Add authStateProvider ChangeNotifierProvider(create: (context) => AuthStateProvider()), // Remove previous Provider call and create new proxyprovider that depends on AppStateProvider ProxyProvider ( update: (context, appStateProvider, _) => AppRouter( appStateProvider: appStateProvider, prefs: widget.prefs, )) ], Handle Form Submission On Click Let's now go to file in . Here we'll have to write a function that we'll get triggered on the register/sign button click. We'll call that function . Add this function right after the method. auth_form_widget.dart lib/screen/auth/widgets/ _submitForm() msgPopUp() // Submit form will take AuthStateProvider, and BuildContext // #1 void _submitForm( AuthStateProvider authStateProvider, BuildContext context) async { // Check if the form and its input are valid // #2 final isValid = _formKey.currentState!.validate(); // Trim the inputs to remove extra spaces around them // #3 String username = usernameController.text.trim(); String email = emailController.text.trim(); String password = passwordController.text.trim(); // if the form is valid // #4 if (isValid) { // Save current state if form is valid _formKey.currentState!.save(); // Try Sign In Or Register baed on if its register Auth Mode or not // #5 if (registerAuthMode) { authStateProvider.register(email, password, username, context); } } else { authStateProvider.login(email, password, context); } } Let's go over the details. Our function will take AuthStateProvider & Build Context as arguments. We can check if the form is valid with . formKey.currentState!.validate() Trim the input to remove the extra spaces, if they exist. If the form/input is valid, then let's move on to the authentication. Depending on the authMode we'll either register or sign in the user. Instantiate Provider Inside BuildContext let's first call the AuthStateProvider. @override Widget build(BuildContext context) { // Instantiate AuthStateProvider final AuthStateProvider authStateProvider = Provider.of (context); Assign Submission Handler Let's go way down where our only ElevatedButton is and assign the method. _submitForm ElevatedButton( onPressed: () { // call _submitForm on tap _submitForm(authStateProvider, context); }, child: Text(registerAuthMode ? 'Register' : 'Sign In'), style: ButtonStyle( elevation: MaterialStateProperty.all(8.0), ), ), AuthForm Widget Our auth_form_widget.dart looks like this now. import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:temple/screens/auth/providers/auth_provider.dart'; import 'package:temple/screens/auth/utils/auth_validators.dart'; import 'package:temple/screens/auth/widgets/text_from_widget.dart'; class AuthFormWidget extends StatefulWidget { const AuthFormWidget({Key? key}) : super(key: key); @override State createState() => _AuthFormWidgetState(); } class _AuthFormWidgetState extends State { // Define Form key final _formKey = GlobalKey (); // Instantiate validator final AuthValidators authValidator = AuthValidators(); // controllers late TextEditingController emailController; late TextEditingController usernameController; late TextEditingController passwordController; late TextEditingController confirmPasswordController; // create focus nodes late FocusNode emailFocusNode; late FocusNode usernameFocusNode; late FocusNode passwordFocusNode; late FocusNode confirmPasswordFocusNode; // to obscure text default value is false bool obscureText = true; // This will require to toggle between register and sigin in mode bool registerAuthMode = false; // Instantiate all the *text editing controllers* and focus nodes on *initState* function @override void initState() { super.initState(); emailController = TextEditingController(); usernameController = TextEditingController(); passwordController = TextEditingController(); confirmPasswordController = TextEditingController(); emailFocusNode = FocusNode(); usernameFocusNode = FocusNode(); passwordFocusNode = FocusNode(); confirmPasswordFocusNode = FocusNode(); } // These all need to be disposed of once done so let's do that as well. @override void dispose() { super.dispose(); emailController.dispose(); usernameController.dispose(); passwordController.dispose(); confirmPasswordController.dispose(); emailFocusNode.dispose(); usernameFocusNode.dispose(); passwordFocusNode.dispose(); confirmPasswordFocusNode.dispose(); } // Create a function that'll toggle the password's visibility on the relevant icon tap. void toggleObscureText() { setState(() { obscureText = !obscureText; }); } // Let's create a snack bar to pop info on various circumstances. // Create a scaffold messanger SnackBar msgPopUp(msg) { return SnackBar( content: Text( msg, textAlign: TextAlign.center, )); } // Submit form will take AuthStateProvider, and BuildContext void _submitForm( AuthStateProvider authStateProvider, BuildContext context) async { // Check if the form and its input are valid final isValid = _formKey.currentState!.validate(); // Trim the inputs to remove extra spaces around them String username = usernameController.text.trim(); String email = emailController.text.trim(); String password = passwordController.text.trim(); // if the form is valid if (isValid) { // Save current state if form is valid _formKey.currentState!.save(); // Try Sigin Or Register baed on if its register Auth Mode or not if (registerAuthMode) { authStateProvider.register(email, password, username, context); } } else { authStateProvider.login(email, password, context); } } @override Widget build(BuildContext context) { final AuthStateProvider authStateProvider = Provider.of (context); return Padding( padding: const EdgeInsets.all(8), child: Form( key: _formKey, child: Column( children: [ // Email DynamicInputWidget( controller: emailController, obscureText: false, focusNode: emailFocusNode, toggleObscureText: null, validator: authValidator.emailValidator, prefIcon: const Icon(Icons.mail), labelText: "Enter Email Address", textInputAction: TextInputAction.next, isNonPasswordField: true, ), const SizedBox( height: 20, ), // Username AnimatedContainer( duration: const Duration(milliseconds: 500), height: registerAuthMode ? 65 : 0, child: AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: DynamicInputWidget( controller: usernameController, obscureText: false, focusNode: usernameFocusNode, toggleObscureText: null, validator: null, prefIcon: const Icon(Icons.person), labelText: "Enter Username(Optional)", textInputAction: TextInputAction.next, isNonPasswordField: true, ), ), ), AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: const SizedBox( height: 20, ), ), DynamicInputWidget( controller: passwordController, labelText: "Enter Password", obscureText: obscureText, focusNode: passwordFocusNode, toggleObscureText: toggleObscureText, validator: authValidator.passwordVlidator, prefIcon: const Icon(Icons.password), textInputAction: registerAuthMode ? TextInputAction.next : TextInputAction.done, isNonPasswordField: false, ), const SizedBox( height: 20, ), AnimatedContainer( duration: const Duration(milliseconds: 500), height: registerAuthMode ? 65 : 0, child: AnimatedOpacity( duration: const Duration(milliseconds: 500), opacity: registerAuthMode ? 1 : 0, child: DynamicInputWidget( controller: confirmPasswordController, focusNode: confirmPasswordFocusNode, isNonPasswordField: false, labelText: "Confirm Password", obscureText: obscureText, prefIcon: const Icon(Icons.password), textInputAction: TextInputAction.done, toggleObscureText: toggleObscureText, validator: (val) => authValidator.confirmPasswordValidator( val, passwordController.text), ), ), ), const SizedBox( height: 20, ), Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () {}, child: const Text('Cancel'), ), const SizedBox( width: 20, ), ElevatedButton( onPressed: () { // call _submitForm on tap _submitForm(authStateProvider, context); }, child: Text(registerAuthMode ? 'Register' : 'Sign In'), style: ButtonStyle( elevation: MaterialStateProperty.all(8.0), ), ), ], ), const SizedBox( height: 20, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(registerAuthMode ? "Already Have an account?" : "Don't have an account yet?"), TextButton( onPressed: () => setState(() => registerAuthMode = !registerAuthMode), child: Text(registerAuthMode ? "Sign In" : "Regsiter"), ) ], ) ], ), ), ); } } Calling Log Out We haven't added the logout method. Let's do that inside the user_drawer.dart file in . Also while we're here, let's remove that temporary authentication route. lib/globals/widgets/user_drawer/ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:provider/provider.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; import 'package:temple/screens/auth/providers/auth_provider.dart'; class UserDrawer extends StatefulWidget { const UserDrawer({Key? key}) : super(key: key); @override _UserDrawerState createState() => _UserDrawerState(); } class _UserDrawerState extends State { @override Widget build(BuildContext context) { return AlertDialog( backgroundColor: Theme.of(context).colorScheme.primary, actionsPadding: EdgeInsets.zero, scrollable: true, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15), ), title: Text( "Astha", style: Theme.of(context).textTheme.headline2, ), content: const Divider( thickness: 1.0, color: Colors.black, ), actions: [ // Past two links as list tiles ListTile( leading: Icon( Icons.person_outline_rounded, color: Theme.of(context).colorScheme.secondary, ), title: const Text('User Profile'), onTap: () { print("User Profile Button Pressed"); }), ListTile( leading: Icon( Icons.logout, color: Theme.of(context).colorScheme.secondary, ), title: const Text('Logout'), onTap: () { Provider.of (context, listen: false).logOut(); GoRouter.of(context).goNamed(APP_PAGE.auth.routeName); }), ], ); } } Now, the user can log out. Firebase Functions: Cloud Firestore Triggers Firebase provides , which get called automatically when an event it's attached to occurs. There are four triggers: onCreate, onUpdate, onDelete, and onWrite. We'll use the onCreate trigger when a new user registers to add a time-stamp field that records the time of registration. We'll write our function on the index.js file inside the functions folder. background triggers createdAt index.js // Import modules // #1 const functions = require("firebase-functions"), admin = require('firebase-admin'); // always initialize admin // #2 admin.initializeApp(); // create a const to represent firestore // #3 const db = admin.firestore(); // Create a new background trigger function // #4 exports.addTimeStampToUser = functions.runWith({ timeoutSeconds: 240, // Give timeout // #5 memory: "512MB" // memory allotment // #5 }).firestore.document('users/{userId}').onCreate(async (_, context) => { // Get current timestamp from server // #6 let curTimeStamp = admin.firestore.Timestamp.now(); // Print current timestamp on server // # 7 functions.logger.log(`curTimeStamp ${curTimeStamp.seconds}`); try { // add the new value to new users document // #8 await db.collection('users').doc(context.params.userId).set({ 'registeredAt': curTimeStamp, 'favTempleList': [], 'favShopsList': [], 'favEvents': [] }, { merge: true }); // if its done print in logger // #7 functions.logger.log(`The current timestamp added to users collection: ${curTimeStamp}`); // always return something to end the function execution return { 'status': 200 }; } catch (e) { // Print error incase of errors // #7 functions.logger.log(`Something went wrong could not add timestamp to users collectoin ${curTimeStamp}`); // return status 400 for error return { 'status': 400 }; } }); I hope readers are familiar with JavaScript and Node.js. Let's go over the important details on index.js. We import firebase functions and firebase-admin. Always remember to initialize admin. Create a constant to represent the Firebase Firestore. We create our first function, addTimeStampToUser which will get triggered whenever a new document is created inside the "users" collection. We can provide restrictions to a function with method. It's important sometimes to just terminate function to free memory and to save ourselves from terrifying bills. But you have to experiment with it. runWtih() We can get a time-stamp from the server. Well, it's just a placeholder, not a time. Please read this to find out more about it. nice article We print the logs to see the progress. We can save new fields in a document with . Few things to point out here. Since the user is being created, there's no , but we can get the new id to be, from context's paramsId. Find out more on . Another thing, when you're updating/adding a new value, you have to provide merge options to make sure the new value doesn't overwrite the previous ones(email&username in our case). db.collection('collection_name').doc(documentId).set(value) context.auth.uid EventContext You saw fields being added to the user document. Don't worry about it for now. These arrays will be filled in later on in the tutorial. On your emulator, you'll see these fields and logs when we register a new user. 'favTempleList', 'favShopsList', and 'favEvents' If you want to functions on the cloud, first you'll have to upgrade plans to the plan. When you're done upgrading use the following command to deploy functions. deploy paid firebase deploy --only functions If you're having trouble deploying where you'll get an error like , it's an error related to eslint, nothing mentioned worked for me either, so, I just uninstalled eslint and deployed functions on cloud. npm --prefix "$RESOURCE_DIR" run lint here Watch this from Google to understand more about Firebase Functions. playlist Summary We did quite a few tasks in this chapter. Let's retrace our steps: We set up the AppRouter to redirect to the authentication screen on the app launch if the user is not logged in. We created Registration, Login, and LogOut functions using the FlutterFire package. We also wrote a simple background trigger for Firebase Functions which will auto-save the time when a user registers on our app. Chapter Nine: Improve User Experience in Flutter With Snack Bars, Progress Indicators, and Alert Dialogs Intro , , , and similar items are very essential tools to enhance the user experience on an application regardless of platform. In the last two chapters, we created UI and wrote the backend for registration and sign-in methods to use with the Firebase project. In this chapter, we'll use features from flutters to give visual feedback to users. Snack Bars Alert Dialogs ProgressIndicators You can find the source code . here Show Progress Indicator During Registration/Sign In Head over to class and make some changes. auth_state_provider.dart Create an enum outside of class, to toggle the Application Process State State. // Outside of any class or function // Make an enum to togggle progrss indicator enum ProcessingState { done, waiting, } Inside of Provider class let's create a field of type and a function that switches these values/states. ProcessingState ProcessingState _processingState = ProcessingState.done; // getter ProcessingState get processingState => _processingState; void setPrcState(ProcessingState prcsState) { _processingState = prcsState; notifyListeners(); } We'll display the CircularProgressIndicator whenever the application is busy and remove it when done. For instance, after pressing the register/sign-in button we can display the progress indicator in place of the button and then remove it when firebase sends a response. So, let's first start by adding the function inside the register function. We'll make changes inside auth_form_widget.dart files after this. Update Processing State In Register Function // Our Function will take email,password, username and buildcontext void register(String email, String password, String username, BuildContext context) async { // Start loading progress indicator once submit button is hit // #1 setPrcState(ProcessingState.waiting); try { // Get back usercredential future from createUserWithEmailAndPassword method UserCredential userCred = await authInstance .createUserWithEmailAndPassword(email: email, password: password); // Save username name await userCred.user!.updateDisplayName(username); // After that access "users" Firestore in firestore and save username, email and userLocation await FirebaseFirestore.instance .collection('users') .doc(userCred.user!.uid) .set( { 'username': username, 'email': email, 'userLocation': null, }, ); // if everything goes well user will be registered and logged in // now go to the homepage GoRouter.of(context).goNamed(APP_PAGE.home.routeName); } on FirebaseAuthException catch (e) { // In case of error // if email already exists if (e.code == "email-already-in-use") { print("The account with this email already exists."); } if (e.code == 'weak-password') { // If password is too weak print("Password is too weak."); } // #2 setPrcState(ProcessingState.done); } catch (e) { // For anything else print("Something went wrong please try again."); // #3 setPrcState(ProcessingState.done); } // notify listeneres notifyListeners(); } In the registration function, we'll start to toggle the ProcessState to (which's by default) right before the Try block. waiting done (#2&3) We'll only switch it back to once the servers send an error response, at the end of the Catch block. We'll not switch it back at the end of the try block because, in case of success, we'll move on to the next page as well as display a SnackBar which we'll implement after this. do Please make similar changes to the and the functions by yourself. Sign In Log Out Now, we'll need to tell the application, when the processing state is in , display a progress indicator, and then remove the indicator once the processing state is done. To do so let's head over to . Right after we instantiate an AuthStateProvider, create a new variable of the type ProcessState whose value is equal to that of AuthStateProvider's process state. waiting auth_form_widget.dart Widget build(BuildContext context) { final AuthStateProvider authStateProvider = Provider.of (context); // make new ProcessState var ProcessingState prcState = authStateProvider.processingState; After that, down where we have our elevated button, let's make it a conditionally rendering widget. if (prcState == ProcessingState.waiting) const CircularProgressIndicator(), if (prcState == ProcessingState.done) Row( mainAxisAlignment: MainAxisAlignment.end, children: [ TextButton( onPressed: () {}, child: const Text('Cancel'), ), const SizedBox( width: 20, ), ElevatedButton( onPressed: () { // call _submitForm on tap _submitForm(authStateProvider, context); }, child: Text(registerAuthMode ? 'Register' : 'Sign In'), style: ButtonStyle( elevation: MaterialStateProperty.all(8.0), ), ), ], ), With this, the progress indicator will activate and deactivate at the right time. Display Information on Snackbar As mentioned earlier, we'll be using to display information like "Authentication Successful", "Welcome Back", etc. To do so let's again create a simple function on AuthStateProvider class. Snackbar // Right after setPrcState function // create function to handle popups SnackBar msgPopUp(msg) { return SnackBar( content: Text( msg, textAlign: TextAlign.center, )); } This function will take a custom message and return a SnackBar to display on the screen. Snackbar works in conjunction with class. So, we'll pass this msgPopUp method in at the end of the block operations, and just before we call GoRouter. ScaffoldMessenger ScaffoldMessenger.of(context) try Inside Registration Function ScaffoldMessenger.of(context) .showSnackBar(msgPopUp("The account has been registered.")); // Before GoRouter GoRouter.of(context).goNamed(APP_PAGE.home.routeName); Inside Login Function ScaffoldMessenger.of(context).showSnackBar(msgPopUp("Welcome Back")); With this when the authentication operation succeeds user will see a snack bar at the bottom of the application. Alert Error on Authentication With Alert Dialog The snack bar is useful because it subtly displays short messages. However, because of its subtlety, it is not very appropriate to be used in case of errors. In such cases, it's better to alert users using a dialog pop-up such as the widget. So, right after the msgPopUp function, let's create another function. AlertDialog // #1 AlertDialog errorDialog(BuildContext context, String errMsg) { return AlertDialog( title: Text("Error", style: TextStyle( //text color will be red // #2 color: Theme.of(context).colorScheme.error, )), content: Text(errMsg, style: TextStyle( //text color will be red // #3 color: Theme.of(context).colorScheme.error, )), actions: [ TextButton( // On button click remove the dialog box // #2 onPressed: () => Navigator.of(context).pop(), child: const Text('OK'), ), ], ); } Our method will take two arguments: an error message and a build context. Our alert box will have texts with the color red. On click, the dialog box will be removed from the screen. The build context is required here to call method. Navigator.pop On both registration and sign-in methods, we are only printing the error messages. Now, let's replace those print statements with errorDialog() and pass the same messages into the function. Inside Register Function's Catch Blocks on FirebaseAuthException catch (e) { // In case of error // if email already exists if (e.code == "email-already-in-use") { showDialog( context: context, builder: (context) => errorDialog( context, "The account with this email already exists.")); } if (e.code == 'weak-password') { // If password is too weak showDialog( context: context, builder: (context) => errorDialog(context, "Password is too weak.")); } setPrcState(ProcessingState.done); } catch (e) { // For anything else showDialog( context: context, builder: (context) => errorDialog(context, "Something went wrong please try again.")); setPrcState(ProcessingState.done); } This is what the box will look like. Please, add these alerts to your sign-in method by yourself. Summary Few changes were made in AuthStateProvider and AuthFormWidget classes. We created an Enum to address process states. Progress indicators were implemented based on Processing Status. A simple snack bar function was built to display information for users when authentication succeeds. An error handler was created to display error messages on an alert dialog box. Chapter Ten: Permission Handler and Location Access In Flutter Intro As a part of the user-screen flow, we are now at the stage where we need to access the user location. So, we'll ask for the user's location as soon as the user authenticates and reaches the homepage. We'll also to save the user's location on the 'users/userId' document on Firebase Firestore. Find the source code to start this section from . Firebase Cloud Functions here Packages In previous , we've already installed and set up Firebase packages. For now, we'll need three more packages: , , and . Follow the instruction on the packages home page or add just use the version I am using below. endeavors Location Google Maps Flutter Permission Handler The location package itself is enough to get both permission and location. However, permission_handler can get permission for other tasks like camera, local storage, and so on. Hence, we'll use both, one to get permission and another for location. For now, we'll only use the google maps package to use Latitude and Longitude data types. Installation On the command Terminal: # Install location flutter pub add location # Install Permission Handler flutter pub add permission_handler # Install Google Maps Flutter flutter pub add google_maps_flutter Setting Up Packages Location Package For the Location package, to be able to ask for the user's permission we need to add some settings. Android For android at before the tag. "android/app/src/main/AndroidManifest.xml" application IOS For ios, in , add the following settings at the end of tag. "ios/Runner/Info.plist" dict UIBackgroundModes location NSLocationWhenInUseUsageDescription Need location when in use NSLocationAlwaysAndWhenInUseUsageDescription Always and when in use! NSLocationUsageDescription Older devices need location. NSLocationAlwaysUsageDescription Can I have location always? NSUserTrackingUsageDescription appTrackingTransparency Permission Handler Android For android on add these settings if it's already not there. "android/ " gradle.properties android.useAndroidX=true android.enableJetifier=true On change compiled SDK version to 31 if you haven't already. "android/app/build.gradle" android { compileSdkVersion 31 ... } As for the permission API, we've already added them in the AndroidManifest.XML file. IOS We've already added permissions on info.plist already. Unfortunately, I am using VS Code and could not find the POD file on the ios directory. Google Maps Flutter To use google maps you'll need an API key for it. Get it from . Follow the instructions from the package's on how to create an API key. Create two credentials each for android and ios. After that, we'll have to add it to both android and ios apps. Google Maps Platform readme Android Go to the AndroidManifest.xml file again. Bool { // Add api key don't remove anything else GMSServices.provideAPIKey("API KEY Here") ... } DO NOT SHARE YOUR API KEY, ADD ANDROID MANIFEST AND APPDELEGATE FILE TO GITIGNORE BEFORE PUSHING Reminder: Check out the in packages pages if anything doesn't work. read me Acess Location of User Let's go over the series of events that'll occur in the tiny moment user goes from the authentication screen to the home screen. The user will be asked for permission to grant location access. If permission is positive, the user's location will be accessed and given to an HTTPS callable cloud function. Callable will then get the current user's id. With that ID callable will read the correct document from the "users" collections. It'll check if the location field is either empty or not. If it's empty it'll write a new document merge to add location. If it's not empty, then the function will just not write anything and return. Since as the app grows the number of app permissions needed can also keep on increasing and permission is also a global factor, let's create a provider class that'll handle permissions in folders. "globals/providers" On your terminal # Make folder mkdir lib/globals/providers/permissions // make file touch lib/globals/providers/permissions/app_permission_provider.dart App's Permission status is of four types: which is either granted, denied, restricted, or permanently denied. Let's first make an enum to switch these values in our app. app_permission_provider.dart enum AppPermissions { granted, denied, restricted, permanentlyDenied, } Let's create a provider class right below the enum. As mentioned earlier, we'll use permission_handler to get permission and the location package to get the location. import 'package:cloud_functions/cloud_functions.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/foundation.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:permission_handler/permission_handler.dart'; import 'package:location/location.dart' as location_package; // to avoid confusion with google_maps_flutter package class AppPermissionProvider with ChangeNotifier { // Start with default permission status i.e denied // #1 PermissionStatus _locationStatus = PermissionStatus.denied; // Getter // #2 get locationStatus => _locationStatus; // # 3 Future getLocationStatus() async { // Request for permission // #4 final status = await Permission.location.request(); // change the location status // #5 _locationStatus = status; print(_locationStatus); // notify listeners notifyListeners(); return status; } } We start with default permission which is denied. A getter of Location status. A method that returns a future of the type Permission Status. We'll need it later on. A method from Permission Handler(request) that asks for the user's permission. Assign new status and then notify listeners. Now, let's move to the next step of the mission, which is actually to fetch the location and save it on Firestore. We're going to add some new variables and instances that'll help us achieve it. Add the following code before method. getLocationStatus // Instantiate FIrebase functions // #1 FirebaseFunctions functions = FirebaseFunctions.instance; // Create a LatLng type that'll be user location // # 2 LatLng? _locationCenter; // Initiate location from location package // # 3 final location_package.Location _location = location_package.Location(); // # 4 location_package.LocationData? _locationData; // Getter // # 5 get location => _location; get locationStatus => _locationStatus; get locationCenter => _locationCenter as LatLng; Let's explain codes, shall we? Firebase functions instance is needed because after this we'll create an function to handle the location submission. https callable Location of the user that'll be returned by HTTPS callable function. Instantiate location package. Location to be given by Location package. The getters for fetching private values from this class. Firebase Function: HTTPS Callable Our getLocation method for AppPermissionProvider, which we'll create later, will call for HTTPS callable inside of it. So, let's head over to the index.js to create the onCall method from the firebase function. index.js // Create a function named addUserLocation exports.addUserLocation = functions.runWith({ timeoutSeconds: 60, // #1 memory: "256MB" //#1 }).https.onCall(async (data, context) => { try { // Fetch correct user document with user id. // #2 let snapshot = await db.collection('users').doc((context.auth.uid)).get(); // functions.logger.log(snapshot['_fieldsProto']['userLocation']["valueType"] === "nullValue"); // Get Location Value Type // #3 let locationValueType = snapshot['_fieldsProto']['userLocation']["valueType"]; // Check if field value for location is null // # 4 if (locationValueType == 'nullValue') { // # 5 await db.collection('users').doc((context.auth.uid)).set({ 'userLocation': data.userLocation }, { merge: true }); functions.logger.log(`User location added ${data.userLocation}`); } else { // # 6 functions.logger.log(`User location not changed`); } } catch (e) { // # 7 functions.logger.log(e); throw new functions.https.HttpsError('internal', e); } // #7 return data.userLocation; }); In the addUserLocation callable function above we are: Provide memory allocation for functions with method. runWith() Get the user document based on the user id provided by . EventContext Get the value type of the Location field. If you remember we saved the filed as null during the registration process in our auth_state_provider.dart file. This long is something I got from experimenting and printing values. That's why is best to use emulators. userLocation snapshot['_fieldsProto']['userLocation']["valueType"] If the locationValueType is null then means that the user location has never been saved before. Hence, we'll proceed to write a new document. Update the user document with the from the property of the method. It is the same location that'll be passed from the provider class to this function. Yes, the same one was fetched by the location package. userLocation data onCall If the locationValueType is not null then, we won't write a new document. Return the user location. It's important to end the callables with a return, if not function might end up running longer resulting in memory consumption that can cause extra bills from Firebase among other things. Using HTTPS Callable with Location Package in Flutter With our callable ready, let's now create a Future method that'll be used by the app. In app_permission_provider.dart file after the method create method. getLocationStatus getLocation Future getLocation() async { // Call Location status function here // #1 final status = await getLocationStatus(); // if permission is granted or limited call function // #2 if (status == PermissionStatus.granted || status == PermissionStatus.limited) { try { // assign location data that's returned by Location package // #3 _locationData = await _location.getLocation(); // Check for null values // # 4 final lat = _locationData != null ? _locationData!.latitude as double : "Not available"; final lon = _locationData != null ? _locationData!.longitude as double : "Not available"; // Instantiate a callable function // # 5 HttpsCallable addUserLocation = functions.httpsCallable('addUserLocation'); // finally call the callable function with user location // #6 final response = await addUserLocation.call( { 'userLocation': { 'lat': lat, 'lon': lon, } }, ); // get the response from callable function // # 7 _locationCenter = LatLng(response.data['lat'], response.data['lon']); } catch (e) { // incase of error location witll be null // #8 _locationCenter = null; rethrow; } } // Notify listeners notifyListeners(); } } What we did here was: Ask for the user's permission to access the location. If the permission is Granted/Limited i.e always allow/allow while using the app, then we'll try and access the location. User Location packages method to access location data. It'll return a LatLng object type. getLocation Check if the data returned is null or not, if so then handle it appropriately. (5&6)Inside the try block, we instantiate HTTPS callable function as described by the package. Our callable function takes the parameter "userLocation" as a dictionary with lat and lon as keys. After this function is called in the background, it then returns a LatLng object, which can be accessed from the data object of response. FlutterFire In case of error, the user location is determined null. Now, that the user location is updated the corresponding widgets listening to the method will be notified. But for widgets to access the Provider, we'll need to add the provider in the list of MultiProvider in our app.dart file. ... providers: [ ... ChangeNotifierProvider(create: (context) => AppPermissionProvider()), ... ], FutureBuilder To The Rescue Our operation to get the location of the user is an asynchronous one that returns a . Future can take time to return the result, hence normal widget won't work. class from flutter is meant for this task. Future FutureBuilder We'll call the getLocation method from the Home widget in the file as the property of FutureBuilder class. While waiting for the location to be saved we can just display a progress indicator. home.dart future // Import the provider Package import 'package:temple/globals/providers/permissions/app_permission_provider.dart'; // Inside Scaffold body ... body: SafeArea( child: FutureBuilder( // Call getLocation function as future // its very very important to set listen to false // #1 future: Provider.of (context, listen: false) .getLocation(), // don't need context in builder for now builder: ((_, snapshot) { // if snapshot connectinState is none or waiting // # 2 if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.none) { return const Center(child: CircularProgressIndicator()); } else { // if snapshot connectinState is active // # 3 if (snapshot.connectionState == ConnectionState.active) { return const Center( child: Text("Loading..."), ); } // if snapshot connectinState is done // #4 return const Center( child: Directionality( textDirection: TextDirection.ltr, child: Text("This Is home")), ); } })), ), ... In the home Widget after importing AppPermissionProvider class we returned FutureBuilder as the child of the Safe Area widget. In there we: User getLocation of AppPermissionProvider as future. It's very important to remember to set listen to false. Otherwise, the build will keep on reloading and functions will get executed again and again. We return CircularProgressIndicator while waiting for the result to be finished in the background. For now, it seems that there's no point in this because we're not using the location of the user in our app. So, why the progress indicator? It's for later, where we'll again use this moment to fetch another data from firebase which will also be asynchronous. When the future is active, we display text that says loading. After the future is done we load or simple home page. Final Code app_permission_provider.dart import 'package:cloud_functions/cloud_functions.dart'; import 'package:flutter/foundation.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:permission_handler/permission_handler.dart'; import 'package:location/location.dart' as location_package; // to avoid confusion with google_maps_flutter package enum AppPermissions { granted, denied, restricted, permanentlyDenied, } class AppPermissionProvider with ChangeNotifier { // Start with default permission status i.e denied PermissionStatus _locationStatus = PermissionStatus.denied; // Instantiate FIrebase functions FirebaseFunctions functions = FirebaseFunctions.instance; // Create a LatLng type that'll be user location LatLng? _locationCenter; // Initiate location from location package final location_package.Location _location = location_package.Location(); location_package.LocationData? _locationData; // Getter get location => _location; get locationStatus => _locationStatus; get locationCenter => _locationCenter as LatLng; Future getLocationStatus() async { // Request for permission final status = await Permission.location.request(); // change the location status _locationStatus = status; // notiy listeners notifyListeners(); print(_locationStatus); return status; } Future getLocation() async { // Call Location status function here final status = await getLocationStatus(); print("I am insdie get location"); // if permission is granted or limited call function if (status == PermissionStatus.granted || status == PermissionStatus.limited) { try { // assign location data that's returned by Location package _locationData = await _location.getLocation(); // Check for null values final lat = _locationData != null ? _locationData!.latitude as double : "Not available"; final lon = _locationData != null ? _locationData!.longitude as double : "Not available"; // Instantiate a callable function HttpsCallable addUserLocation = functions.httpsCallable('addUserLocation'); // finally call the callable function with user location final response = await addUserLocation.call( { 'userLocation': { 'lat': lat, 'lon': lon, } }, ); // get the response from callable function _locationCenter = LatLng(response.data['lat'], response.data['lon']); } catch (e) { // incase of error location witll be null _locationCenter = null; rethrow; } } // Notify listeners notifyListeners(); } } index.js // Import modiules const functions = require("firebase-functions"), admin = require('firebase-admin'); // always initialize admin admin.initializeApp(); // create a const to represent firestore const db = admin.firestore(); // Create a new background trigger function exports.addTimeStampToUser = functions.runWith({ timeoutSeconds: 240, // Give timeout memory: "512MB" // memory allotment }).firestore.document('users/{userId}').onCreate(async (_, context) => { // Get current timestamp from server let curTimeStamp = admin.firestore.Timestamp.now(); // Print current timestamp on server functions.logger.log(`curTimeStamp ${curTimeStamp.seconds}`); try { // add the new value to new users document i await db.collection('users').doc(context.params.userId).set({ 'registeredAt': curTimeStamp, 'favTempleList': [], 'favShopsList': [], 'favEvents': [] }, { merge: true }); // if its done print in logger functions.logger.log(`The current timestamp added to users collection: ${curTimeStamp.seconds}`); // always return something to end the function execution return { 'status': 200 }; } catch (e) { // Print error incase of errors functions.logger.log(`Something went wrong could not add timestamp to users collectoin ${curTimeStamp.seconds}`); // return status 400 for error return { 'status': 400 }; } }); // Create a function named addUserLocation exports.addUserLocation = functions.runWith({ timeoutSeconds: 60, memory: "256MB" }).https.onCall(async (data, context) => { try { // Fetch correct user document with user id. let snapshot = await db.collection('users').doc((context.auth.uid)).get(); // Check if field value for location is null // functions.logger.log(snapshot['_fieldsProto']['userLocation']["valueType"] === "nullValue"); let locationValueType = snapshot['_fieldsProto']['userLocation']["valueType"]; if (locationValueType == 'nullValue') { await db.collection('users').doc((context.auth.uid)).set({ 'userLocation': data.userLocation }, { merge: true }); functions.logger.log(`User location added ${data.userLocation}`); return data.userLocation; } else { functions.logger.log(`User location not changed`); } } catch (e) { functions.logger.log(e); throw new functions.https.HttpsError('internal', e); } return data.userLocation; }); home.dart import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; // Custom import 'package:temple/globals/providers/permissions/app_permission_provider.dart'; import 'package:temple/globals/widgets/app_bar/app_bar.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; import 'package:temple/globals/widgets/bottom_nav_bar/bottom_nav_bar.dart'; import 'package:temple/globals/widgets/user_drawer/user_drawer.dart'; class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State createState() => _HomeState(); } class _HomeState extends State { // create a global key for scafoldstate final GlobalKey _scaffoldKey = GlobalKey(); @override Widget build(BuildContext context) { return Scaffold( // Provide key to scaffold key: _scaffoldKey, // Changed to custom appbar appBar: CustomAppBar( title: APP_PAGE.home.routePageTitle, // pass the scaffold key to custom app bar // #3 scaffoldKey: _scaffoldKey, ), // Pass our drawer to drawer property // if you want to slide right to left use endDrawer: const UserDrawer(), bottomNavigationBar: const CustomBottomNavBar( navItemIndex: 0, ), primary: true, body: SafeArea( child: FutureBuilder( // Call getLocation function as future // its very very important to set listen to false future: Provider.of (context, listen: false) .getLocation(), // don't need context in builder for now builder: ((_, snapshot) { // if snapshot connectinState is none or waiting if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.none) { return const Center(child: CircularProgressIndicator()); } else { // if snapshot connectinState is active if (snapshot.connectionState == ConnectionState.active) { return const Center( child: Text("Loading..."), ); } // if snapshot connectinState is done return const Center( child: Directionality( textDirection: TextDirection.ltr, child: Text("This Is home")), ); } })), ), ); } } Summary This chapter was dedicated to permission handling and location access. Tasks accomplished here are as follows: Installed three packages: Location, Permission Handler, and Google Maps Flutter. Spend a short time updating the settings required to use these packages. Created a provider class that'll ask for the user's permission to access the location. The same class also has a method that will access location and call the HTTPS callable function. Created HTTPS function which will update the user's location on Firebase Firestore. Implemented provider class with the help of Future Builder in our app. Chapter Eleven: Google Maps Places API With Flutter Intro As a part of the user-screen flow, we already have access to the user location. In this 10th chapter, we'll use the user's location to fetch the nearest twenty temples using google's . We'll fetch places with the package, then we'll write another HTTPS Callable with Firebase Functions to store those temples in Firestore. Since we're using an API key, we'll use the package to keep it secret. Find the source code to start this section from . Places API HTTP flutter_dotenv here Packages DotEnv So, first lets install package. flutter_dotenv flutter pub add flutter_dotenv Create a .env file at the root of your project. touch .env Add the .env file in .gitignore file. #DOT ENV *.env Initialize .env file in main() method of our main.dart file. import 'package:flutter_dotenv/flutter_dotenv.dart'; void main() async { .... // Initialize dot env await dotenv.load(fileName: ".env"); // Pass prefs as value in MyApp runApp(MyApp(prefs: prefs)); } We also need to add the .env file to the assets section of the file. pubspec.yaml #find assets section assets: # Splash Screens - assets/splash/om_splash.png - assets/splash/om_lotus_splash.png - assets/splash/om_lotus_splash_1152x1152.png # Onboard Screens - assets/onboard/FindTemples.png - assets/onboard/FindVenues.png # Auth Screens - assets/AuthScreen/WelcomeScreenImage_landscape_2.png // add this here # Dotenv flie - .env Google Maps Places API To use the google places API we'll need the places API key. For that please go to , set up a billing account, and create a new API key for Goog Places API. Then add that API key in the .env file. google cloud console .env #Without quotes GMAP_PLACES_API_KEY = Your_API_KEY HTTP Install the package. HTTP flutter pub add http There's no need for extra setup with the HTTP package. Folder Structures Like Home and Auth Folders, the temples directory will have all the files associated with temples. So, let's create various files and folders we'll use to fetch & display temples. # Make folders mkdir lib/screens/temples lib/screens/temples/providers lib/screens/temples/screens lib/screens/temples/widgets lib/screens/temples/models lib/screens/temples/utils # Make files touch lib/screens/temples/providers/temples_provider.dart lib/screens/temples/screens/temples_screen.dart lib/screens/temples/widgets/temples_item_widget.dart lib/screens/temples/models/temple.dart lib/screens/temples/utils/temple_utils.dart Like the chapters before it, we'll keep our all apps logic inside the provider file. On top of that, we'll also need a utils file to store a few functions that we'll use on the provider class. So, first, let's create two simple functions of temple_utils.dart. Utilities temple_utils.dart import 'package:flutter_dotenv/flutter_dotenv.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; class TemplesUtils { // Base url for google maps nearbysearch // #1 static const String _baseUrlNearBySearch = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?"; // get api key // #2 final String _placesApi = dotenv.env['GMAP_PLACES_API_KEY'] as String; // Create a method that'll parse complete url and return it using http package // #3 Uri searchUrl(LatLng userLocation) { // Create variables that'll pass maps API parmas as string // # 4 //===================// final api = "&key=$_placesApi"; final location = "location=${userLocation.latitude},${userLocation.longitude}"; const type = "&type=hindu_temple"; // Closest first // #5 const rankBy = "&rankby=distance"; //=====================// // Parse URL to get a new uri object // #6 final url = Uri.parse(_baseUrlNearBySearch + location + rankBy + type + api); return URL; } } Google Maps takes several parameters, among them, we'll use (required parameter), , and . NearbySearch location rankby type Import API key from .env file. Search Url is a function that'll take user location then, combine the base URL acceptable parameter by search API and return parsed URI. The is a must, on every URL to get a result back from API. API key The rankby="distance" sorts the search results based on distance. When we're using the parameter is required. rankby type The final URL is to be used by the HTTP package to search for temples. Note: If you're from a place that doesn't have temples(some or not at all) you probably won't see any results. So, use something else for the establishment type. Another method will be a simple mapper, its sole purpose is to map the incoming list into a list of TempleModels(which we'll create next) and return it as such. This will make our code later much cleaner. List mapper(List results) { final newList = results .map( (temple) => TempleModel( name: temple['name'], address: temple['address'], latLng: LatLng( temple['latLng']['lat'], temple['latLng']['lon'], ), imageUrl: temple['imageRef'], placesId: temple['place_id'], ), ) .toList(); return newList; } Temple Model The Temple model class will define a framework for the information to be stored about the temple. On the temple.dart file inside models let's create a temple model. import 'package:google_maps_flutter/google_maps_flutter.dart'; class TempleModel { // name of temple final String name; // the address final String address; // geo location final LatLng latLng; // ImageUrls final String imageUrl; // id given to each item by places api final String placesId; const TempleModel( {required this.name, required this.address, required this.latLng, required this.imageUrl, required this.placesId}); } Each temple that'll be saved in Firestore will have a name, address, geographical coordinates, imageUrl, and an ID given by google's place API. Google Place API with HTTP and Provider Now, it's time to write a provider class that'll take care of fetching the nearby temples list. This will be a long file with many things to explain. So, we'll go piece by piece codes from top to bottom. Import Modules and Create a provider class. import 'dart:convert'; import 'dart:math'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:cloud_functions/cloud_functions.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_storage/firebase_storage.dart' as firbase_storage; import 'package:flutter/foundation.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:http/http.dart' as http; //custom modules import 'package:temple/screens/temples/models/temple.dart'; import 'package:temple/screens/temples/utils/temple_utils.dart'; class TempleProvider with ChangeNotifier {} Inside the class, instantiate Firebase Products we will be using. // Instantiate FIbrebase products final FirebaseAuth auth = FirebaseAuth.instance; final FirebaseFunctions functions = FirebaseFunctions.instance; final FirebaseFirestore firestore = FirebaseFirestore.instance; // Estabish sotrage instance for bucket of our choice // once e mulator runs you can find the bucket name at storage tab final firbase_storage.FirebaseStorage storage = firbase_storage.FirebaseStorage.instanceFor( bucket: 'astha-being-hindu-tutorial.appspot.com'); With we will not use a default bucket to store images whose URL will be fetched to save on Firestore. So, what's up with this logic? You see google places API doesn't provide images, it's provided by API. We'll not be using it. But instead, I have some random(4 in numbers) Hindu images that I downloaded from , which I'll store in storage and fetch a URL among images and assign it to the temple model. You don't have to do it and provide the hardcoded image URL for , but it's to practice reading storage. Firebase Storage details Unsplash random imageRef Other Fields and Getters // Instantiate Temple Utils final TemplesUtils templesUtils = TemplesUtils(); // Create the fake list of temples List ? _temples = []; // User location from db LatLng? _userLocation; // Getters List get temples => [..._temples as List]; LatLng get userLocation => _userLocation as LatLng; // List of Images static const List imagePaths = [ 'image_1.jpg', 'image_2.jpg', 'image_3.jpg', 'image_4.jpg', ]; The is a list of literally the name of images that I've uploaded in a folder named "TempleImages" inside our bucket we referenced earlier in Emulator's Storage. imagePaths Future To Return Places API Result // Future method to get temples Future ?> getNearyByTemples(LatLng userLocation) async { // Get urls from the temple utils // #1 Uri url = templesUtils.searchUrl(userLocation); try { // Set up references for firebase products. // Callable getNearbyTemples // #2 HttpsCallable getNearbyTemples = functions.httpsCallable('getNearbyTemples'); // Collection reference for temples // # 3 CollectionReference templeDocRef = firestore.collection('temples'); // Get one doc from temples collection // #4 QuerySnapshot querySnapshot = await templeDocRef.limit(1).get(); // A reference to a folder in storage that has images. // #5 firbase_storage.Reference storageRef = storage.ref('TempleImages'); // We'll only get nearby temples if the temple's collection empty // #6 if (querySnapshot.docs.isEmpty) { print("Temple collection is empty"); // get the result from api search // #7 final res = await http.get(url); // decode to json result // #8 final decodedRes = await jsonDecode(res.body) as Map; // get result as list // #9 final results = await decodedRes['results'] as List; // Get random image url from available ones to put as images // Since we have 4 images we'll get 0-3 values from Random() // #10 final imgUrl = await storageRef .child(imagePaths[Random().nextInt(4)]) .getDownloadURL(); // Call the function // #11 final templesListCall = await getNearbyTemples.call( { 'templeList': [...results], 'imageRef': imgUrl, }); // map the templesList returned by https callable // we'll use utils mapper here // #12 final newTempleLists = templesUtils.mapper(templesListCall.data['temples']); // update the new temples list // #13 _temples = [...newTempleLists]; } else { // If the temples collection already has temples then we won't write // but just fetch temples collection // #14 print("Temple collection is not empty"); try { // get all temples documents final tempSnapShot = await templeDocRef.get(); // fetch the values as list. final tempList = tempSnapShot.docs[0]['temples'] as List; // map the results into a list final templesList = templesUtils.mapper(tempList); // update temples _temples = [...templesList]; } catch (e) { // incase of error temples list in empty // # 15 _temples = []; } } } catch (e) { // incase of error temples list in empty _temples = []; } // notify all the listeners notifyListeners(); // #16 return _temples; } Alright, now the main method that'll do everything we've worked on so far in this blog "getNearyByTemples" has been created. Let's go by numbers: User the temple utils we created earlier to get the URL ready to be used by the HTTP package. Reference to the HTTP callable , which we'll create after this provider session. It's responsible to save the list of all the temples we fetch during this search. getNearyByTemples Reference to temple collection. Temple reference be used to read a single document from the collection. References to a folder named "TempleImages" inside the bucket of storage. We're checking if the temple doc we fetched earlier is empty. The logic is that we don't want to call for Place Api, Firestores, and Functions every time user uses our app. We'll only fetch temples and save them on FireStore if the temple's collection is empty or doesn't exist. The HTTP get() method can be used to fetch the results. You can use software like postman or just a chrome browser to see the results of the get request. parses strings to JSON data types. Json Decode Function Places API responds to a list of temples as a list with as its key. We'll extract that as the List type. results Firebase Storage provides a means to s from the reference. We're randomly downloading a URL and assigning it to imageRef property needed in our HTTPS callable. download URL We call our HTTPS callable now, provide with temples list and image's Url. It'll save the list in Firesotre's Temples collection and return that list. The returned list will be now used to update our List of Temple Models using the mapper method of Temple Utils. This same list will be used by our app to display a beautiful list of temple cards on the temple screen. The else block only executes if the temple's collection already has a list of temples. In that case unlike in if block we do not fetch the temples list from API, we just read all the documents that are saved in the temple's collection. After this process is the same as above. In case of errors, the temple list will be empty. It is very important to return this new list. We will need this List as QurerySnapshot data fetched by FutureBuilder to display it on our app. Write Google Places API Search Results On FireStore With Firebase Functions Inside the file, we'll now create another HTTPS callable function "getNearbyTemples". This method will create an array with the list of temple objects and then save it to the collection. index.js temples exports.getNearbyTemples = functions.https.onCall(async (data, _) => { try { // Notify function's been called functions.logger.log("Add nearby temples function was called"); // Create array of temple objects. let temples = data.templeList.map((temple) => { return { 'place_id': temple['place_id'], 'address': temple['vicinity'] ? temple['vicinity'] : 'Not Available', 'name': temple['name'] ? temple['name'] : 'Not Available', 'latLng': { 'lat': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lat'] : 'Not Available', 'lon': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lng'] : 'Not Available', 'dateAdded': admin.firestore.Timestamp.now() }, 'imageRef': data.imageRef } } ); // save the temples array to temples collection as one document named temples await db.collection('temples').add({ temples: temples }); } catch (e) { // if error return errormsg return { 'Error Msg': e }; } // If everything's fine return the temple array. return temples; }); I have not allocated memory for this operation. It was very tricky and time-consuming. If you want you can experiment. A firebase document can store up to 1MB in size. So, our list at least for this app will never grow beyond 20. So, inside the temple's collection, we are not saving 20 documents but one document with 20 items as a field "temples", . db.collection('temples').add({ temples: temples }) Handle Updates With Firestore Triggers Let's say the user changed location or a new temple has been added to the google database. It should be reflected in the Firestore Temples collection. But we should handle updates carefully and only write new documents if there are any changes to the old ones. For our temples collection, we can just match the places_id, and only take action accordingly. Firebase provides trigger to handle this type of work. Now, let's write some code on the . onUpdate() index.js // When the temple List Updates exports.updateNearbyTemples = functions.runWith({ timeoutSeconds: 120, memory: "256MB" }).firestore.document('temples/{id}').onUpdate(async (change, context) => { // If theres both new and old value if (change.before.exists && change.after.exists) { // temples list both new and old let newTemplesList = change.after.data()['temples']; let oldTemplesList = change.before.data()['temples']; // Places Id list from both new and old list let oldTemplesIdList = oldTemplesList.map(temple => temple['place_id']); let newTemplesIdList = newTemplesList.map(temple => temple['place_id']); // Lets find out if theres new temples id by filtering with old one let filteredList = newTemplesIdList.filter(x => !oldTemplesIdList.includes(x)); // if the length are not same of fileted list has //length of 0 then nothing new is there so just return if (oldTemplesIdList.length != newTemplesIdList.length || filteredList.length == 0) { functions.logger.log("Nothing is changed so onUpdate returned"); return; } // If somethings changed then try { functions.logger.log("On Update was called "); // Make new list of temples let temples = newTemplesList.map((temple) => { return { 'place_id': temple['place_id'], 'address': temple['vicinity'] ? temple['vicinity'] : 'Not Available', 'name': temple['name'] ? temple['name'] : 'Not Available', 'latLng': { 'lat': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lat'] : 'Not Available', 'lon': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lng'] : 'Not Available', 'dateAdded': admin.firestore.Timestamp.now() } } } ); // use the current context id to update temples, no need to merge await db.collection('temples').doc(context.params.id).set({ 'palces_id_list': newTemplesIdList, temples: temples }); } catch (e) { throw e; } return { 'status': 200 }; } // return nothing return null; }); gives values already in the Firestore and gives value newly gotten from the API. With this update, the function will not run every time the user loads the temples screen. It will save us lots of money on production mode. Changes.before.data changes.after.data Making Provider Class available for Widgets Now, our classes are ready for work. So, let's make them available by updating the MultiProviders list in the file. app.dart MultiProvider( providers: [ ... ChangeNotifierProvider(create: (context) => TempleProvider()), ... ], ... Now, the GetNearbyTemples method is accessible for all the descendants of MultiProviders. So, where exactly are we going to call this method? Well in the next chapter, We'll make our home page a little bit better looking. On that homepage, there will be a link to Temple List Screen. The method will be executed when the link is clicked. For now, let's end this chapter before we derail from the main theme for this section. Final Code temple_provider.dart import 'dart:convert'; import 'dart:math'; import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:cloud_functions/cloud_functions.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:firebase_storage/firebase_storage.dart' as firbase_storage; import 'package:flutter/foundation.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:http/http.dart' as http; //custom modules import 'package:temple/screens/temples/models/temple.dart'; import 'package:temple/screens/temples/utils/temple_utils.dart'; class TempleProvider with ChangeNotifier { // Instantiate FIbrebase products final FirebaseAuth auth = FirebaseAuth.instance; final FirebaseFunctions functions = FirebaseFunctions.instance; final FirebaseFirestore firestore = FirebaseFirestore.instance; // Estabish sotrage instance for bucket of our choice // once e mulator runs you can find the bucket name at storage tab final firbase_storage.FirebaseStorage storage = firbase_storage.FirebaseStorage.instanceFor( bucket: 'astha-being-hindu-tutorial.appspot.com'); // Instantiate Temple Utils final TemplesUtils templesUtils = TemplesUtils(); // Create the fake list of temples List ? _temples = []; // User location from db LatLng? _userLocation; // Getters List get temples => [..._temples as List]; LatLng get userLocation => _userLocation as LatLng; // List of Images static const List imagePaths = [ 'image_1.jpg', 'image_2.jpg', 'image_3.jpg', 'image_4.jpg', ]; // Future method to get temples Future getNearyByTemples(LatLng userLocation) async { // Get urls from the temple utils Uri url = templesUtils.searchUrl(userLocation); try { // Set up references for firebase products. // Callable getNearbyTemples HttpsCallable getNearbyTemples = functions.httpsCallable('getNearbyTemples'); // COllection reference for temples CollectionReference templeDocRef = firestore.collection('temples'); // Get one doc from temples collection QuerySnapshot querySnapshot = await templeDocRef.limit(1).get(); // A reference to a folder in storage that has images. firbase_storage.Reference storageRef = storage.ref('TempleImages'); // We'll only get nearby temples if the temples collection empty if (querySnapshot.docs.isEmpty) { print("Temple collection is empty"); // get the result from api search final res = await http.get(url); // decode the json result final decodedRes = await jsonDecode(res.body) as Map; // get result as list final results = await decodedRes['results'] as List; // Get random image url from available ones to put as images // Since we have 4 images we'll get 0-3 values from Random() final imgUrl = await storageRef .child(imagePaths[Random().nextInt(4)]) .getDownloadURL(); // Call the function final templesListCall = await getNearbyTemples.call( { 'templeList': [...results], 'imageRef': imgUrl, }); // map the templesList restured by https callable final newTempleLists = templesListCall.data['temples'] .map( (temple) => TempleModel( name: temple['name'], address: temple['address'], latLng: LatLng( temple['latLng']['lat'], temple['latLng']['lon'], ), imageUrl: temple['imageRef'], placesId: temple['place_id'], ), ) .toList(); // update the new temples list _temples = [...newTempleLists]; } else { // If the temples collection already has temples then we won't write // but just fetch temples collection print("Temple collection is not empty"); try { // get all temples documents final tempSnapShot = await templeDocRef.get(); // fetch the values as list. final tempList = tempSnapShot.docs[0]['temples'] as List; // map the results into a list final templesList = tempList .map( (temple) => TempleModel( name: temple['name'], address: temple['address'], latLng: LatLng( temple['latLng']['lat'], temple['latLng']['lon'], ), imageUrl: temple['imageRef'], placesId: temple['place_id'], ), ) .toList(); // update temples _temples = [...templesList]; } catch (e) { // incase of error temples list in empty _temples = []; } } } catch (e) { // incase of error temples list in empty _temples = []; } // notify all the listeners notifyListeners(); } } index.js // Import modiules const functions = require("firebase-functions"), admin = require('firebase-admin'); // always initialize admin admin.initializeApp(); // create a const to represent firestore const db = admin.firestore(); // Create a new background trigger function exports.addTimeStampToUser = functions.runWith({ timeoutSeconds: 240, // Give timeout memory: "512MB" // memory allotment }).firestore.document('users/{userId}').onCreate(async (_, context) => { // Get current timestamp from server let curTimeStamp = admin.firestore.Timestamp.now(); // Print current timestamp on server functions.logger.log(`curTimeStamp ${curTimeStamp.seconds}`); try { // add the new value to new users document i await db.collection('users').doc(context.params.userId).set({ 'registeredAt': curTimeStamp, 'favTempleList': [], 'favShopsList': [], 'favEvents': [] }, { merge: true }); // if its done print in logger functions.logger.log(`The current timestamp added to users collection: ${curTimeStamp.seconds}`); // always return something to end the function execution return { 'status': 200 }; } catch (e) { // Print error incase of errors functions.logger.log(`Something went wrong could not add timestamp to users collectoin ${curTimeStamp.seconds}`); // return status 400 for error return { 'status': 400 }; } }); // Create a function named addUserLocation exports.addUserLocation = functions.runWith({ timeoutSeconds: 60, memory: "256MB" }).https.onCall(async (data, context) => { try { // Fetch correct user document with user id. let snapshot = await db.collection('users').doc((context.auth.uid)).get(); // Check if field value for location is null // functions.logger.log(snapshot['_fieldsProto']['userLocation']["valueType"] === "nullValue"); let locationValueType = snapshot['_fieldsProto']['userLocation']["valueType"]; if (locationValueType == 'nullValue') { await db.collection('users').doc((context.auth.uid)).set({ 'userLocation': data.userLocation }, { merge: true }); functions.logger.log(`User location added ${data.userLocation}`); return data.userLocation; } else { functions.logger.log(`User location not changed`); } } catch (e) { functions.logger.log(e); throw new functions.https.HttpsError('internal', e); } return data.userLocation; }); exports.getNearbyTemples = functions.https.onCall(async (data, _) => { try { // Notify function's been called functions.logger.log("Add nearby temples function was called"); // Create array of temple objects. let temples = data.templeList.map((temple) => { return { 'place_id': temple['place_id'], 'address': temple['vicinity'] ? temple['vicinity'] : 'Not Available', 'name': temple['name'] ? temple['name'] : 'Not Available', 'latLng': { 'lat': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lat'] : 'Not Available', 'lon': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lng'] : 'Not Available', 'dateAdded': admin.firestore.Timestamp.now() }, 'imageRef': data.imageRef } } ); // save the temples array to temples collection as one document named temples await db.collection('temples').add({ temples: temples }); } catch (e) { // if error return errormsg return { 'Error Msg': e }; } // If everything's fine return the temple array. return temples; }); // When the temple List Updates exports.updateNearbyTemples = functions.runWith({ timeoutSeconds: 120, memory: "256MB" }).firestore.document('temples/{id}').onUpdate(async (change, context) => { // If theres both new and old value if (change.before.exists && change.after.exists) { // temples list both new and old let newTemplesList = change.after.data()['temples']; let oldTemplesList = change.before.data()['temples']; // Places Id list from both new and old list let oldTemplesIdList = oldTemplesList.map(temple => temple['place_id']); let newTemplesIdList = newTemplesList.map(temple => temple['place_id']); // Lets find out if theres new temples id by filtering with old one let filteredList = newTemplesIdList.filter(x => !oldTemplesIdList.includes(x)); // if the length are not same of fileted list has //length of 0 then nothing new is there so just return if (oldTemplesIdList.length != newTemplesIdList.length || filteredList.length == 0) { functions.logger.log("Nothing is changed so onUpdate returned"); return; } // If somethings changed then try { functions.logger.log("On Update was called "); // Make new list of temples let temples = newTemplesList.map((temple) => { return { 'place_id': temple['place_id'], 'address': temple['vicinity'] ? temple['vicinity'] : 'Not Available', 'name': temple['name'] ? temple['name'] : 'Not Available', 'latLng': { 'lat': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lat'] : 'Not Available', 'lon': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lng'] : 'Not Available', 'dateAdded': admin.firestore.Timestamp.now() } } } ); // use the current context id to update temples, no need to merge await db.collection('temples').doc(context.params.id).set({ 'palces_id_list': newTemplesIdList, temples: temples }); } catch (e) { throw e; } return { 'status': 200 }; } // return nothing return null; }); Summary Before we leave let's summarize what we did so far. We created google maps places API. By installing the Flutter_DotEnv package, we secured the API from being public. HTTP package was also added which played a vital role in fetching temple lists from API. We created a utility file though with just one util. Later on, if you want, you can write a distance calculator method from user to temple to represent in Google Maps. We then wrote a method in our provider class, that fetched a search list, and passes it to firebase cloud functions. The firebase function saves the temple lists to Firestore if the collection is empty. We then wrote an update trigger, that'll only run when the value is changed. Chapter Twelve: Flutter Page Design About In this chapter, we will create new card buttons, that'll be displayed in the grid view. Each button UI will take the user to a sub-page like Events, Temples, etc. There will also be another widget, let's call it a quote card, at the top of the home screen. It'll have beautiful quotes from Hinduism displayed there. We'll also make a Temples Screen, it will display a list of temples we fetched in the last section. Each temple will be a Temple Item Widget which will be a card with information on a temple from the list. You can find the source code for the progress so far on this link . here Structures Let's go to our favorite VS Code with the project opened and make a file where we'll create a dynamic Card that will be used as a button on our home page. We won't be using both the card buttons and quote card outside of the home screen, they will be a local widget and the same goes for the temples card widget. Hence, we need new files and folders for both home and temple screens. # make folder first mkdir lib/screens/home/widgets #make file for home touch lib/screens/home/widgets/card_button_widget.dart lib/screens/home/widgets/quote_card_widget.dart # make files for temples touch lib/screens/temples/widgets/temple_item_widget.dart lib/screens/temples/screens/temples_screen.dart Home Screen By the end, our home screen will look like this. Card Button card_button_widget.dart import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; class CardButton extends StatelessWidget { // Define Fields // Icon to be used // #1 final IconData icon; // Tittle of Button final String title; // width of the card // #2 final double width; // Route to go to // #3 final String routeName; const CardButton(this.icon, this.title, this.width, this.routeName, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Card( elevation: 4, // Make the border round // #4 shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), ), child: // We'll make the whole card tappable with inkwell // #5 InkWell( // ON tap go to the respective widget onTap: () => GoRouter.of(context).goNamed(routeName), child: SizedBox( width: width, child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox( height: 40, ), Expanded( flex: 2, child: // Icon border should be round and partially transparent // #6 CircleAvatar( backgroundColor: Theme.of(context) .colorScheme .background .withOpacity(0.5), radius: 41, child: // Icon Icon( icon, size: 35, // Use secondary color color: Theme.of(context).colorScheme.secondary, ), ), ), Expanded( child: Padding( padding: const EdgeInsets.all(8.0), child: Text( title, style: Theme.of(context).textTheme.bodyText1, ), ), ) ]), ), ), ); } } Let's explain a few things, shall we? Since, the icon itself will vary, we'll take the icon as a field. The width value is for the SizedBox that'll act to contain the card and prevent overflow. Not only that also allows the use of the widget. SizedBox Expanded At the end of the day these cards are links to another page, so we'll need routes as well. We'll make the edges of the card round with . RoundedRectangleBorder When is tapped, we'll go to the respective sub-page. Inkwell gives off a ripple effect when tapped which is good for the user experience. InkWell Icon will be inside the . Circular Avatar Quote Card Now, let's make a quote card. Typically quotes will be refreshed daily by admin, but we'll use a hardcoded one. Let's head over to the file. quote_card_widget.dart import 'package:flutter/material.dart'; class DailyQuotes extends StatelessWidget { // width for our card // #1 final double width; const DailyQuotes(this.width, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Container( constraints: // Adjust the height by content // #2 const BoxConstraints(maxHeight: 180, minHeight: 160), width: width, alignment: Alignment.center, padding: const EdgeInsets.all(2), child: Card( elevation: 4, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(10.0)), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ // #3 Expanded( flex: 2, child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( // Adjust padding // #2 padding: const EdgeInsets.only( top: 10, left: 4, bottom: 10, right: 4), child: Text( "Bhagavad Gita", style: Theme.of(context).textTheme.headline2, ), ), Padding( padding: const EdgeInsets.only(top: 6, left: 4, right: 4), child: Text( "Calmness, gentleness, silence, self-restraint, and purity: these are the disciplines of the mind.", style: Theme.of(context).textTheme.bodyText2, overflow: TextOverflow.clip, softWrap: true, ), ), ], ), ), Expanded( child: ClipRRect( borderRadius: const BorderRadius.only( topRight: Radius.circular(10.0), bottomRight: Radius.circular(10.0)), child: Image.asset( "assets/images/image_3.jpg", fit: BoxFit.cover, ), ), ) ], )), ); } } Let's go over minor details: The card can cause an overflow error so it's important to have fixed width. Content especially the quote if dynamic can cause overflow error, so adjustable height can be provided with constraints. The card has been divided into Text and Image section with Row, while text occupies 2/3 space available with Expanded and flex. Reminder: You can use the image of your choice, but make sure to add the path on the pubspec file. Putting All the Pieces Together Now, that our widgets are ready let's add them to the home screen. Currently, our home screen's code is: import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; // Custom import 'package:temple/globals/providers/permissions/app_permission_provider.dart'; import 'package:temple/globals/widgets/app_bar/app_bar.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; import 'package:temple/globals/widgets/bottom_nav_bar/bottom_nav_bar.dart'; import 'package:temple/globals/widgets/user_drawer/user_drawer.dart'; class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State createState() => _HomeState(); } class _HomeState extends State { // create a global key for scafoldstate final GlobalKey _scaffoldKey = GlobalKey(); @override Widget build(BuildContext context) { return Scaffold( // Provide key to scaffold key: _scaffoldKey, // Changed to custom appbar appBar: CustomAppBar( title: APP_PAGE.home.routePageTitle, // pass the scaffold key to custom app bar // #3 scaffoldKey: _scaffoldKey, ), // Pass our drawer to drawer property // if you want to slide right to left use endDrawer: const UserDrawer(), bottomNavigationBar: const CustomBottomNavBar( navItemIndex: 0, ), primary: true, body: SafeArea( child: FutureBuilder( // Call getLocation function as future // its very very important to set listen to false future: Provider.of (context, listen: false) .getLocation(), // don't need context in builder for now builder: ((_, snapshot) { // if snapshot connectinState is none or waiting if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.none) { return const Center(child: CircularProgressIndicator()); } else { // if snapshot connectinState is active if (snapshot.connectionState == ConnectionState.active) { return const Center( child: Text("Loading..."), ); } // if snapshot connection state is done //==========================// // Replace this section return const Center( child: Directionality( textDirection: TextDirection.ltr, child: Text("This Is home")), ); //==========================// } })), ), ); } } First, we'll need to caculate the available width for the widgets. class can be used to do so. So, add the following code right after the BuildContext method and before we return Scaffold. MediaQurery // Device width final deviceWidth = MediaQuery.of(context).size.width; // Available width final availableWidth = deviceWidth - MediaQuery.of(context).padding.right - MediaQuery.of(context).padding.left; Can you calculate the available height of the device? Now, to add our widgets to the home screen, we'll replace the section that handles the " " with the code below. Snapshot.done return SafeArea( // Whole view will be scrollable // #1 child: SingleChildScrollView( // Column child: Column(children: [ // FIrst child would be quote card // #2 DailyQuotes(availableWidth), // Second child will be GriDview.count with padding of 4 // #2 Padding( padding: const EdgeInsets.all(4), child: GridView.count( // scrollable physics: const ScrollPhysics(), shrinkWrap: true, // two grids crossAxisCount: 2, // Space between two Horizontal axis mainAxisSpacing: 10, // Space between two vertical axis crossAxisSpacing: 10, children: [ // GridView Will have children // #3 CardButton( Icons.temple_hindu_sharp, "Temples Near You", availableWidth, APP_PAGE.temples.routeName, // Route for temples ), CardButton( Icons.event, "Coming Events", availableWidth, APP_PAGE.home.routeName, // Route for homescreen we are not making these for MVP ), CardButton( Icons.location_pin, "Find Venues", availableWidth, APP_PAGE.home.routeName, ), CardButton( Icons.music_note, "Morning Prayers", availableWidth, APP_PAGE.home.routeName, ), CardButton( Icons.attach_money_sharp, "Donate", availableWidth, APP_PAGE.home.routeName, ), ], ), ) ])), ); Our home page will be SingleChildScrollView with a column as its children. The column will have two children, the first one is the quote card and the second will be . GridView.Count The GridView does have all the links that will be present in the production-ready app. But for now, we'll only use the first card that takes us to the temple screen. Create New Route You'll get an error mentioning no temples route name, that's because we haven't yet created a temples route. To do so let's head over to file in the folder. router_utils.dart "libs/settings/router/utils" // add temples in the list of enum options enum APP_PAGE { onboard, auth, home, search, shop, favorite, temples } extension AppPageExtension on APP_PAGE { // add temple path for routes switch (this) { ... // Don't put "/" infront of path case APP_PAGE.temples: return "home/temples"; ... } } // for named routes String get routeName { switch (this) { ... case APP_PAGE.temples: return "TEMPLES"; ... } } // for page titles String get routePageTitle { switch (this) { ... case APP_PAGE.temples: return "Temples Near You"; ... } } } Temple will be a sub-page of the home page, hence the route path will be " " with no "/" at the front. home/temples Temples Screen Now we need to add the respective routes to AppRouter, but we'll do that later, first, we'll create the temple screen with the list of temple widgets. Temple Item Widget We have already made the file, let's create a card widget that'll display information on the temple we fetch from google's place API. temple_item_widget.dart temple_item_widget.dart import 'package:flutter/material.dart'; class TempleItemWidget extends StatefulWidget { // Fields that'll shape the Widget final String title; final String imageUrl; final String address; final double width; final String itemId; const TempleItemWidget( {required this.title, required this.imageUrl, required this.address, required this.width, required this.itemId, // required this.establishedDate, Key? key}) : super(key: key); @override State createState() => _TempleItemWidgetState(); } class _TempleItemWidgetState extends State { @override Widget build(BuildContext context) { return SizedBox( // Card will have height of 260 height: 260, width: widget.width, child: Card( key: ValueKey (widget.itemId), elevation: 4, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), margin: const EdgeInsets.all(10), child: Column( // Column will have two children stack and a row // #1 children: [ // Stack will have two children image and title text Stack( children: [ ClipRRect( borderRadius: const BorderRadius.only( topLeft: Radius.circular(10), topRight: Radius.circular(10), ), child: Image.network( widget.imageUrl, fit: BoxFit.cover, width: widget.width, height: 190, ), ), Positioned( bottom: 1, child: Container( color: Colors.black54, width: widget.width, height: 30, child: Text( widget.title, style: Theme.of(context) .textTheme .headline3! .copyWith(color: Colors.white), // softWrap: true, overflow: TextOverflow.fade, textAlign: TextAlign.center, ), ), ), ], ), Row( // Rows will have two icons as children // #2 crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Expanded( child: IconButton( onPressed: () { print("Donate Button Pressed"); }, icon: Icon( Icons.attach_money, color: Colors.amber, ), ), ), Expanded( child: IconButton( onPressed: () { print("Toggle Fav Button Pressed"); }, icon: const Icon( Icons.favorite, color: Colors.red, )), ) ]), ], ), ), ); } } There are two things different from the custom widgets we have already made previously from this card. This widget will have a column with two children, and a Row. Stack Stack will use the image as its background. The title will be at the bottom of the stack. The text widget is inside the container with a transparent black background. It's done to make it more visible. positioned The Row will be consisting of two icon buttons, Favorite and Donation. In the next part, we will add toggle Favorite functionality but Donation will remain hardcoded for this tutorial. Can you suggest to me a better icon for donation? Temples List Screen By the end, our temple screen page will look like this. We spent quite some time in the previous chapter fetching nearby temples from google's Place API. Now, it's time to see our results in fruition. The method will be best suited for this scenario. As for the future property of the class, we'll provide the method we created in TempleStateProvider class. futureBuilder getNearbyPlaes() It's a long code, so let's go over it a small chunk at a time. Imports and Class import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:provider/provider.dart'; import 'package:temple/globals/providers/permissions/app_permission_provider.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; import 'package:temple/globals/widgets/app_bar/app_bar.dart'; import 'package:temple/globals/widgets/user_drawer/user_drawer.dart'; import 'package:temple/screens/temples/providers/temple_provider.dart'; import 'package:temple/screens/temples/widgets/temple_item_widget.dart'; class TempleListScreen extends StatefulWidget { const TempleListScreen({Key? key}) : super(key: key); @override State createState() => _TempleListScreenState(); } class _TempleListScreenState extends State { final GlobalKey _scaffoldKey = GlobalKey(); // location is required as input for getNearbyTemples method LatLng? _userLocation; @override void didChangeDependencies() { // after the build load get the user location from AppPermissionProvider _userLocation = Provider.of (context, listen: false) .locationCenter; super.didChangeDependencies(); } This part is where we import modules and declare a Class. The important part to notice here is (), where we are getting the user location from AppPermissionProvider class. Why? because we'll need the user's location to get temples near to the user. StatefulWidget didChangeDependencies Device Width and Back Arrow ... @override Widget build(BuildContext context) { // Device width final deviceWidth = MediaQuery.of(context).size.width; // Subtract paddings to calculate available dimensions final availableWidth = deviceWidth - MediaQuery.of(context).padding.right - MediaQuery.of(context).padding.left; return Scaffold( key: _scaffoldKey, drawer: const UserDrawer(), appBar: CustomAppBar( scaffoldKey: _scaffoldKey, title: APP_PAGE.temples.routePageTitle, // Its a subpage so we'll use backarrow and now bottom nav bar isSubPage: true, ), primary: true, body: SafeArea( child: .... Like before we'll now return a scaffold with an app bar, available width, and so on. Two things are different from any other screens here. First is that this is a sub-page, so our dynamic app bar will be consisting of a back-arrow. The second is that since this page is a sub-page there won't be Bottom Nav Bar as well. FutureBuilder With API's Results Continuing from before: ... FutureBuilder( // pass the getNearyByTemples as future // #1 future: Provider.of (context, listen: false) .getNearyByTemples(_userLocation as LatLng), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.none) { return const Center(child: CircularProgressIndicator()); } else { if (snapshot.connectionState == ConnectionState.active) { return const Center(child: Text("Loading...")); } else { // After the snapshot connectionState is done // if theres an error go back home // # 2 if (snapshot.hasError) { Navigator.of(context).pop(); } // check if snapshot has data return on temple widget list if (snapshot.hasData) { // # 3 final templeList = snapshot.data as List; return SizedBox( width: availableWidth, child: Column( children: [ Expanded( child: ListView.builder( itemBuilder: (context, i) => TempleItemWidget( address: templeList[i].address, imageUrl: templeList[i].imageUrl, title: templeList[i].name, width: availableWidth, itemId: templeList[i].placesId, ), itemCount: templeList.length, )) ], ), ); } else { // check if snapshot is empty return text widget // # 3 return const Center( child: Text("There are no temples around you.")); } } } }, ) FutureBuilder to the rescue. This FutureBuilder is using the method from TemplesProvider class we created in the previous session. getNearyByTemples() Here, we're checking if the QuerySnapshot(a result from an async operation) encountered an error. If so, we'll pop this route and go back to the homepage. If you want you can use an alert box or SnackBar to let users know. A little something to practice for yourself. If QuerySnapshot has data, we'll map it into a ListBuilder consisting of TempleItem Widgets. If QuerySnapshot is empty then just return a text letting the user know of the situation. Here's the whole file, if you're confused with my chunking skill. import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:provider/provider.dart'; import 'package:temple/globals/providers/permissions/app_permission_provider.dart'; import 'package:temple/globals/settings/router/utils/router_utils.dart'; import 'package:temple/globals/widgets/app_bar/app_bar.dart'; import 'package:temple/globals/widgets/user_drawer/user_drawer.dart'; import 'package:temple/screens/temples/providers/temple_provider.dart'; import 'package:temple/screens/temples/widgets/temple_item_widget.dart'; class TempleListScreen extends StatefulWidget { const TempleListScreen({Key? key}) : super(key: key); @override State createState() => _TempleListScreenState(); } class _TempleListScreenState extends State { final GlobalKey _scaffoldKey = GlobalKey(); // location is required as input for getNearbyTemples method LatLng? _userLocation; @override void didChangeDependencies() { // after the build load get the user location from AppPermissionProvider _userLocation = Provider.of (context, listen: false) .locationCenter; super.didChangeDependencies(); } @override Widget build(BuildContext context) { // Device width final deviceWidth = MediaQuery.of(context).size.width; // Subtract paddings to calculate available dimensions final availableWidth = deviceWidth - MediaQuery.of(context).padding.right - MediaQuery.of(context).padding.left; return Scaffold( key: _scaffoldKey, drawer: const UserDrawer(), appBar: CustomAppBar( scaffoldKey: _scaffoldKey, title: APP_PAGE.temples.routePageTitle, // Its a subpage so we'll use backarrow and now bottom nav bar isSubPage: true, ), primary: true, body: SafeArea( child: FutureBuilder( // pass the getNearyByTemples as future future: Provider.of (context, listen: false) .getNearyByTemples(_userLocation as LatLng), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.none) { return const Center(child: CircularProgressIndicator()); } else { if (snapshot.connectionState == ConnectionState.active) { return const Center(child: Text("Loading...")); } else { // After the snapshot connectionState is done // if theres an error go back home if (snapshot.hasError) { Navigator.of(context).pop(); } // check if snapshot has data return on temple widget list if (snapshot.hasData) { final templeList = snapshot.data as List; return SizedBox( width: availableWidth, child: Column( children: [ Expanded( child: ListView.builder( itemBuilder: (context, i) => TempleItemWidget( address: templeList[i].address, imageUrl: templeList[i].imageUrl, title: templeList[i].name, width: availableWidth, itemId: templeList[i].placesId, ), itemCount: templeList.length, )) ], ), ); } else { // check if snapshot is empty return text widget return const Center( child: Text("There are no temples around you.")); } } } }, ), ), ); } } Add Temple's Screen to AppRouter All that's left now is to add Temples Screen to the app's router's list. Let's do it quickly on . app_router.dart ... routes: [ // Add Home page route GoRoute( path: APP_PAGE.home.routePath, name: APP_PAGE.home.routeName, builder: (context, state) => const Home(), routes: [ GoRoute( path: APP_PAGE.temples.routePath, name: APP_PAGE.temples.routeName, builder: (context, state) => const TempleListScreen(), ) ]), ... The temple screen is a sub-page, so add it as a sub-route of the homepage. Error: Related to Storage Ref If you encountered an error related to storage ref, that's because in our TemplesProvider class we're referencing a folder named " " which has images we are reading. Create that folder in your storage, then upload the images. They should have the same name as in our list in the same class. If you cannot make it work somehow, then remove all the codes related to Firebase Storage and just provide a hardcoded URL as an image reference. TempleImages imagePaths Summary Let's summarize what we did in this section. We added new files and folders in a structured manner. We created a Dynamic Card Button and Daily Quotes Display widget, that's making our homepage beautiful. We added the first subpage of our app, the temples list screen. Temples Screen has a list of Card Widgets to display information on temples. Temples Screen has made good use FutureBuilder. Chapter Thirteen: RealTime Changes With Flutter and Firebase Intro We'll now toggle the favorite icon for temples. We'll use Firestore to store all the favorites list for each user's document in the " " collection. The Firebase Function will help us fetch the immediate list and update it. While Stream will provide the changes in real-time for users to see. You can find the source code so far from . users here Firebase Cloud Functions To Update Firestore In RealTime Now, we'll create a cloud function in our file. This function will take an "id" as input. This id is provided by Google Maps Places API. index.js place_id It'll search and fetch the current user's document. We've already created an array while registering with the onCreate trigger. favTempleList The function then will look through the list and toggle the value. // Add temple to my fav list: exports.addToFavList = functions.runWith({ timeoutSeconds: 120, memory: "128MB" }).https.onCall(async (data, context) => { const templeId = data.templeId; try { // Get user doc let userDocRef = await db.collection('users').doc(context.auth.uid).get(); // extract favTempleLis from the doc // #1 let favTempleList = userDocRef._fieldsProto.favTempleList; // if fav list is empty // #2 //============================// if (favTempleList.arrayValue.values.length === 0) { // Put the id in the list const templeList = [templeId]; functions.logger.log("Fav list is empty"); // Update the favTemple list await db.collection('users').doc(context.auth.uid).set({ favTempleList: templeList }, { merge: true }); //============#2 ends here=====================// } else { functions.logger.log("Fav Temple List is not empty"); // Make list of available ids // firebase providers arrays values as such fileName.arrayValue.values array // consisting dictionary with stringValue as key and its value is the item stored // #3 functions.logger.log(favTempleList.arrayValue.values[0]); let tempArrayValList = favTempleList.arrayValue.values.map(item => item.stringValue); // if not empty Check if the temple id already exists // #4 let hasId = tempArrayValList.includes(templeId); // if so remove the id if no just add the list // #5 //============================// if (hasId === true) { // Usr filter to remove value if exists let newTemplesList = tempArrayValList.filter(id => id !== templeId); await db.collection('users').doc(context.auth.uid).set({ favTempleList: newTemplesList }, { merge: true }); //==============#5 ends here===========// } // If the id doesnot already exists // #6 //============================// else { // first create a fresh copy let idList = [...tempArrayValList]; // add the new id to the fresh list idList.push(templeId); // update the fresh list to the firesotre await db.collection('users').doc(context.auth.uid).set({ favTempleList: idList }, { merge: true }); //==============#6 ends here===========// } } } catch (e) { functions.logger.log(e); } // Return the Strig done. //#7 return "Done"; }); A couple of lines of codes here are on other functions and triggers we've already done. So, let's only go over a few important ones: We are extracting the firebase field named "favTempleList" from the user documentation. That field is an array. We're checking if that array is empty. If so, we can just add the new place_id we got from the function call to the array and then update the doc. One thing to notice here is that I am using the merge option for an empty array. That's because this set() method doesn't just set/update a field in a doc, it sets/updates the whole document itself. So, if the option is not provided it'll overwrite every field there, in our case username, email, location, and so on. {merge: true} Now, we enter the section where the temple list is not empty. Then first we need to extract the list of values(id's) that are already present there. Check if the new ID, we got from the method call, is already present in the list we got from Firestore. If the id is already there then we need to remove it. We'll do so by combining and methods. After filtering the current place_id, we'll update the Firestore user doc with the fresh list of ids. filter() includes() If the place_id is not there then we need to add it. We'll push the current place_id into the list. And then update the doc like before. Remember we should always terminate Firebase functions in the end. We don't need any data from this so we'll just terminate it by returning a string. Provider Now, we'll need to add a method in our Provider class that'll call the HTTPS callable function we just created. In our TempleProvider class let's add another method . addToFavList void addToFavList(String templeId) async { // Instantiate callable from index.js HttpsCallable addToFav = functions.httpsCallable('addToFavList'); try { // Run the callable with the passing the current temples ID await addToFav.call( { 'templeId': templeId, }); } catch (e) { rethrow; } } We're not updating or returning anything here. That's because we can get data from snapshots from a stream, as you'll see later. BTW, you could add this method to AuthStateProvider because it deals with user collection. Use Stream & StreamBuilder To Output Changes In RealTime We can simply use the for this. So, we'll connect with Firesotre with streams and update the screen with StreamBuilder. So, where exactly are we using this StreamBuilder? Good question, you see getting real-time updates, means reloading(re-reading) the same collections on every change. It is obviously memory expensive. But it can cost expensive as well since Firebase charges for several reads. So, we don't want to load the list of temples, again and again, to toggle a single favorite icon. So, instead, let's just wrap only our favorite icon with stream builder. streams On make these changes. temple_item_widget.dart Create a function that'll call the addToFavList method from the provider class. // function to call addToFavList from provider class // It'll take id and providerclass as input void toggleFavList(String placeId, TempleProvider templeProvider) { templeProvider.addToFavList(placeId); } Inside the build method of class before the return statement. // Fetch the user doc as a stream //#1 Stream qSnapShot = FirebaseFirestore.instance .collection('users') .doc(FirebaseAuth.instance.currentUser!.uid) .snapshots(); // Instantiate provider method to pass as argument for tooggle FavList //#2 TempleProvider templeProvider = Provider.of (context, listen: false); As mentioned before we'll get the Stream from Firestore, a document using the current user's ID. Instantiate provider method to pass as an argument for toggleFavList function. But make sure to turn off the listener. Replace FavIcon Section With StreamBuilder StreamBuilder( // Use latest update provided by stream // #1 stream: qSnapShot, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.none) { return const CircularProgressIndicator(); } else { // Get documentsnaphot which is given from the stream // #2 final docData = snapshot.data as DocumentSnapshot; // Fetch favTempleList array from user doc // # 3 final favList = docData['favTempleList'] as List; // Check if the curent widget id is among the favTempLlist // #4 final isFav = favList.contains(widget.itemId); return Expanded( child: IconButton( // Call toggleFavlist method on tap // #5 onPressed: () => toggleFavList( widget.itemId, templeProvider), icon: Icon( Icons.favorite, // Show color by value of isFav // #6 color: isFav ? Colors.red : Colors.grey, )), ); } }) Here, in the StreamBuilder Class we: Used the stream we got from Firestore 'users' collection as a stream. That way the latest change is reflected asap. When the ConnectionState is done, first we get the latest data from the snapshot, which will be the current user's doc. Get the latest updated favTempleList array as a List from the document. Check if the current ID exists in the favItemList, which is the field passed down from the temples screen. itemId On press of the heart icon button call the toggleFavList method of the class. Change the color of the heart icon based on the presence or absence of itemId on favTempleList. And with that latest real-time changes will be reflected in the app. Final Code The file looks like this after the changes. temple_item_widget.dart import 'package:cloud_firestore/cloud_firestore.dart'; import 'package:firebase_auth/firebase_auth.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:temple/screens/temples/providers/temple_provider.dart'; class TempleItemWidget extends StatefulWidget { // Fields that'll shape the Widget final String title; final String imageUrl; final String address; final double width; final String itemId; const TempleItemWidget( {required this.title, required this.imageUrl, required this.address, required this.width, required this.itemId, // required this.establishedDate, Key? key}) : super(key: key); @override State createState() => _TempleItemWidgetState(); } class _TempleItemWidgetState extends State { // function to call addToFavList from provider class // It'll take id and providerclass as input void toggleFavList(String placeId, TempleProvider templeProvider) { templeProvider.addToFavList(placeId); } @override Widget build(BuildContext context) { // Fetch the user doc as stream Stream qSnapShot = FirebaseFirestore.instance .collection('users') .doc(FirebaseAuth.instance.currentUser!.uid) .snapshots(); // Instantiate provider method to pass as argument for tooggle FavList TempleProvider templeProvider = Provider.of (context, listen: false); return SizedBox( // Card will have height of 260 height: 260, width: widget.width, child: Card( key: ValueKey (widget.itemId), elevation: 4, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10), ), margin: const EdgeInsets.all(10), child: Column( // Column will have two children stack and a row children: [ // Stack will have two children image and title text Stack( children: [ ClipRRect( borderRadius: const BorderRadius.only( topLeft: Radius.circular(10), topRight: Radius.circular(10), ), child: Image.network( widget.imageUrl, fit: BoxFit.cover, width: widget.width, height: 190, ), ), Positioned( bottom: 1, child: Container( color: Colors.black54, width: widget.width, height: 30, child: Text( widget.title, style: Theme.of(context) .textTheme .headline2! .copyWith(color: Colors.white), // softWrap: true, overflow: TextOverflow.fade, textAlign: TextAlign.center, ), ), ), ], ), Row( // Rows will have two icons as children crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Expanded( child: IconButton( onPressed: () { print("Donate Button Pressed"); }, icon: const Icon( Icons.attach_money, color: Colors.amber, ), ), ), StreamBuilder( // User the ealier stream stream: qSnapShot, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.none) { return const CircularProgressIndicator(); } else { // Get documentsnaphot which is given from the stream final docData = snapshot.data as DocumentSnapshot; // Fetch favTempleList array from user doc final favList = docData['favTempleList'] as List; // Check if the curent widget id is among the favTempLlist final isFav = favList.contains(widget.itemId); return Expanded( child: IconButton( // Call toggleFavlist method on tap onPressed: () => toggleFavList( widget.itemId, templeProvider), icon: Icon( Icons.favorite, // Show color by value of isFav color: isFav ? Colors.red : Colors.grey, )), ); } }) ]), ], ), ), ); } } Summary In this exciting short chapter we: Created a Firebase HTTP Callable function to update a document in Firestore. We also wrote a simple instruction in the provider class to handle the callable. Lastly using stream and stream builder we displayed real-time changes on our screen. Chapter Fourteen: Flutter App Development | Conclusion Intro This will be the last chapter of this blog. Let's go over the things we did in this very long blog. App Launch Icon was created. Implemented a Splash screen. Designed Global Theme for our app. Created dynamic widgets like App Bar, Bottom Navigation Bar, and Drawer. Set Up Firebase local as well as in the cloud. Design Authentication Screen with little animation. User Firebase Authentication for our app. Used Permission Handler and Location Packages to access user location. We also fetched nearby temples using Google Place API and user location. Created some custom buttons for our application. We then used Streams and StreamBuilder to toggle favorite temples in real-time. Where to Go From Here? You can do a few things to improve this app(in any order). Update the Favorite Screen such that it'll display a list of your favorite temples and shops(more on that on #2). You can find a hardcoded version of the shop page in this . Just like in the temple, create a Firestore collection and fetch data from there. Don't change the design, it's to give you an impression that you're working with a designer. repo Add a save/favorite icon, in the shop items, it should be automatically updated in the favorites screen just like the favorite temples list. We haven't much worked on firebase security rules. You can add these on your own for practice. Moreover, you can also add function triggers to validate and filter unwanted user behavior. During registration we are not verifying email. Add verification steps to the authentication. Make a subpage like a temple list, from any of the button cards. For instance, add a donation portal. You can even add a popular payment gateway like Stripe to practice. Just use your imagination. If you happen to improve the app just I hope you'll share it with everyone. Referrals This was a fantastic journey, but I didn't do it all by myself. There are several blogs, courses, and books that have helped me understand the flutter programming language. So, I would like to share some of my recommendations if you want to learn further. Dart , a free video tutorial on YouTube for absolute beginners. Dart Programming for Flutter: Beginners Tutorial You don't have to dwell more here because you'll learn dart as you make the flutter app. Flutter by Academind. If I have to recommend only one course for flutter then it'll be this one. This is paid course on Udemy that cost around 13 USD, but it's worth it. Flutter & Dart - The Complete Guide [2022 Edition] , another course by Academind, but its free and available on youtube. So, do check it out. Flutter & Dart crash course the blog which helped me to understand authentication flow, clean coding, and much more. Here's If you prefer to read books then try by raywenderlich Tutorial Team. A complete and insightful book for flutter enthusiasts. Flutter Apprentice Firebase , a very helpful tutorial on firebase functions on YouTube. Cloud Functions for Firebase If you understand Hindi, then check out this on YouTube by Mukesh Joshi. tutorial series from the Firebase team, although it's not very simple for beginners. Get to know Firebase for Flutter , a tutorial series to understand the fundamentals of Firebase Firestore. Get to know Cloud Firestore Others The world of development on any platform with any programming language is vast. Many of us recommend/learn a few packages which we feel are necessary sometimes to grow more other times to get a job. I would recommend you to learn another state-management package since the provider is not a perfect one. There are only two packages I recommend either or . There are other packages too which are good but I would learn animation and designs instead of learning state-management one after another. Riverpod Bloc Make simple games like those offline games in chrome and play store. Make a simple Mario game. This is all to learn animation in the Flutter. Dive deeper into the go router package. Learn more about mobile app . architectures If you're not a designer visit . You can find many designs under . Figma CC 4.0 license Try reading books like and implement the principle in your application and business. Lean Start-Up Summary Whatever you do, don't ever just watch/read tutorials and not practice. If you don't try by yourself you'll never find and understand minor complications and stupid errors that are edited out in tutorials. Write blogs like this to enhance your skills because teaching is one of the best ways to learn. Show Support Thank you for reading this blog. More than anything we hope that you'll be able to create at least a simple application after this flutter app development series. Please do like and share the blog. Give us some feedback on how can we improve the content. We are Khadka's Coding Lounge. We create highly valuable websites, mobile applications, and google workspace addons at an affordable price. Hire us Also Published Here