Flutter Tutorial for Newbies | All In One

# I'm utilizing the Desktop Listing
cd Desktop

# Create a Flutter undertaking
flutter create astha 

# Go to the folder and open the folder on VS Code.
cd astha

code .

# In your undertaking root as an illustration /house/<consumer>/Desktop/astha
mkdir belongings  belongings/splash

# So as to add belongings to your software, add an belongings part, like this:
# The outer **belongings**  not folder identify 
# however a variable that tells flutter SDK the place to search for belongings into
  belongings:
     # Splash Screens
    - belongings/splash/om_splash.png
    - belongings/splash/om_lotus_splash.png
    - belongings/splash/om_lotus_splash_1152x1152.png

# On dependencies part
dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash: ^2.1.1

#On dev_dependencies part
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.9.2

#Simply add these in direction of the tip
# Launch icon settings
flutter_icons:
  android: true
  ios: true
  image_path: "belongings/splash/om_splash.png"
  adaptive_icon_background: "#FFD1A6"
  adaptive_icon_foreground: "belongings/splash/om_splash.png"

# Splash Display Settings
flutter_native_splash:
  #normal
  coloration: "#ffffff"
  picture: belongings/splash/om_lotus_splash.png
  android_12:
    picture: belongings/splash/om_lotus_splash_1152x1152.png
    # icon_background_color: "#FFD1A6"

# For splash display
flutter pub run flutter_native_splash:create

# For launch icon
flutter pub run flutter_launcher_icons:principal

# Solely change these values do not delete anything.
android {
.......
    compileSdkVersion 31
...

defaultConfig {
         applicationId "com.instance.astha"
        minSdkVersion 21
        targetSdkVersion 30
....
}

# For launch icon
flutter pub run flutter_launcher_icons:principal

import 'package deal:flutter/materials.dart';
import 'package deal:flutter/providers.dart';

void principal() async {
  //  concrete binding for purposes primarily based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.darkish.copyWith(statusBarColor: Colours.black38),
  );

  // Firebase initalize
  runApp(const House());
}

class House extends StatefulWidget {
  const House({Key? key}) : tremendous(key: key);

  @override
  State<House> createState() => _HomeState();
}

class _HomeState extends State<House> {
  @override
  Widget construct(BuildContext context) {
    return const MaterialApp(
      house: Scaffold(
        physique: Heart(youngster: Textual content("House Web page")),
      ),
    );
  }
}

dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash: ^2.1.1
# Our new pacakges
  go_router: ^3.0.5
  shared_preferences: ^2.0.13
  supplier: ^6.0.2

#Your cursor must be inside lib your lib folder
# make some folder
mkdir globals screens  globals/suppliers globals/settings  globals/settings/router globals/settings/router/utils  screens/onboard  screens/house

# make some recordsdata
contact app.dart globals/suppliers/app_state_provider.dart  globals/settings/router/app_router.dart  globals/settings/router/utils/router_utils.dart screens/onboard/onboard_screen.dart  screens/house/house.dart

import 'package deal:flutter/materials.dart';
import 'package deal:flutter/providers.dart';

void principal()  {
  //  concrete binding for purposes primarily based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.darkish.copyWith(statusBarColor: Colours.black38),
  );

  runApp(const House());
}

class House extends StatefulWidget {
  const House({Key? key}) : tremendous(key: key);

  @override
  State<House> createState() => _HomeState();
}

class _HomeState extends State<House> {
  @override
  Widget construct(BuildContext context) {
    return const MaterialApp(
      house: Scaffold(
        physique: Heart(youngster: Textual content("House Web page")),
      ),
    );
  }
}

import 'package deal:flutter/materials.dart';
import 'package deal:flutter/providers.dart';
import 'package deal:temple/screens/house/house.dart';

void principal()  {
  //  concrete binding for purposes primarily based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.darkish.copyWith(statusBarColor: Colours.black38),
  );

  runApp(const House());
}

import 'package deal:flutter/materials.dart';

class House extends StatefulWidget {
  const House({Key? key}) : tremendous(key: key);

  @override
  State<House> createState() => _HomeState();
}

class _HomeState extends State<House> {
  @override
  Widget construct(BuildContext context) {
    return const MaterialApp(
      house: Scaffold(
        physique: Heart(youngster: Textual content("House Web page")),
      ),
    );
  }
}

// Create enum to signify completely different routes
enum APP_PAGE {
  onboard,
  auth,
  house,
}


extension AppPageExtension on APP_PAGE {
  // create path for routes
  String get routePath {
    change (this) {
      case APP_PAGE.house:
        return "https://dev.to/";

      case APP_PAGE.onboard:
        return "/onboard";

      case APP_PAGE.auth:
        return "/auth";

      default:
        return "https://dev.to/";
    }
  }

// for named routes
  String get routeName {
    change (this) {
      case APP_PAGE.house:
        return "HOME";

      case APP_PAGE.onboard:
        return "ONBOARD";

      case APP_PAGE.auth:
        return "AUTH";

      default:
        return "HOME";
    }
  }

// for web page titles to make use of on appbar
  String get routePageTitle {
    change (this) {
      case APP_PAGE.house:
        return "Astha";

      default:
        return "Astha";
    }
  }
}

import 'package deal:go_router/go_router.dart';
import 'package deal:temple/screens/house/house.dart';
import 'utils/router_utils.dart';

class AppRouter  {
  get router => _router;

  last _router = GoRouter(
      initialLocation: "https://dev.to/",
      routes: [
        GoRoute(
          path: APP_PAGE.home.routePath,
          name: APP_PAGE.home.routeName,
          builder: (context, state) => const Home(),
        ),
      ],
      redirect: (state) {});
}

import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:temple/globals/settings/router/app_router.dart';

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : tremendous(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget construct(BuildContext context) {
    return MultiProvider(
      suppliers: [
        Provider(create: (context) => AppRouter()),
      ],
      youngster: Builder(
        builder: ((context) {
          last GoRouter router = Supplier.of<AppRouter>(context).router;

          return MaterialApp.router(
              routeInformationParser: router.routeInformationParser,
              routerDelegate: router.routerDelegate);
        }),
      ),
    );
  }
}

// Insde principal() methodology
void principal() {
............
// Solely change this line 
  runApp(const MyApp());
//
}

import 'package deal:flutter/basis.dart';
import 'package deal:shared_preferences/shared_preferences.dart';

class AppStateProvider with ChangeNotifier {

// lets outline a technique to examine and manipulate onboard standing
  void hasOnboarded() async {
    // Get the SharedPreferences occasion
    SharedPreferences prefs = await SharedPreferences.getInstance();
    // set the onBoardCount to 1
    await prefs.setInt('onBoardCount', 1);
    // Notify listener supplies transformed worth to all it listeneres
    notifyListeners();
  }
}

import 'package deal:temple/globals/suppliers/app_state_provider.dart';

....
  .....
MultiProvider(
      suppliers: [
        ChangeNotifierProvider(create: (context) => AppStateProvider()),
        Provider(create: (context) => AppRouter())
 ]

import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:temple/globals/suppliers/app_state_provider.dart';

class OnBoardScreen extends StatefulWidget {
  const OnBoardScreen({Key? key}) : tremendous(key: key);

  @override
  State<OnBoardScreen> createState() => _OnBoardScreenState();
}

void onSubmitDone(AppStateProvider stateProvider, BuildContext context) {
  // When consumer pressed skip/carried out button we'll lastly set onboardCount integer
  stateProvider.hasOnboarded();
  // After that onboard state is finished we'll go to homepage.
  GoRouter.of(context).go("https://dev.to/");
}

class _OnBoardScreenState extends State<OnBoardScreen> {
  @override
  Widget construct(BuildContext context) {
    last appStateProvider = Supplier.of<AppStateProvider>(context);
    return Scaffold(
      physique: Heart(
          youngster: Column(
        youngsters: [
          const Text("This is Onboard Screen"),
          ElevatedButton(
              onPressed: () => onSubmitDone(appStateProvider, context),
              child: const Text("Done/Skip"))
        ],
      )),
    );
  }
}

// Packages
import 'package deal:go_router/go_router.dart';
import 'package deal:shared_preferences/shared_preferences.dart';
//Customized recordsdata
import 'package deal:temple/screens/house/house.dart';
import 'utils/router_utils.dart';
import 'package deal:temple/screens/onboard/onboard_screen.dart';
import 'package deal:temple/globals/suppliers/app_state_provider.dart';

class AppRouter {
  //=======================change #1 begin ===========/
  AppRouter({
    required this.appStateProvider,
    required this.prefs,
  });

  AppStateProvider appStateProvider;
  late SharedPreferences prefs;
  //=======================change #1 finish===========/
  get router => _router;

// change last to late last to make use of prefs inside redirect.
  late last _router = GoRouter(
      refreshListenable:
          appStateProvider, //=======================change #2===========/
      initialLocation: "https://dev.to/",
      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  begin===========/

        // outline the named path of onboard display
        last String onboardPath =
            state.namedLocation(APP_PAGE.onboard.routeName); //#4.1

        // Checking if present path is onboarding or not
        bool isOnboarding = state.subloc == onboardPath; //#4.2

        // examine if sharedPref as onBoardCount key or not
        //if is does then we cannot onboard else we are going to
        bool toOnboard =
            prefs.containsKey('onBoardCount') ? false : true; //#4.3

        //#4.4
        if (toOnboard) {
          // return null if the present location is already OnboardScreen to stop looping
          return isOnboarding ? null : onboardPath;
        }
        // returning null will inform router to do not thoughts redirect part
        return null; //#4.5
        //=======================change #4  finish===========/
      });
}

import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:shared_preferences/shared_preferences.dart';
import 'package deal:temple/globals/suppliers/app_state_provider.dart';
import 'package deal:temple/globals/settings/router/app_router.dart';

class MyApp extends StatefulWidget {
// Declared fields prefs which we are going to cross to the router class
  //=======================change #1==========/
  SharedPreferences prefs; 
  MyApp({required this.prefs, Key? key}) : tremendous(key: key);
  //=======================change #1 finish===========/
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget construct(BuildContext context) {
    return MultiProvider(
      suppliers: [
        ChangeNotifierProvider(create: (context) => AppStateProvider()),
        //=======================change #2==========/
        // Remove previous Provider call and create new proxyprovider that depends on AppStateProvider
        ProxyProvider<AppStateProvider, AppRouter>(
            update: (context, appStateProvider, _) => AppRouter(
                appStateProvider: appStateProvider, prefs: widget.prefs))
      ],
      //=======================change #2 finish==========/
      youngster: Builder(
        builder: ((context) {
          last GoRouter router = Supplier.of<AppRouter>(context).router;

          return MaterialApp.router(
              routeInformationParser: router.routeInformationParser,
              routerDelegate: router.routerDelegate);
        }),
      ),
    );
  }
}

import 'package deal:flutter/materials.dart';
import 'package deal:flutter/providers.dart';
import 'package deal:shared_preferences/shared_preferences.dart';
import 'package deal:temple/app.dart';

//=======================change #1==========/
// make app an async funtion to instantiate shared preferences
void principal() async {
  //  concrete binding for purposes primarily based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();

  //=======================change #2==========/
// Instantiate shared pref
  SharedPreferences prefs = await SharedPreferences.getInstance();
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.darkish.copyWith(statusBarColor: Colours.black38),
  );
  //=======================change #3==========/
// Move prefs as worth in MyApp
  runApp(MyApp(prefs: prefs));
}

import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:temple/globals/suppliers/app_state_provider.dart';

class OnBoardScreen extends StatefulWidget {
  const OnBoardScreen({Key? key}) : tremendous(key: key);

  @override
  State<OnBoardScreen> createState() => _OnBoardScreenState();
}

void onSubmitDone(AppStateProvider stateProvider, BuildContext context) {
  // When consumer pressed skip/carried out button we'll lastly set onboardCount integer
  stateProvider.hasOnboarded();
  // After that onboard state is finished we'll go to homepage.
  GoRouter.of(context).go("https://dev.to/");
}

class _OnBoardScreenState extends State<OnBoardScreen> {
// Create a personal index to trace picture index
  int _currentImgIndex = 0; // #1

// Create checklist with photographs to make use of whereas onboarding
  // #2
  last onBoardScreenImages = [
    "assets/onboard/FindTemples.png",
    "assets/onboard/FindVenues.png",
    "assets/onboard/FindTemples.png",
    "assets/onboard/FindVenues.png",
  ];

// Perform to show subsequent picture within the checklist when subsequent button  is clicked
  // #4
  void nextImage() {
    if (_currentImgIndex < onBoardScreenImages.size - 1) {
      setState(() => _currentImgIndex += 1);
    }
  }

// Perform to show earlier picture within the checklist when earlier button  is clicked
  // #3
  void prevImage() {
    if (_currentImgIndex > 0) {
      setState(() => _currentImgIndex -= 1);
    }
  }

  @override
  Widget construct(BuildContext context) {
    last appStateProvider = Supplier.of<AppStateProvider>(context);
    return Scaffold(
        physique: SafeArea(
            youngster: Container(
                coloration: const Shade.fromARGB(255, 255, 209, 166),
                padding: const EdgeInsets.all(10.0),
                youngster: Column(
                  youngsters: [
                    // 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],
                        top: MediaQuery.of(context).measurement.top * 0.8,
                        width: double.infinity,
                        // Secret is wanted since widget sort is similar i.e Picture
                        key: ValueKey<int>(_currentImgIndex),
                      ),
                    ),
                    // Container to that incorporates set butotns
                    // #5
                    Container(
                        coloration: Colours.black26,
                        youngster: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          youngsters: [
                            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),
                            )
                          ],
                        ))
                  ],
                ))));
  }
}

// Create a personal index to trace picture index
  int _currentImgIndex = 0; // #1

// Create checklist with photographs to make use of whereas onboarding
  // #2
  last onBoardScreenImages = [
    "assets/onboard/FindTemples.png",
    "assets/onboard/FindVenues.png",
    "assets/onboard/FindTemples.png",
    "assets/onboard/FindVenues.png",
  ];

// Perform to show subsequent picture within the checklist when subsequent button  is clicked
  // #1
  void nextImage() {
    if (_currentImgIndex < onBoardScreenImages.size - 1) {
      setState(() => _currentImgIndex += 1);
    }
  }

// Perform to show earlier picture within the checklist when earlier button  is clicked
  // #2
  void prevImage() {
    if (_currentImgIndex > 0) {
      setState(() => _currentImgIndex -= 1);
    }
  }

// Animated switcher class to animated between photographs
               AnimatedSwitcher(
                      switchInCurve: Curves.easeInOut,
                      switchOutCurve: Curves.easeOut,
                      transitionBuilder: ((youngster, animation) =>
                          ScaleTransition(scale: animation, youngster: youngster)),
                      length: const Length(milliseconds: 800),
                      youngster: Picture.asset(
                        onBoardScreenImages[_currentImgIndex],
                        top: MediaQuery.of(context).measurement.top * 0.8,
                        width: double.infinity,
                         // Secret is wanted since widget sort is similar i.e Picture
                        key: ValueKey<int>(_currentImgIndex),
                      ),
                    ),

Container(
                        coloration: Colours.black26,
                        youngster: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          youngsters: [
                            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),
                            )
                          ],
                        ))
                  ],
                ))

# on the foundation of the undertaking
mkdir lib/globals/theme

# Create file
contact lib/globals/theme/app_theme.dart

import 'package deal:flutter/materials.dart';

// Instantiate new  theme knowledge
last ThemeData asthaTutorialTheme = _asthaTutorialTheme();

//Outline Base theme for app
ThemeData _asthaTutorialTheme() {
// We'll simply overwrite no matter's already there utilizing ThemeData.gentle()
  last ThemeData base = ThemeData.gentle();

  // Make modifications to gentle() theme
  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(

      major: const Shade.fromARGB(255, 255, 153, 51),
      onPrimary: Colours.white,
      secondary: const Shade.fromARGB(255, 223, 27, 12),
      onSecondary: Colours.white,
      background: const Shade.fromARGB(255, 228, 243, 228),
      onBackground: Colours.black,
    ),
  );
}

 fonts:
    - household: Proxima Nova Rg Common
      fonts: 
        - asset: belongings/fonts/ProximaNovaRegular.ttf

 // Exterior of _asthaTutorialTheme perform  create one other perform

TextTheme _asthaTutorialTextTheme(TextTheme base) => base.copyWith(
// This'll be our appbars title
      headline1: base.headline1!.copyWith(
          fontFamily: "Proxima Nova Rg Common",
          fontSize: 30,
          fontWeight: FontWeight.w500,
          coloration: Colours.white),
// for widgets heading/title
      headline2: base.headline2!.copyWith(
        fontFamily: "Proxima Nova Rg Common",
        fontSize: 26,
        fontWeight: FontWeight.w400,
        coloration: Colours.black,  
      ),
// for sub-widgets heading/title
      headline3: base.headline3!.copyWith(
        fontFamily: "Proxima Nova Rg Common",
        fontSize: 24,
        fontWeight: FontWeight.w400,
        coloration: Colours.black,
      ),
// for widgets contents/paragraph
      bodyText1: base.bodyText1!.copyWith(
          fontFamily: "Proxima Nova Rg Common",
          fontSize: 20,
          fontWeight: FontWeight.w300,
          coloration: Colours.black),
// for sub-widgets contents/paragraph
      bodyText2: base.bodyText2!.copyWith(
          fontFamily: "Proxima Nova Rg Common",
          fontSize: 18,
          fontWeight: FontWeight.w300,
          coloration: Colours.black),
    );

// Inside the bottom.copyWith methodology 
....
  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(
   // Go away it as it's
      ....    ),
    // Add textual content theme
    textTheme: _asthaTutorialTextTheme(base.textTheme),
  );

ElevatedButtonThemeData _elevatedButtonTheme(ElevatedButtonThemeData base) =>
    ElevatedButtonThemeData(
      type: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Shade>(
          const Shade.fromARGB(255, 223, 27, 12),
        ),
        foregroundColor: MaterialStateProperty.all<Shade>(Colours.white),
      ),
    );

    // beneath textual content theme add this
    // Outline types for elevated button
    elevatedButtonTheme: _elevatedButtonTheme(base.elevatedButtonTheme),

InputDecorationTheme _inputDecorationTheme(InputDecorationTheme base) =>
    const InputDecorationTheme(
// Label coloration for the enter widget 
      labelStyle: TextStyle(coloration: Colours.black),
// Outline border of enter type whereas centered on 
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          width: 1.0,
          coloration: Colours.black,
          type: BorderStyle.strong,
        ),
      ),
    );

import 'package deal:flutter/materials.dart';
// Kinda like a getter to import theme from different recordsdata
last ThemeData asthaTutorialTheme = _asthaTutorialTheme();

//Outline Base theme for app
ThemeData _asthaTutorialTheme() {
  last ThemeData base = ThemeData.gentle();

  return base.copyWith(
    colorScheme: base.colorScheme.copyWith(
      major: const Shade.fromARGB(255, 255, 153, 51),
      onPrimary: Colours.white,
      secondary: const Shade.fromARGB(255, 223, 27, 12),
      onSecondary: Colours.white,
      error: Colours.pink,
      background: const Shade.fromARGB(255, 228, 243, 228),
      onBackground: Colours.black,
    ),
    textTheme: _asthaTutorialTextTheme(base.textTheme),
    // beneath textual content theme add this
    // Outline types for elevated button
    elevatedButtonTheme: _elevatedButtonTheme(base.elevatedButtonTheme),

    // Set Themes for Enter Your homework

    // Outline theme for textual content enter

  );
}

// Exterior of _asthaTutorialTheme perform  create one other perform

TextTheme _asthaTutorialTextTheme(TextTheme base) => base.copyWith(
// This'll be our appbars title
      headline1: base.headline1!.copyWith(
          fontFamily: "Proxima Nova Rg Common",
          fontSize: 30,
          fontWeight: FontWeight.w500,
          coloration: Colours.white),
// for widgets heading/title
      headline2: base.headline2!.copyWith(
        fontFamily: "Proxima Nova Rg Common",
        fontSize: 26,
        fontWeight: FontWeight.w400,
        coloration: Colours.black,
      ),
// for sub-widgets heading/title
      headline3: base.headline3!.copyWith(
        fontFamily: "Proxima Nova Rg Common",
        fontSize: 24,
        fontWeight: FontWeight.w400,
        coloration: Colours.black,
      ),
// for widgets contents/paragraph
      bodyText1: base.bodyText1!.copyWith(
          fontFamily: "Proxima Nova Rg Common",
          fontSize: 20,
          fontWeight: FontWeight.w300,
          coloration: Colours.black),
// for sub-widgets contents/paragraph
      bodyText2: base.bodyText2!.copyWith(
          fontFamily: "Proxima Nova Rg Common",
          fontSize: 18,
          fontWeight: FontWeight.w300,
          coloration: Colours.black),
    );

InputDecorationTheme _inputDecorationTheme(InputDecorationTheme base) =>
    const InputDecorationTheme(
// Label coloration for the enter widget
      labelStyle: TextStyle(coloration: Colours.black),
// Outline border of enter type whereas centered on
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          width: 1.0,
          coloration: Colours.black,
          type: BorderStyle.strong,
        ),
      ),
    );

ElevatedButtonThemeData _elevatedButtonTheme(ElevatedButtonThemeData base) =>
    ElevatedButtonThemeData(
      type: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Shade>(
          const Shade.fromARGB(255, 223, 27, 12),
        ),
        foregroundColor: MaterialStateProperty.all<Shade>(Colours.white),
      ),
    );

// import theme at prime
import 'package deal:temple/globals/theme/app_theme.dart';

//In MaterialApp.router
          return MaterialApp.router(
              routeInformationParser: router.routeInformationParser,
              theme: asthaTutorialTheme, // add our theme right here.
              routerDelegate: router.routerDelegate);

import 'package deal:flutter/materials.dart';

class House extends StatefulWidget {
  const House({Key? key}) : tremendous(key: key);

  @override
  State<House> createState() => _HomeState();
}

class _HomeState extends State<House> {
  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        main: Icon(Icons.particular person),
        title: Textual content(
          "That is appbar",
          type: Theme.of(context).textTheme.headline1,
        ),
      ),
      physique: SafeArea(
        youngster: Container(
            padding: const EdgeInsets.all(20),
            coloration: Theme.of(context).colorScheme.background,
            youngster:
                Column(mainAxisAlignment: MainAxisAlignment.begin, youngsters: [
              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,
                youngsters: [
                  TextButton(
                    child: const Text("Text Button"),
                    onPressed: () {},
                  ),
                  ElevatedButton(
                    child: Text(
                      "Hi",
                      style: Theme.of(context).textTheme.bodyText1!.copyWith(
                            color: Colors.white,
                          ),
                    ),
                    onPressed: () {},
                  ),
                ],
              )
            ])
           ),
      ),
    );
  }
}

# Cursor on root folder
# Create widgets and app_bar folder 
mkdir lib/globals/widgets lib/globals/widgets/app_bar

# Create app_bar.dart
contact lib/globals/widgets/app_bar/app_bar.dart

import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';

class CustomAppBar extends StatefulWidget with PreferredSizeWidget {
  // Preffered measurement required for PreferredSizeWidget extension
  last Dimension prefSize;
  // App bar title relying on the display
  last String title;
  // A bool to examine whether or not its a subpage or not.
  last bool isSubPage;
  // An instance of search icon press.
  last bool hasSearchFunction;

  CustomAppBar(
      {required this.title,
      this.isSubPage = false,
      this.hasSearchFunction = false,
      this.prefSize = const Dimension.fromHeight(56.0),
      Key? key})
      : tremendous(key: key);

  @override
  Dimension get preferredSize => const Dimension.fromHeight(56.0); 

 @override
  State<CustomAppBar> createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar> {
  @override
  Widget construct(BuildContext context) {
    return AppBar(
      title: Textual content(widget.title),
      automaticallyImplyLeading: false,
      main: 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))
      ],
    );
  }
}

// Modified to customized appbar
      appBar: CustomAppBar(
        title: APP_PAGE.house.routePageTitle,
      ),
// =====//

enum APP_PAGE {
  onboard,
  auth,
  house,
  search,
  store,
  favourite,
}

extension AppPageExtension on APP_PAGE {
  // create path for routes
  String get routePath {
    change (this) {
      case APP_PAGE.house:
        return "https://dev.to/";

      case APP_PAGE.onboard:
        return "/onboard";

      case APP_PAGE.auth:
        return "/auth";

      case APP_PAGE.search:
        return "/serach";

      case APP_PAGE.favourite:
        return "/favourite";

      case APP_PAGE.store:
        return "/store";
      default:
        return "https://dev.to/";
    }
  }

// for named routes
  String get routeName {
    change (this) {
      case APP_PAGE.house:
        return "HOME";

      case APP_PAGE.onboard:
        return "ONBOARD";

      case APP_PAGE.auth:
        return "AUTH";

      case APP_PAGE.search:
        return "Search";
      case APP_PAGE.favourite:
        return "Favourite";

      case APP_PAGE.store:
        return "Store";

      default:
        return "HOME";
    }
  }

// for web page titles

  String get routePageTitle {
    change (this) {
      case APP_PAGE.house:
        return "Astha";

      case APP_PAGE.auth:
        return "Register/SignIn";

      case APP_PAGE.store:
        return "Retailers";

      case APP_PAGE.search:
        return "Search";

      case APP_PAGE.favourite:
        return "Your Favorites";

      default:
        return "Astha";
    }
  }
}

# Cursor on root folder
# Create bottom_nav_bar folder 
mkdir lib/globals/widgets/bottom_nav_bar

# Create bottom_nav_bar.dart
contact lib/globals/widgets/bottom_nav_bar/bottom_nav_bar.dart

import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';
import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';

class CustomBottomNavBar extends StatefulWidget {
  // create index to pick from the checklist of route paths
  last int navItemIndex; //#1

  const CustomBottomNavBar({required this.navItemIndex, Key? key})
      : tremendous(key: key);

  @override
  _CustomBottomNavBarState createState() => _CustomBottomNavBarState();
}

class _CustomBottomNavBarState extends State<CustomBottomNavBar> {
  // Make an inventory of routes that you will need to go to
  // #2
  static last Record<String> _widgetOptions = [
    APP_PAGE.home.routeName,
    APP_PAGE.favorite.routeName,
    APP_PAGE.shop.routeName,
  ];

// Perform that handles navigation primarily based of index acquired
// #3
  void _onItemTapped(int index) {
    GoRouter.of(context).goNamed(_widgetOptions[index]);
  }

  @override
  Widget construct(BuildContext context) {
    return BottomNavigationBar(
      // Record of icons that signify display.
      // # 4
      gadgets: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.favorite),
          label: 'Favorites',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.shop),
          label: 'Shop',
        ),
      ],

      // Backgroud coloration
      // ==========================================//
      // #5
      backgroundColor: Theme.of(context).colorScheme.major,

      currentIndex: widget.navItemIndex, // present chosen index
      selectedItemColor:
          Theme.of(context).colorScheme.onPrimary, // chosen merchandise coloration

      selectedIconTheme: IconThemeData(
        measurement: 30, // Make chosen icon larger than the remainder
        coloration: Theme.of(context)
            .colorScheme
            .onPrimary, // chosen icon might be white
      ),
      unselectedIconTheme: const IconThemeData(
        measurement: 24, // Dimension of non-selected icons
        coloration: Colours.black,
      ),
      selectedLabelStyle: const TextStyle(
        fontSize: 20, // When chosen make textual content larger
        fontWeight: FontWeight.w400, // and bolder however not so thick
      ),
      unselectedLabelStyle: const TextStyle(
        fontSize: 16,
        coloration: Colours.black,
      ),
      onTap: _onItemTapped,
    );
    // ==========================================//
  }
}

appBar:....
bottomNavigationBar: const CustomBottomNavBar(
        navItemIndex: 0,
      ),
physique:...

# Cursor on root folder
# Create user_drawer folder 
mkdir lib/globals/widgets/user_drawer

# Create user_drawer.dart file
contact lib/globals/widgets/user_drawer/user_drawer.dart

import 'package deal:flutter/materials.dart';

class UserDrawer extends StatefulWidget {
  const UserDrawer({Key? key}) : tremendous(key: key);

  @override
  _UserDrawerState createState() => _UserDrawerState();
}

class _UserDrawerState extends State<UserDrawer> {
  @override
  Widget construct(BuildContext context) {
    return AlertDialog(
      backgroundColor: Theme.of(context).colorScheme.major,
      actionsPadding: EdgeInsets.zero,
      scrollable: true,
      form: RoundedRectangleBorder(
        borderRadius: BorderRadius.round(15),
      ),
      title: Textual content(
        "Astha",
        type: Theme.of(context).textTheme.headline2,
      ),
// A line between the title part and the checklist of hyperlinks 
      content material: const Divider(
        thickness: 1.0,
        coloration: Colours.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");
            }),
      ],
    );
  }
}

class _HomeState extends State<House> {
  // create a worldwide key for scafoldstate
  // #1
  last GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
........

return Scaffold(
      // Present key to scaffold
      // #2
      key: _scaffoldKey,
.....

 appBar: CustomAppBar(
        title: APP_PAGE.house.routePageTitle,
        // cross the scaffold key to customized app bar
        // #3
        scaffoldKey: _scaffoldKey,
      ),

 // #4
      // Move our drawer to drawer property
      // if you wish to slide left to proper use
      // drawer: UserDrawer(),
      // if you wish to slide proper to left use
      endDrawer: const UserDrawer(),

import 'package deal:flutter/materials.dart';
import 'package deal:temple/globals/widgets/app_bar/app_bar.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';
import 'package deal:temple/globals/widgets/bottom_nav_bar/bottom_nav_bar.dart';
import 'package deal:temple/globals/widgets/user_drawer/user_drawer.dart';

class House extends StatefulWidget {
  const House({Key? key}) : tremendous(key: key);

  @override
  State<House> createState() => _HomeState();
}

class _HomeState extends State<House> {
  // create a worldwide key for scafoldstate
  // #1
  last GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      // Present key to scaffold
      // #2
      key: _scaffoldKey,
      // Modified to customized appbar
      appBar: CustomAppBar(
        title: APP_PAGE.house.routePageTitle,
        // cross the scaffold key to customized app bar
        // #3
        scaffoldKey: _scaffoldKey,
      ),
      // #4
      // Move our drawer to drawer property
      // if you wish to slide lef to proper use
      // drawer: UserDrawer(),
      // if you wish to slide proper to left use
      endDrawer: const UserDrawer(),

      bottomNavigationBar: const CustomBottomNavBar(
        navItemIndex: 0,
      ),
      major: true,

      physique: SafeArea(
        youngster: Container(
            padding: const EdgeInsets.all(20),
            coloration: Theme.of(context).colorScheme.background,
            youngster:
                Column(mainAxisAlignment: MainAxisAlignment.begin, youngsters: [
              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,
                youngsters: [
                  TextButton(
                    child: const Text("Text Button"),
                    onPressed: () {},
                  ),
                  ElevatedButton(
                    child: Text(
                      "Hi",
                      style: Theme.of(context).textTheme.bodyText1!.copyWith(
                            color: Colors.white,
                          ),
                    ),
                    onPressed: () {},
                  ),
                ],
              )
            ])),
      ),
    );
  }
}

// Declare new  international key subject of sort ScaffoldState
  // #1
  last GlobalKey<ScaffoldState> scaffoldKey;

  const CustomAppBar(
      {required this.title,
      required this.scaffoldKey, //#2 cross the brand new scaffold key to constructor
      this.isSubPage = false,
      this.hasSearchFunction = false,
      this.prefSize = const Dimension.fromHeight(56.0),
      Key? key})
      : tremendous(key: key);

 IconButton(
          icon: const Icon(Icons.particular person),
          // #3
          // Slide proper to left
          onPressed: () => widget.scaffoldKey.currentState!.openEndDrawer(),
          // slide lef to proper
          // onPressed: () => widget.scaffoldKey.currentState!.openDrawer(),
        ),

# cursor on root folder
# create folders
mkdir lib/screens/auth lib/screens/auth/widgets lib/screens/auth/suppliers  lib/screens/auth/utils

# Create recordsdata
contact lib/screens/auth/auth_screen.dart   lib/screens/auth/suppliers/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

import 'package deal:flutter/materials.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})
      : tremendous(key: key);

  // bool to examine if the textual content subject is for password or not
  last bool isNonPasswordField;
  // Controller for the textual content subject
  last TextEditingController controller;
  // Functio to toggle Textual content obscuractio on password textual content subject
  last VoidCallback? toggleObscureText;
  // to obscure textual content or not bool
  last bool obscureText;
  // FocusNode for enter
  last FocusNode focusNode;
  // Validator perform
  last String? Perform(String?)? validator;
  // Prefix icon for enter type
  last Icon prefIcon;
  // label for enter type
  last String labelText;
  // The key phrase motion to show
  last TextInputAction textInputAction;

  @override
  Widget construct(BuildContext context) {
    return TextFormField(
      controller: controller,
      ornament: InputDecoration(
        // Enter with border outlined
        border: const OutlineInputBorder(
          // Make border edge round
          borderRadius: BorderRadius.all(Radius.round(10.0)),
        ),
        label: Textual content(labelText),
        prefixIcon: prefIcon,
        suffixIcon: IconButton(
          onPressed: toggleObscureText,
          // If is non-password filed like emal the suffix icon might 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,
    );
  }
}

// bool to examine if the textual content subject is for password or not
  last bool isNonPasswordField; //# 1
   // Perform to toggle Textual content obscuraction on password textual content subject
  last VoidCallback? toggleObscureText; //# 2
  // to obscure textual content or not bool
  last bool obscureText;
   // Validator perform 
  last String? Perform(String?)? validator; //# 3

class AuthValidators {
  // Create error messages to ship.
 // #1
  static const String emailErrMsg =  "Invalid E mail Tackle, Please present a legitimate electronic mail.";
  static const String passwordErrMsg = "Password will need to have no less than 6 characters.";
  static const String confirmPasswordErrMsg = "Two passwords do not match.";

// A easy electronic mail validator that  checks presence and place of @
// #2
  String? emailValidator(String? val)  indexOfAt == electronic mail.size - 1) return emailErrMsg;

    // Else its legitimate
    return null;
  
}

// Password validator
  String? passwordVlidator(String? val) 

// Verify password
  String? confirmPasswordValidator(String? val, firstPasswordInpTxt) {
    last String firstPassword = firstPasswordInpTxt;
    last String secondPassword = val as String;
    // If both of the password subject is empty
    // Or if thier size don't match then we need not evaluate their content material
// #1
    if (firstPassword.isEmpty || 
        secondPassword.isEmpty ||
        firstPassword.size != secondPassword.size) {
      return confirmPasswordErrMsg;
    }

    //  If two passwords don't match then ship error message
// #2
    if (firstPassword != secondPassword) return confirmPasswordErrMsg;

    return null;
  }

class AuthValidators {
  // Create error messages to ship.
  static const String emailErrMsg =
      "Invalid E mail Tackle, Please present a legitimate electronic mail.";
  static const String passwordErrMsg =
      "Password will need to have no less than 6 characters.";
  static const String confirmPasswordErrMsg = "Two passwords do not match.";

// A easy electronic mail validator that  checks presence and place of @
  String? emailValidator(String? val)  indexOfAt == electronic mail.size - 1) return emailErrMsg;

    // Else its legitimate
    return null;
  

  // Password validator
  String? passwordVlidator(String? val) 

  // Verify password
  String? confirmPasswordValidator(String? val, firstPasswordInpTxt) {
    last String firstPassword = firstPasswordInpTxt;
    last String secondPassword = val as String;
    // If both of the password subject is empty
    // Or if thier size don't match then we need not evaluate their content material
    if (firstPassword.isEmpty ||
        secondPassword.isEmpty ||
        firstPassword.size != secondPassword.size) {
      return confirmPasswordErrMsg;
    }

    //  If two passwords don't match then ship error message
    if (firstPassword != secondPassword) return confirmPasswordErrMsg;

    return null;
  }
}

import 'package deal:flutter/materials.dart';

class AuthFormWidget extends StatefulWidget {
  const AuthFormWidget({Key? key}) : tremendous(key: key);

  @override
  State<AuthFormWidget> createState() => _AuthFormWidgetState();
}

class _AuthFormWidgetState extends State<AuthFormWidget> {
  // Outline Kind key
  last _formKey = GlobalKey<FormState>();

  @override
  Widget construct(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      youngster: Kind(
        key: _formKey,
        youngster: TextFormField(),
      ),
    );
  }
}

import 'package deal:flutter/materials.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';
import 'package deal:temple/screens/auth/widgets/auth_form_widget.dart';

class AuthScreen extends StatelessWidget {
  const AuthScreen({Key? key}) : tremendous(key: key);

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Textual content(APP_PAGE.auth.routePageTitle)),
      physique:
      // Protected space prevents secure gards widgets to transcend machine edges
       SafeArea(
        //===========//
        // to dismiss key phrase on faucet exterior use listener
        youngster: Listener(
          onPointerDown: (PointerDownEvent occasion) =>
              FocusManager.occasion.primaryFocus?.unfocus(),
          //===========//
          youngster: SingleChildScrollView(
            youngster: SizedBox(
              width: double.infinity,
              youngster: Column(youngsters: [
                // 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()
              ]),
            ),
          ),
        ),
      ),
    );
  }
}

belongings:
    # Splash Screens
    - belongings/splash/om_splash.png
    - belongings/splash/om_lotus_splash.png
    - belongings/splash/om_lotus_splash_1152x1152.png
    # Onboard Screens
    - belongings/onboard/FindTemples.png
    - belongings/onboard/FindVenues.png
// New line
    # Auth Screens
    - belongings/AuthScreen/WelcomeScreenImage_landscape_2.png 

 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()),
      ],

...............
 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");
            }),
      ],
.....

  // Instantiate validator
  last 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 textual content default worth is fake
  bool obscureText = true;

 // It will require toggling between register and signin mode
  bool registerAuthMode = false;

@override
  void initState() {
    tremendous.initState();
    emailController = TextEditingController();
    usernameController = TextEditingController();
    passwordController = TextEditingController();
    confirmPasswordController = TextEditingController();

    emailFocusNode = FocusNode();
    usernameFocusNode = FocusNode();
    passwordFocusNode = FocusNode();
    confirmPasswordFocusNode = FocusNode();
  }

@override
  void dispose() {
    tremendous.dispose();

    emailController.dispose();
    usernameController.dispose();
    passwordController.dispose();
    confirmPasswordController.dispose();

    emailFocusNode.dispose();
    usernameFocusNode.dispose();
    passwordFocusNode.dispose();
    confirmPasswordFocusNode.dispose();
  }

 void toggleObscureText() {
    setState(() {
      obscureText = !obscureText;
    });
  }

// Create a scaffold messanger
  SnackBar msgPopUp(msg) {
    return SnackBar(
        content material: Textual content(
      msg,
      textAlign: TextAlign.heart,
    ));
  }

@override
  Widget construct(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      youngster: Kind(
        key: _formKey,
        youngster: Column(youngsters: [],)
      ),
    );
  }

    // E mail
            DynamicInputWidget(
              controller: emailController,
              obscureText: false,
              focusNode: emailFocusNode,
              toggleObscureText: null,
              validator: authValidator.emailValidator,
              prefIcon: const Icon(Icons.mail),
              labelText: "Enter E mail Tackle",
              textInputAction: TextInputAction.subsequent,
              isNonPasswordField: true,
            ),
            const SizedBox(
              top: 20,
            ),

    // Username
              DynamicInputWidget(
                controller: usernameController,
                obscureText: false,
                focusNode: usernameFocusNode,
                toggleObscureText: null,
                validator: null,
                prefIcon: const Icon(Icons.particular person),
                labelText: "Enter Username(Optionally available)",
                textInputAction: TextInputAction.subsequent,
                isNonPasswordField: true,
              ),
               const SizedBox(
                top: 20,
              ),

// password
  DynamicInputWidget(
              controller: passwordController,
              labelText: "Enter Password",
              obscureText: obscureText,
              focusNode: passwordFocusNode,
              toggleObscureText: toggleObscureText,
              validator: authValidator.passwordVlidator,
              prefIcon: const Icon(Icons.password),
              textInputAction: registerAuthMode
                  ? TextInputAction.subsequent
                  : TextInputAction.carried out,
              isNonPasswordField: false,
            ),

            const SizedBox(
              top: 20,
            ),

// verify password
DynamicInputWidget(
                controller: confirmPasswordController,
                focusNode: confirmPasswordFocusNode,
                isNonPasswordField: false,
                labelText: "Verify Password",
                obscureText: obscureText,
                prefIcon: const Icon(Icons.password),
                textInputAction: TextInputAction.carried out,
                toggleObscureText: toggleObscureText,
                validator: (val) => authValidator.confirmPasswordValidator(
                    val, passwordController.textual content),
              ),

              const SizedBox(
                top: 20,
              ),

// Toggle register/singin button textual content. In a while we'll additionally must toggle register or signin perform
Row(
              mainAxisAlignment: MainAxisAlignment.finish,
              youngsters: [
                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),
                  ),
                ),
              ],
            ),

 Row(
              mainAxisAlignment: MainAxisAlignment.heart,
              youngsters: [
                Text(registerAuthMode
                    ? "Already Have an account?"
                    : "Don't have an account yet?"),
                TextButton(
                  onPressed: () =>
                      setState(() => registerAuthMode = !registerAuthMode),
                  child: Text(registerAuthMode ? "Sign In" : "Regsiter"),
                )
              ],
            )

    // Username
              AnimatedContainer(
                length: const Length(milliseconds: 500),
                top: registerAuthMode ? 65 : 0,
                youngster: AnimatedOpacity(
                  length: const Length(milliseconds: 500),
                  opacity: registerAuthMode ? 1 : 0,
                  youngster: DynamicInputWidget(
                    controller: usernameController,
                    obscureText: false,
                    focusNode: usernameFocusNode,
                    toggleObscureText: null,
                    validator: null,
                    prefIcon: const Icon(Icons.particular person),
                    labelText: "Enter Username(Optionally available)",
                    textInputAction: TextInputAction.subsequent,
                    isNonPasswordField: true,
                  ),
                ),
              ),
// We'll additionally must fade in/out sizedbox
              AnimatedOpacity(
              length: const Length(milliseconds: 500),
              opacity: registerAuthMode ? 1 : 0,
              youngster: const SizedBox(
                top: 20,
              ),
            ),

// Verify password 
 AnimatedContainer(
                length: const Length(milliseconds: 500),
                top: registerAuthMode ? 65 : 0,
                youngster: AnimatedOpacity(
                  length: const Length(milliseconds: 500),
                  opacity: registerAuthMode ? 1 : 0,
                  youngster: DynamicInputWidget(
                    controller: confirmPasswordController,
                    focusNode: confirmPasswordFocusNode,
                    isNonPasswordField: false,
                    labelText: "Verify Password",
                    obscureText: obscureText,
                    prefIcon: const Icon(Icons.password),
                    textInputAction: TextInputAction.carried out,
                    toggleObscureText: toggleObscureText,
                    validator: (val) => authValidator.confirmPasswordValidator(
                        val, passwordController.textual content),
                  ),
                ),
              ),

import 'package deal:flutter/materials.dart';
import 'package deal:temple/screens/auth/utils/auth_validators.dart';
import 'package deal:temple/screens/auth/widgets/text_from_widget.dart';

class AuthFormWidget extends StatefulWidget {
  const AuthFormWidget({Key? key}) : tremendous(key: key);

  @override
  State<AuthFormWidget> createState() => _AuthFormWidgetState();
}

class _AuthFormWidgetState extends State<AuthFormWidget> {
  // Outline Kind key
  last _formKey = GlobalKey<FormState>();

  // Instantiate validator
  last 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 textual content default worth is fake
  bool obscureText = true;
  // It will require to toggle between register and sigin in mode
  bool registerAuthMode = false;

// Instantiate all of the *textual content enhancing controllers* and focus nodes on *initState* perform
  @override
  void initState() {
    tremendous.initState();
    emailController = TextEditingController();
    usernameController = TextEditingController();
    passwordController = TextEditingController();
    confirmPasswordController = TextEditingController();

    emailFocusNode = FocusNode();
    usernameFocusNode = FocusNode();
    passwordFocusNode = FocusNode();
    confirmPasswordFocusNode = FocusNode();
  }

// These all have to be disposed of as soon as carried out so let's do this as properly.
  @override
  void dispose() {
    tremendous.dispose();

    emailController.dispose();
    usernameController.dispose();
    passwordController.dispose();
    confirmPasswordController.dispose();

    emailFocusNode.dispose();
    usernameFocusNode.dispose();
    passwordFocusNode.dispose();
    confirmPasswordFocusNode.dispose();
  }

// Create a perform that'll toggle the password's visibility on the related icon faucet.
  void toggleObscureText() {
    setState(() {
      obscureText = !obscureText;
    });
  }

// Let's create a snack bar to pop information on numerous circumstances.
// Create a scaffold messanger
  SnackBar msgPopUp(msg) {
    return SnackBar(
        content material: Textual content(
      msg,
      textAlign: TextAlign.heart,
    ));
  }

  @override
  Widget construct(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      youngster: Kind(
        key: _formKey,
        youngster: Column(
          youngsters: [
            // 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(
              top: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.heart,
              youngsters: [
                Text(registerAuthMode
                    ? "Already Have an account?"
                    : "Don't have an account yet?"),
                TextButton(
                  onPressed: () =>
                      setState(() => registerAuthMode = !registerAuthMode),
                  child: Text(registerAuthMode ? "Sign In" : "Regsiter"),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

# Root of the flutter undertaking
# Firebase core
flutter pub add firebase_core

# Firebase Auth
flutter pub add firebase_auth

# Firebase Firestore
flutter pub add cloud_firestore

# Firebase Cloud Features
flutter pub add cloud_functions

# Firebase Storage
flutter pub add firebase_storage

# Set up Firebase CLI
dart pub international activate flutterfire_cli

# On the foundation of your undertaking
# configur cli
flutterfire configure

// Import 
import 'package deal:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

// Inside principal() methodology

// Initialize Firebase
  await Firebase.initializeApp(
    choices: DefaultFirebaseOptions.currentPlatform,
  );

import 'package deal:flutter/materials.dart';
import 'package deal:flutter/providers.dart';
import 'package deal:shared_preferences/shared_preferences.dart';
import 'package deal:temple/app.dart';
import 'package deal:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void principal() async {
  //  concrete binding for purposes primarily based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();

// Instantiate shared pref
  SharedPreferences prefs = await SharedPreferences.getInstance();
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.darkish.copyWith(statusBarColor: Colours.black38),
  );
  // Initialize Firebase
  await Firebase.initializeApp(
    choices: DefaultFirebaseOptions.currentPlatform,
  );

// Move prefs as worth in MyApp
  runApp(MyApp(prefs: prefs));
}

# On the foundation of your undertaking
firebase init

import 'dart:io' present Platform; // Its required for emulator 
import 'package deal:cloud_firestore/cloud_firestore.dart';
import 'package deal:cloud_functions/cloud_functions.dart';
import 'package deal:firebase_auth/firebase_auth.dart';
import 'package deal:firebase_storage/firebase_storage.dart';

// Exterior of any class or strategies, earlier than principal()
const bool _useEmulator = true;

// Exterior of principal, ideally on the finish of the file


// Settings for firebase emulator connection
Future _connectToEmulator() async {
  // Present url to the emulator, localhost may not work on android emulator.
  last host = Platform.isAndroid ? '10.0.2.2' : 'localhost'; //#1
  // Present port for all of the native emulator prodcuts 
  // #2
  const authPort = 9099;
  const firestorePort = 8080;
  const functionsPort = 5001;
  const storagePort = 9199;

  // Simply to verify we're operating regionally
  print("I'm operating on emulator");

  // Instruct all of the related firebase merchandise to make use of the firebase emulator
  // # 3
  await FirebaseAuth.occasion.useAuthEmulator(host, authPort);
  FirebaseFirestore.occasion.useFirestoreEmulator(host, firestorePort);
  FirebaseFunctions.occasion.useFunctionsEmulator(host, functionsPort);
  FirebaseStorage.occasion.useStorageEmulator(host, storagePort);
}

// Set app to run on firebase emulator
  if (_useEmulator) {
    await _connectToEmulator();
  }

import 'dart:io' present Platform;
import 'package deal:cloud_firestore/cloud_firestore.dart';
import 'package deal:cloud_functions/cloud_functions.dart';
import 'package deal:firebase_auth/firebase_auth.dart';
import 'package deal:firebase_storage/firebase_storage.dart';
import 'package deal:flutter/materials.dart';
import 'package deal:flutter/providers.dart';
import 'package deal:shared_preferences/shared_preferences.dart';
import 'package deal:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
// Customized modules
import 'package deal:temple/app.dart';

const bool _useEmulator = true;

void principal() async {
  //  concrete binding for purposes primarily based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();

// Instantiate shared pref
  SharedPreferences prefs = await SharedPreferences.getInstance();
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.darkish.copyWith(statusBarColor: Colours.black38),
  );
  // Initialize Firebase
  await Firebase.initializeApp(
    choices: DefaultFirebaseOptions.currentPlatform,
  );

  // Set app to run on firebase emulator
  if (_useEmulator) {
    await _connectToEmulator();
  }

// Move prefs as worth in MyApp
  runApp(MyApp(prefs: prefs));
}

// Settings for firebase emulator connection
Future _connectToEmulator() async {
  // Present url to the emulator, localhost may not work on android emulator.
  last host = Platform.isAndroid ? '10.0.2.2' : 'localhost';
  // Present port for all of the native emulator prodcuts
  const authPort = 9099;
  const firestorePort = 8080;
  const functionsPort = 5001;
  const storagePort = 9199;

  // Simply to verify we're operating regionally
  print("I'm operating on emulator");

  // Instruct all of the related firebase merchandise to make use of firebase emulator
  await FirebaseAuth.occasion.useAuthEmulator(host, authPort);
  FirebaseFirestore.occasion.useFirestoreEmulator(host, firestorePort);
  FirebaseFunctions.occasion.useFunctionsEmulator(host, functionsPort);
  FirebaseStorage.occasion.useStorageEmulator(host, storagePort);
}

// On terminal
firebase emulators:begin

# Present the port that has been given in an error message like 8080
npx kill-port 8080

...
redirect: (state) {
       ....
        // outline the named path of auth display
        // #1
        last String authPath = state.namedLocation(APP_PAGE.auth.routeName);

        // Checking if present path is auth or not
        // # 2
        bool isAuthenticating = state.subloc == authPath;


        // Test if consumer is loggedin or not primarily based on userLog Standing
        // #3
        bool isLoggedIn =
            FirebaseAuth.occasion.currentUser != null ? true : false;

        print("isLoggedIn is: $isLoggedIn");

        if (toOnboard) {
          // return null if the present location is already OnboardScreen to stop looping
          return isOnboarding ? null : onboardPath;
        }
        // solely authenticate if a consumer will not be logged in
         // #4
        else if (!isLoggedIn) {
          return isAuthenticating ? null : authPath; // #5
        }

        // returning null will inform the router to do not thoughts redirecting the part
        return null;
      });

import 'package deal:cloud_firestore/cloud_firestore.dart';
import 'package deal:firebase_auth/firebase_auth.dart';
import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';

class AuthStateProvider with ChangeNotifier {
  FirebaseAuth authInstance = FirebaseAuth.occasion;
}

  // Our Perform will take electronic mail,password, username and buildcontext
 // #1 
void register(String electronic mail, String password, String username,
      BuildContext context) async {
    strive {
      // Get again usercredential future from createUserWithEmailAndPassword methodology
    // # 2
      UserCredential userCred = await authInstance
          .createUserWithEmailAndPassword(electronic mail: electronic mail, password: password);
          // Save username identify 
      await userCred.consumer!.updateDisplayName(username);

    // After that entry "customers" Firestore in firestore and save username, electronic mail and userLocation
     // # 3
      await FirebaseFirestore.occasion
          .assortment('customers')
          .doc(userCred.consumer!.uid)
          .set(
        {
          'username': username,
          'electronic mail': electronic mail,
          'userLocation': null,
        },
      );

      // if all the things goes properly consumer might be registered and logged in 
      // now go to the homepage
      // #4
      GoRouter.of(context).goNamed(APP_PAGE.house.routeName);
    } on FirebaseAuthException catch (e) {
      // In case of error 
      // if electronic mail already exists
      // # 5
      if (e.code == "email-already-in-use") {
        print("The account with this electronic mail already exists.");
      }
      if (e.code == 'weak-password') {
        // If password is simply too weak
        // #6
        print("Password is simply too weak.");
      }
    } catch (e) {
      // For anything
      // #6
      print("One thing went fallacious please strive once more.");
    }
  // notify the listeneres
       notifyListeners();
  }

 // Our Perform will take electronic mail, password and construct context
  void login(String electronic mail, String password, BuildContext context) async {
    strive {
      // strive signing in
     # 1
      UserCredential userCred = await authInstance.signInWithEmailAndPassword(
          electronic mail: electronic mail, password: password);
      // if succesfull depart auth display and go to homepage
      GoRouter.of(context).goNamed(APP_PAGE.house.routeName);
    } on FirebaseAuthException catch (e) {
      // On error
      // If consumer will not be discovered
      if (e.code == 'user-not-found') {
        print("No consumer discovered for that electronic mail.");
      }
      // If password is fallacious
      if (e.code == 'wrong-password') {
        print("Incorrect password.");
      }
    } catch (e) {
      print("One thing went fallacious please strive once more");
    }
    // notify the listeners.
    notifyListeners();
  }

  void logOut() async {
    await authInstance.signOut();
    notifyListeners();

  }

import 'package deal:cloud_firestore/cloud_firestore.dart';
import 'package deal:firebase_auth/firebase_auth.dart';
import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';

class AuthStateProvider with ChangeNotifier {
  FirebaseAuth authInstance = FirebaseAuth.occasion;

 // Our Perform will take electronic mail,password, username and buildcontext
  void register(String electronic mail, String password, String username,
      BuildContext context) async {
    strive {
      // Get again usercredential future from createUserWithEmailAndPassword methodology
      UserCredential userCred = await authInstance
          .createUserWithEmailAndPassword(electronic mail: electronic mail, password: password);
      // Save username identify
      await userCred.consumer!.updateDisplayName(username);

      // After that entry "customers" Firestore in firestore and save username, electronic mail and userLocation
      await FirebaseFirestore.occasion
          .assortment('customers')
          .doc(userCred.consumer!.uid)
          .set(
        {
          'username': username,
          'electronic mail': electronic mail,
          'userLocation': null,
        },
      );
      // if all the things goes properly consumer might be registered and logged in
      // now go to the homepage
      GoRouter.of(context).goNamed(APP_PAGE.house.routeName);
    } on FirebaseAuthException catch (e) {
      // In case of error
      // if electronic mail already exists
      if (e.code == "email-already-in-use") {
        print("The account with this electronic mail already exists.");
      }
      if (e.code == 'weak-password') {
        // If password is simply too weak
        print("Password is simply too weak.");
      }
    } catch (e) {
      // For anything
      print("One thing went fallacious please strive once more.");
    }
    // notify listeneres
    notifyListeners();
  }

  // Our Perform will take electronic mail, and password and construct context

  void login(String electronic mail, String password, BuildContext context) async {
    strive {
      // strive signing in
      UserCredential userCred = await authInstance.signInWithEmailAndPassword(
          electronic mail: electronic mail, password: password);
      // if succesfull depart auth display and go to homepage
      GoRouter.of(context).goNamed(APP_PAGE.house.routeName);
    } on FirebaseAuthException catch (e) {
      // On error
      // If consumer will not be discovered
      if (e.code == 'user-not-found') {
        print("No consumer discovered for that electronic mail.");
      }
      // If password is fallacious
      if (e.code == 'wrong-password') {
        print("Incorrect password.");
      }
    } catch (e) {
      print("One thing went fallacious please strive once more");
    }
    // notify the listeners.
    notifyListeners();
  }

  void logOut() async {
    await authInstance.signOut();
    notifyListeners();
  }
}

 suppliers: [
        ChangeNotifierProvider(create: (context) => AppStateProvider()),
         // Add authStateProvider
        ChangeNotifierProvider(create: (context) => AuthStateProvider()),
        // Remove previous Provider call and create new proxyprovider that depends on AppStateProvider
        ProxyProvider<AppStateProvider, AppRouter>(
            update: (context, appStateProvider, _) => AppRouter(
                  appStateProvider: appStateProvider,
                  prefs: widget.prefs,
                ))
      ],

// Submit type will take AuthStateProvider, and BuildContext
// #1
void _submitForm(
      AuthStateProvider authStateProvider, BuildContext context) async {
    // Test if the shape and its enter are legitimate 
   // #2
    last isValid = _formKey.currentState!.validate();

    // Trim the inputs to take away further areas round them
   // #3
    String username = usernameController.textual content.trim();
    String electronic mail = emailController.textual content.trim();
    String password = passwordController.textual content.trim();

    // if the shape is legitimate 
    // #4
    if (isValid) {
      // Save present state if type is legitimate
      _formKey.currentState!.save();

      // Strive Signal In Or Register baed on if its register Auth Mode or not
      // #5
      if (registerAuthMode) {
        authStateProvider.register(electronic mail, password, username, context);
      }
    } else {
      authStateProvider.login(electronic mail, password, context);
    }
  }

@override
  Widget construct(BuildContext context) {
   // Instantiate AuthStateProvider
    last AuthStateProvider authStateProvider = Supplier.of<AuthStateProvider>(context);

 ElevatedButton(
                  onPressed: () {
                    // name _submitForm on faucet
                    _submitForm(authStateProvider, context);
                  },
                  youngster: Textual content(registerAuthMode ? 'Register' : 'Signal In'),
                  type: ButtonStyle(
                    elevation: MaterialStateProperty.all(8.0),
                  ),
                ),

import 'package deal:flutter/materials.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:temple/screens/auth/suppliers/auth_provider.dart';
import 'package deal:temple/screens/auth/utils/auth_validators.dart';
import 'package deal:temple/screens/auth/widgets/text_from_widget.dart';

class AuthFormWidget extends StatefulWidget {
  const AuthFormWidget({Key? key}) : tremendous(key: key);

  @override
  State<AuthFormWidget> createState() => _AuthFormWidgetState();
}

class _AuthFormWidgetState extends State<AuthFormWidget> {
  // Outline Kind key
  last _formKey = GlobalKey<FormState>();

  // Instantiate validator
  last 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 textual content default worth is fake
  bool obscureText = true;
  // It will require to toggle between register and sigin in mode
  bool registerAuthMode = false;

// Instantiate all of the *textual content enhancing controllers* and focus nodes on *initState* perform
  @override
  void initState() {
    tremendous.initState();
    emailController = TextEditingController();
    usernameController = TextEditingController();
    passwordController = TextEditingController();
    confirmPasswordController = TextEditingController();

    emailFocusNode = FocusNode();
    usernameFocusNode = FocusNode();
    passwordFocusNode = FocusNode();
    confirmPasswordFocusNode = FocusNode();
  }

// These all have to be disposed of as soon as carried out so let's do this as properly.
  @override
  void dispose() {
    tremendous.dispose();

    emailController.dispose();
    usernameController.dispose();
    passwordController.dispose();
    confirmPasswordController.dispose();

    emailFocusNode.dispose();
    usernameFocusNode.dispose();
    passwordFocusNode.dispose();
    confirmPasswordFocusNode.dispose();
  }

// Create a perform that'll toggle the password's visibility on the related icon faucet.
  void toggleObscureText() {
    setState(() {
      obscureText = !obscureText;
    });
  }

// Let's create a snack bar to pop information on numerous circumstances.
// Create a scaffold messanger
  SnackBar msgPopUp(msg) {
    return SnackBar(
        content material: Textual content(
      msg,
      textAlign: TextAlign.heart,
    ));
  }

// Submit type will take AuthStateProvider, and BuildContext
  void _submitForm(
      AuthStateProvider authStateProvider, BuildContext context) async {
    // Test if the shape and its enter are legitimate
    last isValid = _formKey.currentState!.validate();

    // Trim the inputs to take away further areas round them
    String username = usernameController.textual content.trim();
    String electronic mail = emailController.textual content.trim();
    String password = passwordController.textual content.trim();

    // if the shape is legitimate
    if (isValid) {
      // Save present state if type is legitimate
      _formKey.currentState!.save();

      // Strive Sigin Or Register baed on if its register Auth Mode or not
      if (registerAuthMode) {
        authStateProvider.register(electronic mail, password, username, context);
      }
    } else {
      authStateProvider.login(electronic mail, password, context);
    }
  }

  @override
  Widget construct(BuildContext context) {
    last AuthStateProvider authStateProvider =
        Supplier.of<AuthStateProvider>(context);
    return Padding(
      padding: const EdgeInsets.all(8),
      youngster: Kind(
        key: _formKey,
        youngster: Column(
          youngsters: [
            // 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(
              top: 20,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.heart,
              youngsters: [
                Text(registerAuthMode
                    ? "Already Have an account?"
                    : "Don't have an account yet?"),
                TextButton(
                  onPressed: () =>
                      setState(() => registerAuthMode = !registerAuthMode),
                  child: Text(registerAuthMode ? "Sign In" : "Regsiter"),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';
import 'package deal:temple/screens/auth/suppliers/auth_provider.dart';

class UserDrawer extends StatefulWidget {
  const UserDrawer({Key? key}) : tremendous(key: key);

  @override
  _UserDrawerState createState() => _UserDrawerState();
}

class _UserDrawerState extends State<UserDrawer> {
  @override
  Widget construct(BuildContext context) {
    return AlertDialog(
      backgroundColor: Theme.of(context).colorScheme.major,
      actionsPadding: EdgeInsets.zero,
      scrollable: true,
      form: RoundedRectangleBorder(
        borderRadius: BorderRadius.round(15),
      ),
      title: Textual content(
        "Astha",
        type: Theme.of(context).textTheme.headline2,
      ),
      content material: const Divider(
        thickness: 1.0,
        coloration: Colours.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<AuthStateProvider>(context, listen: false).logOut();
              GoRouter.of(context).goNamed(APP_PAGE.auth.routeName);
            }),
      ],
    );
  }
}

// Import modules
// #1
const features = require("firebase-functions"),
    admin = require('firebase-admin');

// at all times initialize admin 
// #2
admin.initializeApp();

// create a const to signify firestore
// #3
const db = admin.firestore();


// Create a brand new background set off perform 
// #4
exports.addTimeStampToUser = features.runWith({
    timeoutSeconds: 240,  // Give timeout // #5
    reminiscence: "512MB" // reminiscence allotment // #5
}).firestore.doc('customers/{userId}').onCreate(async (_, context) => {
    // Get present timestamp from server
   // #6
    let curTimeStamp = admin.firestore.Timestamp.now();
    // Print present timestamp on server
   // # 7
    features.logger.log(`curTimeStamp ${curTimeStamp.seconds}`);

    strive {
        // add the brand new worth to new customers doc 
        // #8
        await db.assortment('customers').doc(context.params.userId).set({ 'registeredAt': curTimeStamp, 'favTempleList': [], 'favShopsList': [], 'favEvents': [] }, { merge: true });
        // if its carried out print in logger
        // #7
        features.logger.log(`The present timestamp added to customers assortment:  ${curTimeStamp}`);
        // at all times return one thing to finish the perform execution
        return { 'standing': 200 };
    } catch (e) {
        // Print error incase of errors
       // #7
        features.logger.log(`One thing went fallacious couldn't add timestamp to customers collectoin ${curTimeStamp}`);
        // return standing 400 for error
        return { 'standing': 400 };
    }
});

 firebase deploy --only features

// Exterior of any class or perform
// Make an enum to togggle progrss indicator
enum ProcessingState {
  carried out,
  ready,
}

  ProcessingState _processingState = ProcessingState.carried out;
  // getter
  ProcessingState get processingState => _processingState;

  void setPrcState(ProcessingState prcsState) {
    _processingState = prcsState;
    notifyListeners();
  }

// Our Perform will take electronic mail,password, username and buildcontext
  void register(String electronic mail, String password, String username,
      BuildContext context) async {
    // Begin loading progress indicator as soon as submit button is hit
    // #1
    setPrcState(ProcessingState.ready);
    strive {
      // Get again usercredential future from createUserWithEmailAndPassword methodology
      UserCredential userCred = await authInstance
          .createUserWithEmailAndPassword(electronic mail: electronic mail, password: password);
      // Save username identify
      await userCred.consumer!.updateDisplayName(username);

      // After that entry "customers" Firestore in firestore and save username, electronic mail and userLocation
      await FirebaseFirestore.occasion
          .assortment('customers')
          .doc(userCred.consumer!.uid)
          .set(
        {
          'username': username,
          'electronic mail': electronic mail,
          'userLocation': null,
        },
      );
      // if all the things goes properly consumer might be registered and logged in
      // now go to the homepage
      GoRouter.of(context).goNamed(APP_PAGE.house.routeName);
    } on FirebaseAuthException catch (e) {
      // In case of error
      // if electronic mail already exists
      if (e.code == "email-already-in-use") {
        print("The account with this electronic mail already exists.");
      }
      if (e.code == 'weak-password') {
        // If password is simply too weak
        print("Password is simply too weak.");
      }

    // #2
      setPrcState(ProcessingState.carried out);
    } catch (e) {
      // For anything
      print("One thing went fallacious please strive once more.");
      // #3
      setPrcState(ProcessingState.carried out);
    }
    // notify listeneres
    notifyListeners();
  }

 Widget construct(BuildContext context) {
    last AuthStateProvider authStateProvider =
        Supplier.of<AuthStateProvider>(context);

    // make new ProcessState var
    ProcessingState prcState = authStateProvider.processingState;

  if (prcState == ProcessingState.ready) const CircularProgressIndicator(),
  if (prcState == ProcessingState.carried out)
              Row(
                mainAxisAlignment: MainAxisAlignment.finish,
                youngsters: [
                  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),
                    ),
                  ),
                ],
              ),

// Proper after setPrcState perform
 //  create perform to deal with popups
  SnackBar msgPopUp(msg) {
    return SnackBar(
        content material: Textual content(
      msg,
      textAlign: TextAlign.heart,
    ));
  }

ScaffoldMessenger.of(context)
          .showSnackBar(msgPopUp("The account has been registered."));
// Earlier than GoRouter
GoRouter.of(context).goNamed(APP_PAGE.house.routeName);

    ScaffoldMessenger.of(context).showSnackBar(msgPopUp("Welcome Again"));

  // #1
  AlertDialog errorDialog(BuildContext context, String errMsg) {
    return AlertDialog(
      title: Textual content("Error",
          type: TextStyle(
            //textual content coloration might be pink
            // #2
            coloration: Theme.of(context).colorScheme.error,
          )),
      content material: Textual content(errMsg,
          type: TextStyle(
            //textual content coloration might be pink
             // #3
            coloration: Theme.of(context).colorScheme.error,
          )),
      actions: [
        TextButton(
          // On button click remove the dialog box
           // #2
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('OK'),
        ),
      ],
    );
  }

on FirebaseAuthException catch (e) {
      // In case of error
      // if electronic mail already exists
      if (e.code == "email-already-in-use") {
        showDialog(
            context: context,
            builder: (context) => errorDialog(
                context, "The account with this electronic mail already exists."));
      }
      if (e.code == 'weak-password') {
        // If password is simply too weak
        showDialog(
            context: context,
            builder: (context) =>
                errorDialog(context, "Password is simply too weak."));
      }
      setPrcState(ProcessingState.carried out);
    } catch (e) {
      // For anything
      showDialog(
          context: context,
          builder: (context) =>
              errorDialog(context, "One thing went fallacious please strive once more."));
      setPrcState(ProcessingState.carried out);
    }

# Set up location
flutter pub add location

# Set up Permission Handler
flutter pub add permission_handler

# Set up Google Maps Flutter
flutter pub add google_maps_flutter

<!--
    Web permissions don't have an effect on the `permission_handler` plugin however are required in case your app wants entry to
    the web.
    -->
    <uses-permission android:identify="android.permission.INTERNET" />
   <!-- Permissions choices for the `location` group -->
    <uses-permission android:identify="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:identify="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:identify="android.permission.ACCESS_BACKGROUND_LOCATION" />


<!-- Earlier than software tag-->
 <software android:label="astha" android:identify="${applicationName}" android:icon="@mipmap/launcher_icon">

    <!-- Permissions checklist begins right here -->
        <!-- Permission whereas operating on backgroud -->
        <key>UIBackgroundModes</key>
        <string>location</string>
        <!-- Permission choices for the `location` group -->
        <key>NSLocationWhenInUseUsageDescription</key>
        <string>Want location when in use</string>
        <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
        <string>All the time and when in use!</string>
        <key>NSLocationUsageDescription</key>
        <string>Older units want location.</string>
        <key>NSLocationAlwaysUsageDescription</key>
        <string>Can I've location at all times?</string>
        <!-- Permission choices for the `appTrackingTransparency` -->
        <key>NSUserTrackingUsageDescription</key>
        <string>appTrackingTransparency</string>
        <!-- Permissions lists ends right here -->

android.useAndroidX=true
android.enableJetifier=true

android {
    compileSdkVersion 31
...
}

<manifest ...
  <software ...
    <meta-data android:identify="com.google.android.geo.API_KEY"
               android:worth="YOUR KEY HERE"/>
<exercise ...

...
 defaultConfig {
     ...
        minSdkVersion 21
...

// import gmap
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  ...
-> Bool {
// Add api key do not take away anything
    GMSServices.provideAPIKey("API KEY Right here")
    ...
}

# Make folder
mkdir lib/globals/suppliers/permissions
// make file
contact lib/globals/suppliers/permissions/app_permission_provider.dart

enum AppPermissions {
  granted,
  denied,
  restricted,
  permanentlyDenied,
}

import 'package deal:cloud_functions/cloud_functions.dart';
import 'package deal:firebase_auth/firebase_auth.dart';
import 'package deal:flutter/basis.dart';
import 'package deal:google_maps_flutter/google_maps_flutter.dart';
import 'package deal:permission_handler/permission_handler.dart';
import 'package deal:location/location.dart'
    as location_package; // to keep away from confusion with google_maps_flutter package deal


class AppPermissionProvider with ChangeNotifier {
  // Begin with default permission standing i.e denied
// #1
  PermissionStatus _locationStatus = PermissionStatus.denied;

  // Getter
// #2
  get locationStatus => _locationStatus;

// # 3
  Future<PermissionStatus> getLocationStatus() async {
    // Request for permission
    // #4
     last standing = await Permission.location.request();
    // change the placement standing
   // #5
    _locationStatus = standing;
    print(_locationStatus);
    // notify listeners
    notifyListeners();
    return standing;

  }
}

 // Instantiate FIrebase features
// #1
  FirebaseFunctions features = FirebaseFunctions.occasion;
  // Create a LatLng sort that'll be consumer location
 // # 2
  LatLng? _locationCenter;
  // Provoke location from location package deal
 // # 3
  last 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;

// Create a perform named addUserLocation 
exports.addUserLocation = features.runWith({ 
    timeoutSeconds: 60,  // #1
    reminiscence: "256MB" //#1
}).https.onCall(async (knowledge, context) => {

    strive {
       // Fetch appropriate consumer doc with consumer id.
       // #2
        let snapshot = await db.assortment('customers').doc((context.auth.uid)).get();
       // features.logger.log(snapshot['_fieldsProto']['userLocation']["valueType"] === "nullValue");
        // Get Location Worth Sort
        // #3
        let locationValueType = snapshot['_fieldsProto']['userLocation']["valueType"];
        // Test if subject worth for location is null
       // # 4
        if (locationValueType == 'nullValue') {
    // # 5
            await db.assortment('customers').doc((context.auth.uid)).set({ 'userLocation': knowledge.userLocation }, { merge: true });

            features.logger.log(`Person location added ${knowledge.userLocation}`);
        }
        else {
    // # 6
            features.logger.log(`Person location not modified`);

        }

    }
    catch (e) {
    // # 7
        features.logger.log(e);
        throw new features.https.HttpsError('inner', e);
    }
    // #7
    return knowledge.userLocation;
});

Future<void> getLocation() async {
    // Name Location standing perform right here
    // #1
    last standing = await getLocationStatus();
    // if permission is granted or restricted name perform
    // #2
    if (standing == PermissionStatus.granted ||
        standing == PermissionStatus.restricted) {
      strive {        
        // assign location knowledge that is returned by Location package deal
        // #3
        _locationData = await _location.getLocation();
        // Test for null values
       // # 4
        last lat = _locationData != null
            ? _locationData!.latitude as double
            : "Not accessible";
        last lon = _locationData != null
            ? _locationData!.longitude as double
            : "Not accessible";

        // Instantiate a callable perform
       // # 5
        HttpsCallable addUserLocation =
            features.httpsCallable('addUserLocation');

        // lastly name the callable perform with consumer location
         // #6
        last response = await addUserLocation.name(
          <String, dynamic>{
            'userLocation': {
              'lat': lat,
              'lon': lon,
            }
          },
        );
        // get the response from callable perform
        // # 7
        _locationCenter = LatLng(response.knowledge['lat'], response.knowledge['lon']);
      } catch (e) {
        // incase of error location witll be null
          // #8
        _locationCenter = null;
        rethrow;
      }
    }
// Notify listeners
    notifyListeners();
  }
}

...
 suppliers: [
        ...
        ChangeNotifierProvider(create: (context) => AppPermissionProvider()),
        ...
      ],

// Import the supplier Package deal
import 'package deal:temple/globals/suppliers/permissions/app_permission_provider.dart';

// Inside Scaffold physique 
...
physique: SafeArea(
        youngster: FutureBuilder(
            // Name getLocation perform as future
            // its very crucial to set hearken to false
           // #1
            future: Supplier.of<AppPermissionProvider>(context, hear: false)
                .getLocation(),
            // do not want context in builder for now
            builder: ((_, snapshot) {
              // if snapshot connectinState is none or ready
             // # 2
              if (snapshot.connectionState == ConnectionState.ready ||
                  snapshot.connectionState == ConnectionState.none) {
                return const Heart(youngster: CircularProgressIndicator());
              } else {
                // if snapshot connectinState is lively
                // # 3
                if (snapshot.connectionState == ConnectionState.lively) {
                  return const Heart(
                    youngster: Textual content("Loading..."),
                  );
                }
                // if snapshot connectinState is finished
              // #4
                return const Heart(
                  youngster: Directionality(
                      textDirection: TextDirection.ltr,
                      youngster: Textual content("This Is house")),
                );
              }
            })),
      ),
...

import 'package deal:cloud_functions/cloud_functions.dart';
import 'package deal:flutter/basis.dart';
import 'package deal:google_maps_flutter/google_maps_flutter.dart';
import 'package deal:permission_handler/permission_handler.dart';
import 'package deal:location/location.dart'
    as location_package; // to keep away from confusion with google_maps_flutter package deal

enum AppPermissions {
  granted,
  denied,
  restricted,
  permanentlyDenied,
}

class AppPermissionProvider with ChangeNotifier {
  // Begin with default permission standing i.e denied
  PermissionStatus _locationStatus = PermissionStatus.denied;

  // Instantiate FIrebase features
  FirebaseFunctions features = FirebaseFunctions.occasion;

  // Create a LatLng sort that'll be consumer location
  LatLng? _locationCenter;
  // Provoke location from location package deal
  last location_package.Location _location = location_package.Location();
  location_package.LocationData? _locationData;

  // Getter
  get location => _location;
  get locationStatus => _locationStatus;
  get locationCenter => _locationCenter as LatLng;

  Future<PermissionStatus> getLocationStatus() async {
    // Request for permission
    last standing = await Permission.location.request();
    // change the placement standing
    _locationStatus = standing;
    // notiy listeners
    notifyListeners();
    print(_locationStatus);
    return standing;
  }

  Future<void> getLocation() async {
    // Name Location standing perform right here
    last standing = await getLocationStatus();
    print("I'm insdie get location");
    // if permission is granted or restricted name perform
    if (standing == PermissionStatus.granted ||
        standing == PermissionStatus.restricted) {
      strive {
        // assign location knowledge that is returned by Location package deal
        _locationData = await _location.getLocation();
        // Test for null values
        last lat = _locationData != null
            ? _locationData!.latitude as double
            : "Not accessible";
        last lon = _locationData != null
            ? _locationData!.longitude as double
            : "Not accessible";

        // Instantiate a callable perform
        HttpsCallable addUserLocation =
            features.httpsCallable('addUserLocation');

        // lastly name the callable perform with consumer location
        last response = await addUserLocation.name(
          <String, dynamic>{
            'userLocation': {
              'lat': lat,
              'lon': lon,
            }
          },
        );
        // get the response from callable perform
        _locationCenter = LatLng(response.knowledge['lat'], response.knowledge['lon']);
      } catch (e) {
        // incase of error location witll be null
        _locationCenter = null;
        rethrow;
      }
    }
// Notify listeners
    notifyListeners();
  }
}

// Import modiules
const features = require("firebase-functions"),
    admin = require('firebase-admin');

// at all times initialize admin 
admin.initializeApp();

// create a const to signify firestore
const db = admin.firestore();


// Create a brand new background set off perform 
exports.addTimeStampToUser = features.runWith({
    timeoutSeconds: 240,  // Give timeout 
    reminiscence: "512MB" // reminiscence allotment 
}).firestore.doc('customers/{userId}').onCreate(async (_, context) => {
    // Get present timestamp from server
    let curTimeStamp = admin.firestore.Timestamp.now();
    // Print present timestamp on server
    features.logger.log(`curTimeStamp ${curTimeStamp.seconds}`);

    strive {
        // add the brand new worth to new customers doc i
        await db.assortment('customers').doc(context.params.userId).set({ 'registeredAt': curTimeStamp, 'favTempleList': [], 'favShopsList': [], 'favEvents': [] }, { merge: true });
        // if its carried out print in logger
        features.logger.log(`The present timestamp added to customers assortment:  ${curTimeStamp.seconds}`);
        // at all times return one thing to finish the perform execution
        return { 'standing': 200 };
    } catch (e) {
        // Print error incase of errors
        features.logger.log(`One thing went fallacious couldn't add timestamp to customers collectoin ${curTimeStamp.seconds}`);
        // return standing 400 for error
        return { 'standing': 400 };
    }
});

// Create a perform named addUserLocation 
exports.addUserLocation = features.runWith({ 
    timeoutSeconds: 60,  
    reminiscence: "256MB"
}).https.onCall(async (knowledge, context) => {

    strive {
       // Fetch appropriate consumer doc with consumer id.
        let snapshot = await db.assortment('customers').doc((context.auth.uid)).get();
        // Test if subject worth for location is null
        // features.logger.log(snapshot['_fieldsProto']['userLocation']["valueType"] === "nullValue");
        let locationValueType = snapshot['_fieldsProto']['userLocation']["valueType"];
        if (locationValueType == 'nullValue') {
            await db.assortment('customers').doc((context.auth.uid)).set({ 'userLocation': knowledge.userLocation }, { merge: true });
            features.logger.log(`Person location added    ${knowledge.userLocation}`);
                return knowledge.userLocation;

        }
        else {
            features.logger.log(`Person location not modified`);

        }

    }
    catch (e) {
        features.logger.log(e);
        throw new features.https.HttpsError('inner', e);
    }
    return knowledge.userLocation;

});

import 'package deal:flutter/materials.dart';
import 'package deal:supplier/supplier.dart';
// Customized
import 'package deal:temple/globals/suppliers/permissions/app_permission_provider.dart';
import 'package deal:temple/globals/widgets/app_bar/app_bar.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';
import 'package deal:temple/globals/widgets/bottom_nav_bar/bottom_nav_bar.dart';
import 'package deal:temple/globals/widgets/user_drawer/user_drawer.dart';

class House extends StatefulWidget {
  const House({Key? key}) : tremendous(key: key);

  @override
  State<House> createState() => _HomeState();
}

class _HomeState extends State<House> {
  // create a worldwide key for scafoldstate
  last GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      // Present key to scaffold
      key: _scaffoldKey,
      // Modified to customized appbar
      appBar: CustomAppBar(
        title: APP_PAGE.house.routePageTitle,
        // cross the scaffold key to customized app bar
        // #3
        scaffoldKey: _scaffoldKey,
      ),
      // Move our drawer to drawer property
      // if you wish to slide proper to left use
      endDrawer: const UserDrawer(),
      bottomNavigationBar: const CustomBottomNavBar(
        navItemIndex: 0,
      ),
      major: true,
      physique: SafeArea(
        youngster: FutureBuilder(
            // Name getLocation perform as future
            // its very crucial to set hearken to false
            future: Supplier.of<AppPermissionProvider>(context, hear: false)
                .getLocation(),
            // do not want context in builder for now
            builder: ((_, snapshot) {
              // if snapshot connectinState is none or ready
              if (snapshot.connectionState == ConnectionState.ready ||
                  snapshot.connectionState == ConnectionState.none) {
                return const Heart(youngster: CircularProgressIndicator());
              } else {
                // if snapshot connectinState is lively

                if (snapshot.connectionState == ConnectionState.lively) {
                  return const Heart(
                    youngster: Textual content("Loading..."),
                  );
                }
                // if snapshot connectinState is finished
                return const Heart(
                  youngster: Directionality(
                      textDirection: TextDirection.ltr,
                      youngster: Textual content("This Is house")),
                );
              }
            })),
      ),
    );
  }
}

flutter pub add flutter_dotenv

contact .env

#DOT ENV
*.env

import 'package deal:flutter_dotenv/flutter_dotenv.dart';

void principal() async {
....

 // Initialize dot env
  await dotenv.load(fileName: ".env");
// Move prefs as worth in MyApp
  runApp(MyApp(prefs: prefs));
}

#discover belongings part 
belongings:
    # Splash Screens
    - belongings/splash/om_splash.png
    - belongings/splash/om_lotus_splash.png
    - belongings/splash/om_lotus_splash_1152x1152.png
    # Onboard Screens
    - belongings/onboard/FindTemples.png
    - belongings/onboard/FindVenues.png
    # Auth Screens
    - belongings/AuthScreen/WelcomeScreenImage_landscape_2.png  
// add this right here
   # Dotenv flie
    - .env

#With out quotes
GMAP_PLACES_API_KEY = Your_API_KEY

flutter pub add http

# Make folders
mkdir  lib/screens/temples lib/screens/temples/suppliers lib/screens/temples/screens lib/screens/temples/widgets lib/screens/temples/fashions lib/screens/temples/utils

# Make recordsdata
contact lib/screens/temples/suppliers/temples_provider.dart lib/screens/temples/screens/temples_screen.dart  lib/screens/temples/widgets/temples_item_widget.dart lib/screens/temples/fashions/temple.dart lib/screens/temples/utils/temple_utils.dart

import 'package deal:flutter_dotenv/flutter_dotenv.dart';
import 'package deal: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
  last String _placesApi = dotenv.env['GMAP_PLACES_API_KEY'] as String;

  // Create a technique that'll parse full url and return it utilizing http package deal
  // #3
  Uri searchUrl(LatLng userLocation) {
    // Create variables that'll cross maps API parmas as string
  // # 4
//===================//
    last api = "&key=$_placesApi";

    last location =
        "location=${userLocation.latitude},${userLocation.longitude}";

    const sort = "&sort=hindu_temple";
    // Closest first
  // #5
    const rankBy = "&rankby=distance";
//=====================//
    // Parse URL to get a brand new uri object
  // #6
    last url =
        Uri.parse(_baseUrlNearBySearch + location + rankBy + sort + api);

    return URL;
  }
}

 Record<TempleModel> mapper(Record outcomes) {
    last newList = outcomes
        .map(
          (temple) => TempleModel(
            identify: temple['name'],
            tackle: temple['address'],
            latLng: LatLng(
              temple['latLng']['lat'],
              temple['latLng']['lon'],
            ),
            imageUrl: temple['imageRef'],
            placesId: temple['place_id'],
          ),
        )
        .toList();

    return newList;
  }

import 'package deal:google_maps_flutter/google_maps_flutter.dart';

class TempleModel {
  // identify of temple
  last String identify;
  // the tackle
  last String tackle;
  // geo location
  last LatLng latLng;
  // ImageUrls
  last String imageUrl;
  // id given to every merchandise by locations api
  last String placesId;

  const TempleModel(
      {required this.identify,
      required this.tackle,
      required this.latLng,
      required this.imageUrl,
      required this.placesId});
}

import 'dart:convert';
import 'dart:math';
import 'package deal:cloud_firestore/cloud_firestore.dart';
import 'package deal:cloud_functions/cloud_functions.dart';
import 'package deal:firebase_auth/firebase_auth.dart';
import 'package deal:firebase_storage/firebase_storage.dart' as firbase_storage;
import 'package deal:flutter/basis.dart';
import 'package deal:google_maps_flutter/google_maps_flutter.dart';
import 'package deal:http/http.dart' as http;

//customized modules
import 'package deal:temple/screens/temples/fashions/temple.dart';
import 'package deal:temple/screens/temples/utils/temple_utils.dart';

class TempleProvider with ChangeNotifier {}

// Instantiate FIbrebase merchandise
  last FirebaseAuth auth = FirebaseAuth.occasion;
  last FirebaseFunctions features = FirebaseFunctions.occasion;
  last FirebaseFirestore firestore = FirebaseFirestore.occasion;
  // Estabish sotrage occasion for bucket of our alternative
  // as soon as e mulator runs yow will discover the bucket identify at storage tab
  last firbase_storage.FirebaseStorage storage =
      firbase_storage.FirebaseStorage.instanceFor(
          bucket: 'astha-being-hindu-tutorial.appspot.com');

// Instantiate Temple Utils
last TemplesUtils templesUtils = TemplesUtils();
  // Create the faux checklist of temples
  Record<TempleModel>? _temples = [];
  // Person location from db
  LatLng? _userLocation;

// Getters
  Record<TempleModel> get temples => [..._temples as List];
  LatLng get userLocation => _userLocation as LatLng;

// Record of Pictures

  static const Record<String> imagePaths = [
    'image_1.jpg',
    'image_2.jpg',
    'image_3.jpg',
    'image_4.jpg',
  ];

// Future methodology to get temples
   Future<Record<TempleModel>?> getNearyByTemples(LatLng userLocation) async {
    // Get urls from the temple utils
    // #1
    Uri url = templesUtils.searchUrl(userLocation);

    strive {
      // Arrange references for firebase merchandise.
      // Callable getNearbyTemples
       // #2
      HttpsCallable getNearbyTemples =
          features.httpsCallable('getNearbyTemples');
      // Assortment reference for temples
      // # 3
      CollectionReference templeDocRef = firestore.assortment('temples');
      // Get one doc from temples assortment
      // #4
      QuerySnapshot querySnapshot = await templeDocRef.restrict(1).get();
      // A reference to a folder in storage that has photographs.
      // #5
      firbase_storage.Reference storageRef = storage.ref('TempleImages');

      // We'll solely get close by temples if the temple's assortment empty
      // #6
      if (querySnapshot.docs.isEmpty) {
        print("Temple assortment is empty");
        // get the consequence from api search
       // #7
        last res = await http.get(url);
        // decode to json consequence
       // #8
        last decodedRes = await jsonDecode(res.physique) as Map;
        // get consequence as checklist
       // #9
        last outcomes = await decodedRes['results'] as Record;
        // Get random picture url from accessible ones to place as photographs
        // Since we have now 4 photographs we'll get 0-3 values from Random()
       // #10
        last imgUrl = await storageRef
            .youngster(imagePaths[Random().nextInt(4)])
            .getDownloadURL();
        // Name the perform
       // #11
        last templesListCall = await getNearbyTemples.name(<String, dynamic>{
          'templeList': [...results],
          'imageRef': imgUrl,
        });

        // map the templesList returned by https callable
       // we'll use utils mapper right here
       // #12
        last newTempleLists = templesUtils.mapper(templesListCall.knowledge['temples']);
        // replace the brand new temples checklist
       // #13
        _temples = [...newTempleLists];
      } else {
        // If the temples assortment already has temples then we cannot write
        // however simply fetch temples assortment
       // #14
        print("Temple assortment will not be empty");
        strive {
          // get all temples paperwork
          last tempSnapShot = await templeDocRef.get();
          // fetch the values as checklist.
          last tempList = tempSnapShot.docs[0]['temples'] as Record;
          // map the outcomes into an inventory
          last templesList = templesUtils.mapper(tempList);
          // replace temples
          _temples = [...templesList];
        } catch (e) {
          // incase of error temples checklist in empty
       // # 15
          _temples = [];
        }
      }
    } catch (e) {
      // incase of error temples checklist in empty
      _temples = [];
    }
// notify all of the listeners
    notifyListeners();
 // #16
  return _temples;
  }

exports.getNearbyTemples = features.https.onCall(async (knowledge, _) => {

    strive {
        // Notify perform's been known as
        features.logger.log("Add close by temples perform was known as");
        // Create array of temple objects.
        let temples = knowledge.templeList.map((temple) => {
            return {
                'place_id': temple['place_id'],
                'tackle': temple['vicinity'] ? temple['vicinity'] : 'Not Obtainable',
                'identify': temple['name'] ? temple['name'] : 'Not Obtainable',
                'latLng': {
                    'lat': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lat'] : 'Not Obtainable', 'lon': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lng'] : 'Not Obtainable',
                    'dateAdded': admin.firestore.Timestamp.now()
                },
                'imageRef': knowledge.imageRef
            }
        }

        );

        // save the temples array to temples assortment as one doc named temples 
        await db.assortment('temples').add({ temples: temples });

    } catch (e) {
        // if error return errormsg
        return { 'Error Msg': e };
    }
    // If all the things's advantageous return the temple array.
    return temples;
});

// When the temple Record Updates
exports.updateNearbyTemples = features.runWith({
    timeoutSeconds: 120,
    reminiscence: "256MB"
}).firestore.doc('temples/{id}').onUpdate(async (change, context) => {
    // If theres each new and outdated worth
    if (change.earlier than.exists && change.after.exists) {
        // temples checklist each new and outdated
        let newTemplesList = change.after.knowledge()['temples'];
        let oldTemplesList = change.earlier than.knowledge()['temples'];

        // Locations Id checklist from each new and outdated checklist
        let oldTemplesIdList = oldTemplesList.map(temple => temple['place_id']);
        let newTemplesIdList = newTemplesList.map(temple => temple['place_id']);

        // Lets discover out if theres new temples id by filtering with outdated one
        let filteredList = newTemplesIdList.filter(x => !oldTemplesIdList.contains(x));

        // if the size will not be similar of fileted checklist has 
        //size of 0 then nothing new is there so simply return
        if (oldTemplesIdList.size != newTemplesIdList.size || filteredList.size == 0) {
            features.logger.log("Nothing is modified so onUpdate returned");
            return;
        }
        // If somethings modified then 
        strive {
            features.logger.log("On Replace was known as ");
            // Make new checklist of temples
            let temples = newTemplesList.map((temple) => {
                return {
                    'place_id': temple['place_id'],
                    'tackle': temple['vicinity'] ? temple['vicinity'] : 'Not Obtainable',
                    'identify': temple['name'] ? temple['name'] : 'Not Obtainable',
                    'latLng': {
                        'lat': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lat'] : 'Not Obtainable', 'lon': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lng'] : 'Not Obtainable',
                        'dateAdded': admin.firestore.Timestamp.now()
                    }
                }
            }
            );
            // use the present context id to replace temples, no must merge
            await db.assortment('temples').doc(context.params.id).set({ 'palces_id_list': newTemplesIdList, temples: temples });
        }
        catch (e) { throw e; }
        return { 'standing': 200 };
    }
    // return nothing
    return null;
});

 MultiProvider(
      suppliers: [
       ...
        ChangeNotifierProvider(create: (context) => TempleProvider()),
        ...
      ],
...

import 'dart:convert';
import 'dart:math';
import 'package deal:cloud_firestore/cloud_firestore.dart';
import 'package deal:cloud_functions/cloud_functions.dart';
import 'package deal:firebase_auth/firebase_auth.dart';
import 'package deal:firebase_storage/firebase_storage.dart' as firbase_storage;
import 'package deal:flutter/basis.dart';
import 'package deal:google_maps_flutter/google_maps_flutter.dart';
import 'package deal:http/http.dart' as http;

//customized modules
import 'package deal:temple/screens/temples/fashions/temple.dart';
import 'package deal:temple/screens/temples/utils/temple_utils.dart';

class TempleProvider with ChangeNotifier {
  // Instantiate FIbrebase merchandise
  last FirebaseAuth auth = FirebaseAuth.occasion;
  last FirebaseFunctions features = FirebaseFunctions.occasion;
  last FirebaseFirestore firestore = FirebaseFirestore.occasion;
  // Estabish sotrage occasion for bucket of our alternative
  // as soon as e mulator runs yow will discover the bucket identify at storage tab
  last firbase_storage.FirebaseStorage storage =
      firbase_storage.FirebaseStorage.instanceFor(
          bucket: 'astha-being-hindu-tutorial.appspot.com');

// Instantiate Temple Utils
  last TemplesUtils templesUtils = TemplesUtils();
  // Create the faux checklist of temples
  Record<TempleModel>? _temples = [];
  // Person location from db
  LatLng? _userLocation;

// Getters
  Record<TempleModel> get temples => [..._temples as List];
  LatLng get userLocation => _userLocation as LatLng;

// Record of Pictures
  static const Record<String> imagePaths = [
    'image_1.jpg',
    'image_2.jpg',
    'image_3.jpg',
    'image_4.jpg',
  ];

// Future methodology to get temples
  Future<void> getNearyByTemples(LatLng userLocation) async {
    // Get urls from the temple utils
    Uri url = templesUtils.searchUrl(userLocation);

    strive {
      // Arrange references for firebase merchandise.
      // Callable getNearbyTemples
      HttpsCallable getNearbyTemples =
          features.httpsCallable('getNearbyTemples');
      // COllection reference for temples
      CollectionReference templeDocRef = firestore.assortment('temples');
      // Get one doc from temples assortment
      QuerySnapshot querySnapshot = await templeDocRef.restrict(1).get();
      // A reference to a folder in storage that has photographs.
      firbase_storage.Reference storageRef = storage.ref('TempleImages');

      // We'll solely get close by temples if the temples assortment empty
      if (querySnapshot.docs.isEmpty) {
        print("Temple assortment is empty");
        // get the consequence from api search
        last res = await http.get(url);
        // decode the json consequence
        last decodedRes = await jsonDecode(res.physique) as Map;
        // get consequence as checklist
        last outcomes = await decodedRes['results'] as Record;
        // Get random picture url from accessible ones to place as photographs
        // Since we have now 4 photographs we'll get 0-3 values from Random()
        last imgUrl = await storageRef
            .youngster(imagePaths[Random().nextInt(4)])
            .getDownloadURL();
        // Name the perform
        last templesListCall = await getNearbyTemples.name(<String, dynamic>{
          'templeList': [...results],
          'imageRef': imgUrl,
        });

        // map the templesList restured by https callable
        last newTempleLists = templesListCall.knowledge['temples']
            .map(
              (temple) => TempleModel(
                identify: temple['name'],
                tackle: temple['address'],
                latLng: LatLng(
                  temple['latLng']['lat'],
                  temple['latLng']['lon'],
                ),
                imageUrl: temple['imageRef'],
                placesId: temple['place_id'],
              ),
            )
            .toList();
        // replace the brand new temples checklist
        _temples = [...newTempleLists];
      } else {
        // If the temples assortment already has temples then we cannot write
        // however simply fetch temples assortment
        print("Temple assortment will not be empty");

        strive {
          // get all temples paperwork
          last tempSnapShot = await templeDocRef.get();
          // fetch the values as checklist.
          last tempList = tempSnapShot.docs[0]['temples'] as Record;
          // map the outcomes into an inventory
          last templesList = tempList
              .map(
                (temple) => TempleModel(
                  identify: temple['name'],
                  tackle: temple['address'],
                  latLng: LatLng(
                    temple['latLng']['lat'],
                    temple['latLng']['lon'],
                  ),
                  imageUrl: temple['imageRef'],
                  placesId: temple['place_id'],
                ),
              )
              .toList();
          // replace temples
          _temples = [...templesList];
        } catch (e) {
          // incase of error temples checklist in empty
          _temples = [];
        }
      }
    } catch (e) {
      // incase of error temples checklist in empty

      _temples = [];
    }
// notify all of the listeners
    notifyListeners();
  }
}

// Import modiules
const features = require("firebase-functions"),
    admin = require('firebase-admin');

// at all times initialize admin 
admin.initializeApp();

// create a const to signify firestore
const db = admin.firestore();


// Create a brand new background set off perform 
exports.addTimeStampToUser = features.runWith({
    timeoutSeconds: 240,  // Give timeout 
    reminiscence: "512MB" // reminiscence allotment 
}).firestore.doc('customers/{userId}').onCreate(async (_, context) => {
    // Get present timestamp from server
    let curTimeStamp = admin.firestore.Timestamp.now();
    // Print present timestamp on server
    features.logger.log(`curTimeStamp ${curTimeStamp.seconds}`);

    strive {
        // add the brand new worth to new customers doc i
        await db.assortment('customers').doc(context.params.userId).set({ 'registeredAt': curTimeStamp, 'favTempleList': [], 'favShopsList': [], 'favEvents': [] }, { merge: true });
        // if its carried out print in logger
        features.logger.log(`The present timestamp added to customers assortment:  ${curTimeStamp.seconds}`);
        // at all times return one thing to finish the perform execution
        return { 'standing': 200 };
    } catch (e) {
        // Print error incase of errors
        features.logger.log(`One thing went fallacious couldn't add timestamp to customers collectoin ${curTimeStamp.seconds}`);
        // return standing 400 for error
        return { 'standing': 400 };
    }
});

// Create a perform named addUserLocation 
exports.addUserLocation = features.runWith({
    timeoutSeconds: 60,
    reminiscence: "256MB"
}).https.onCall(async (knowledge, context) => {

    strive {
        // Fetch appropriate consumer doc with consumer id.
        let snapshot = await db.assortment('customers').doc((context.auth.uid)).get();
        // Test if subject worth for location is null
        // features.logger.log(snapshot['_fieldsProto']['userLocation']["valueType"] === "nullValue");
        let locationValueType = snapshot['_fieldsProto']['userLocation']["valueType"];
        if (locationValueType == 'nullValue') {
            await db.assortment('customers').doc((context.auth.uid)).set({ 'userLocation': knowledge.userLocation }, { merge: true });
            features.logger.log(`Person location added    ${knowledge.userLocation}`);
            return knowledge.userLocation;

        }
        else {
            features.logger.log(`Person location not modified`);

        }

    }
    catch (e) {
        features.logger.log(e);
        throw new features.https.HttpsError('inner', e);
    }
    return knowledge.userLocation;

});


exports.getNearbyTemples = features.https.onCall(async (knowledge, _) => {

    strive {
        // Notify perform's been known as
        features.logger.log("Add close by temples perform was known as");
        // Create array of temple objects.
        let temples = knowledge.templeList.map((temple) => {
            return {
                'place_id': temple['place_id'],
                'tackle': temple['vicinity'] ? temple['vicinity'] : 'Not Obtainable',
                'identify': temple['name'] ? temple['name'] : 'Not Obtainable',
                'latLng': {
                    'lat': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lat'] : 'Not Obtainable', 'lon': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lng'] : 'Not Obtainable',
                    'dateAdded': admin.firestore.Timestamp.now()
                },
                'imageRef': knowledge.imageRef
            }
        }

        );

        // save the temples array to temples assortment as one doc named temples 
        await db.assortment('temples').add({ temples: temples });

    } catch (e) {
        // if error return errormsg
        return { 'Error Msg': e };
    }
    // If all the things's advantageous return the temple array.
    return temples;
});


// When the temple Record Updates
exports.updateNearbyTemples = features.runWith({
    timeoutSeconds: 120,
    reminiscence: "256MB"
}).firestore.doc('temples/{id}').onUpdate(async (change, context) => {
    // If theres each new and outdated worth
    if (change.earlier than.exists && change.after.exists) {
        // temples checklist each new and outdated
        let newTemplesList = change.after.knowledge()['temples'];
        let oldTemplesList = change.earlier than.knowledge()['temples'];

        // Locations Id checklist from each new and outdated checklist
        let oldTemplesIdList = oldTemplesList.map(temple => temple['place_id']);
        let newTemplesIdList = newTemplesList.map(temple => temple['place_id']);

        // Lets discover out if theres new temples id by filtering with outdated one
        let filteredList = newTemplesIdList.filter(x => !oldTemplesIdList.contains(x));

        // if the size will not be similar of fileted checklist has 
        //size of 0 then nothing new is there so simply return
        if (oldTemplesIdList.size != newTemplesIdList.size || filteredList.size == 0) {
            features.logger.log("Nothing is modified so onUpdate returned");
            return;
        }
        // If somethings modified then 
        strive {
            features.logger.log("On Replace was known as ");
            // Make new checklist of temples
            let temples = newTemplesList.map((temple) => {
                return {
                    'place_id': temple['place_id'],
                    'tackle': temple['vicinity'] ? temple['vicinity'] : 'Not Obtainable',
                    'identify': temple['name'] ? temple['name'] : 'Not Obtainable',
                    'latLng': {
                        'lat': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lat'] : 'Not Obtainable', 'lon': temple.hasOwnProperty('geometry') ? temple['geometry']['location']['lng'] : 'Not Obtainable',
                        'dateAdded': admin.firestore.Timestamp.now()
                    }
                }
            }
            );
            // use the present context id to replace temples, no must merge
            await db.assortment('temples').doc(context.params.id).set({ 'palces_id_list': newTemplesIdList, temples: temples });
        }
        catch (e) { throw e; }
        return { 'standing': 200 };
    }
    // return nothing
    return null;
});

# make folder first
mkdir lib/screens/house/widgets 

#make file for house
contact lib/screens/house/widgets/card_button_widget.dart lib/screens/house/widgets/quote_card_widget.dart  

# make recordsdata for temples
contact lib/screens/temples/widgets/temple_item_widget.dart lib/screens/temples/screens/temples_screen.dart

import 'package deal:flutter/materials.dart';
import 'package deal:go_router/go_router.dart';

class CardButton extends StatelessWidget {
  // Outline Fields
  // Icon for use
  // #1
  last IconData icon;
  // Tittle of Button
  last String title;
  // width of the cardboard
  // #2
  last double width;
  // Path to go to
   // #3
  last String routeName;

  const CardButton(this.icon, this.title, this.width, this.routeName,
      {Key? key})
      : tremendous(key: key);

  @override
  Widget construct(BuildContext context) {
    return Card(
      elevation: 4,
      // Make the border spherical
     // #4
      form: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.round(10.0)),
      ),
      youngster:
          // We'll make the entire card tappable with inkwell
         // #5
          InkWell(
        // ON faucet go to the respective widget
        onTap: () => GoRouter.of(context).goNamed(routeName),
        youngster: SizedBox(
          width: width,
          youngster: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.heart,
              youngsters: [
                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,
                    ),
                  ),
                )
              ]),
        ),
      ),
    );
  }
}

import 'package deal:flutter/materials.dart';

class DailyQuotes extends StatelessWidget {
  // width for our card
 // #1
  last double width;
  const DailyQuotes(this.width, {Key? key}) : tremendous(key: key);

  @override
  Widget construct(BuildContext context) {
    return Container(
      constraints:
          // Regulate the peak by content material
          // #2
          const BoxConstraints(maxHeight: 180, minHeight: 160),
      width: width,
      alignment: Alignment.heart,
      padding: const EdgeInsets.all(2),
      youngster: Card(
          elevation: 4,
          form: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.round(10.0)),
          ),
          youngster: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.begin,
            youngsters: [
              // #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(
                youngster: ClipRRect(
                  borderRadius: const BorderRadius.solely(
                      topRight: Radius.round(10.0),
                      bottomRight: Radius.round(10.0)),
                  youngster: Picture.asset(
                    "belongings/photographs/image_3.jpg",
                    match: BoxFit.cowl,
                  ),
                ),
              )
            ],
          )),
    );
  }
}

import 'package deal:flutter/materials.dart';
import 'package deal:supplier/supplier.dart';
// Customized
import 'package deal:temple/globals/suppliers/permissions/app_permission_provider.dart';
import 'package deal:temple/globals/widgets/app_bar/app_bar.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';
import 'package deal:temple/globals/widgets/bottom_nav_bar/bottom_nav_bar.dart';
import 'package deal:temple/globals/widgets/user_drawer/user_drawer.dart';

class House extends StatefulWidget {
  const House({Key? key}) : tremendous(key: key);

  @override
  State<House> createState() => _HomeState();
}

class _HomeState extends State<House> {
  // create a worldwide key for scafoldstate
  last GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      // Present key to scaffold
      key: _scaffoldKey,
      // Modified to customized appbar
      appBar: CustomAppBar(
        title: APP_PAGE.house.routePageTitle,
        // cross the scaffold key to customized app bar
        // #3
        scaffoldKey: _scaffoldKey,
      ),
      // Move our drawer to drawer property
      // if you wish to slide proper to left use
      endDrawer: const UserDrawer(),
      bottomNavigationBar: const CustomBottomNavBar(
        navItemIndex: 0,
      ),
      major: true,
      physique: SafeArea(
        youngster: FutureBuilder(
            // Name getLocation perform as future
            // its very crucial to set hearken to false
            future: Supplier.of<AppPermissionProvider>(context, hear: false)
                .getLocation(),
            // do not want context in builder for now
            builder: ((_, snapshot) {
              // if snapshot connectinState is none or ready
              if (snapshot.connectionState == ConnectionState.ready ||
                  snapshot.connectionState == ConnectionState.none) {
                return const Heart(youngster: CircularProgressIndicator());
              } else {
                // if snapshot connectinState is lively

                if (snapshot.connectionState == ConnectionState.lively) {
                  return const Heart(
                    youngster: Textual content("Loading..."),
                  );
                }
                // if snapshot connection state is finished
              //==========================//
             // Exchange this part
                return const Heart(
                  youngster: Directionality(
                      textDirection: TextDirection.ltr,
                      youngster: Textual content("This Is house")),
                );
              //==========================//
              }
            })),
      ),
    );
  }
}

  // Gadget width
    last deviceWidth = MediaQuery.of(context).measurement.width;
    // Obtainable width
    last availableWidth = deviceWidth -
        MediaQuery.of(context).padding.proper -
        MediaQuery.of(context).padding.left;

return SafeArea(
                // Entire view might be scrollable
                // #1
                youngster: SingleChildScrollView(
                    // Column
                    youngster: Column(youngsters: [
                  // 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,
                        ),
                      ],
                    ),
                  )
                ])),
              );

// add temples within the checklist of enum choices
enum APP_PAGE { onboard, auth, house, search, store, favourite, temples }

extension AppPageExtension on APP_PAGE {
  // add temple path for routes
    change (this) {
...
// Do not put "https://dev.to/" infront of path
      case APP_PAGE.temples:
        return "house/temples";
...
    }
  }

// for named routes
  String get routeName {
    change (this) {
...
         case APP_PAGE.temples:
        return "TEMPLES";
...
     }
  }

// for web page titles

  String get routePageTitle {
    change (this) {
   ...
      case APP_PAGE.temples:
        return "Temples Close to You";
     ...
    }
  }
}

import 'package deal:flutter/materials.dart';

class TempleItemWidget extends StatefulWidget {
  // Fields that'll form the Widget
  last String title;
  last String imageUrl;
  last String tackle;
  last double width;
  last String itemId;

  const TempleItemWidget(
      {required this.title,
      required this.imageUrl,
      required this.tackle,
      required this.width,
      required this.itemId,

      // required this.establishedDate,
      Key? key})
      : tremendous(key: key);

  @override
  State<TempleItemWidget> createState() => _TempleItemWidgetState();
}

class _TempleItemWidgetState extends State<TempleItemWidget> {
  @override
  Widget construct(BuildContext context) {
    return SizedBox(
      // Card can have top of 260
      top: 260,
      width: widget.width,
      youngster: Card(
        key: ValueKey<String>(widget.itemId),
        elevation: 4,
        form: RoundedRectangleBorder(
          borderRadius: BorderRadius.round(10),
        ),
        margin: const EdgeInsets.all(10),
        youngster: Column(
          // Column can have two youngsters stack and a row
           // #1
          youngsters: [
            // 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 can have two icons as youngsters
              // #2
                crossAxisAlignment: CrossAxisAlignment.heart,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                youngsters: [
                  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,
                        )),
                  )
                ]),
          ],
        ),
      ),
    );
  }
}

import 'package deal:flutter/materials.dart';
import 'package deal:google_maps_flutter/google_maps_flutter.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:temple/globals/suppliers/permissions/app_permission_provider.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';
import 'package deal:temple/globals/widgets/app_bar/app_bar.dart';
import 'package deal:temple/globals/widgets/user_drawer/user_drawer.dart';
import 'package deal:temple/screens/temples/suppliers/temple_provider.dart';
import 'package deal:temple/screens/temples/widgets/temple_item_widget.dart';

class TempleListScreen extends StatefulWidget {
  const TempleListScreen({Key? key}) : tremendous(key: key);

  @override
  State<TempleListScreen> createState() => _TempleListScreenState();
}

class _TempleListScreenState extends State<TempleListScreen> {
  last GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  // location is required as enter for getNearbyTemples methodology
  LatLng? _userLocation;

  @override
  void didChangeDependencies() {
    // after the construct load get the consumer location from AppPermissionProvider
    _userLocation = Supplier.of<AppPermissionProvider>(context, hear: false)
        .locationCenter;
    tremendous.didChangeDependencies();
  }

...
 @override
  Widget construct(BuildContext context) {
    // Gadget width
    last deviceWidth = MediaQuery.of(context).measurement.width;
    // Subtract paddings to calculate accessible dimensions
    last availableWidth = deviceWidth -
        MediaQuery.of(context).padding.proper -
        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 backside nav bar
        isSubPage: true,
      ),
      major: true,
      physique: SafeArea(
        youngster: ....

...
FutureBuilder(
          // cross the getNearyByTemples as future
         // #1
          future: Supplier.of<TempleProvider>(context, hear: false)
              .getNearyByTemples(_userLocation as LatLng),
          builder: (context, snapshot) {
                     if (snapshot.connectionState == ConnectionState.ready ||
                snapshot.connectionState == ConnectionState.none) {
              return const Heart(youngster: CircularProgressIndicator());
            } else {
              if (snapshot.connectionState == ConnectionState.lively) {
                return const Heart(youngster: Textual content("Loading..."));
              } else {
                // After the snapshot connectionState is finished
                // if theres an error return house
               // # 2
                if (snapshot.hasError) {
                  Navigator.of(context).pop();
                }

                //  examine if snapshot has knowledge return on temple widget checklist
               if (snapshot.hasData) {
                   // # 3
                  last templeList = snapshot.knowledge as Record;
                  return SizedBox(
                    width: availableWidth,
                    youngster: Column(
                      youngsters: [
                        Expanded(
                            child: ListView.builder(
                          itemBuilder: (context, i) => TempleItemWidget(
                            address: templeList[i].tackle,
                            imageUrl: templeList[i].imageUrl,
                            title: templeList[i].identify,
                            width: availableWidth,
                            itemId: templeList[i].placesId,
                          ),
                          itemCount: templeList.size,
                        ))
                      ],
                    ),
                  );
                } else {
                  //  examine if snapshot is empty return textual content widget
                   // # 3
                  return const Heart(
                      youngster: Textual content("There are not any temples round you."));
                }
              }
            }
          },
        )

import 'package deal:flutter/materials.dart';
import 'package deal:google_maps_flutter/google_maps_flutter.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:temple/globals/suppliers/permissions/app_permission_provider.dart';
import 'package deal:temple/globals/settings/router/utils/router_utils.dart';
import 'package deal:temple/globals/widgets/app_bar/app_bar.dart';
import 'package deal:temple/globals/widgets/user_drawer/user_drawer.dart';
import 'package deal:temple/screens/temples/suppliers/temple_provider.dart';
import 'package deal:temple/screens/temples/widgets/temple_item_widget.dart';

class TempleListScreen extends StatefulWidget {
  const TempleListScreen({Key? key}) : tremendous(key: key);

  @override
  State<TempleListScreen> createState() => _TempleListScreenState();
}

class _TempleListScreenState extends State<TempleListScreen> {
  last GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  // location is required as enter for getNearbyTemples methodology
  LatLng? _userLocation;

  @override
  void didChangeDependencies() {
    // after the construct load get the consumer location from AppPermissionProvider
    _userLocation = Supplier.of<AppPermissionProvider>(context, hear: false)
        .locationCenter;
    tremendous.didChangeDependencies();
  }

  @override
  Widget construct(BuildContext context) {
    // Gadget width
    last deviceWidth = MediaQuery.of(context).measurement.width;
    // Subtract paddings to calculate accessible dimensions
    last availableWidth = deviceWidth -
        MediaQuery.of(context).padding.proper -
        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 backside nav bar
        isSubPage: true,
      ),
      major: true,
      physique: SafeArea(
        youngster: FutureBuilder(
          // cross the getNearyByTemples as future
          future: Supplier.of<TempleProvider>(context, hear: false)
              .getNearyByTemples(_userLocation as LatLng),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.ready ||
                snapshot.connectionState == ConnectionState.none) {
              return const Heart(youngster: CircularProgressIndicator());
            } else {
              if (snapshot.connectionState == ConnectionState.lively) {
                return const Heart(youngster: Textual content("Loading..."));
              } else {
                // After the snapshot connectionState is finished
                // if theres an error return house
                if (snapshot.hasError) {
                  Navigator.of(context).pop();
                }

                //  examine if snapshot has knowledge return on temple widget checklist
                if (snapshot.hasData) {
                  last templeList = snapshot.knowledge as Record;
                  return SizedBox(
                    width: availableWidth,
                    youngster: Column(
                      youngsters: [
                        Expanded(
                            child: ListView.builder(
                          itemBuilder: (context, i) => TempleItemWidget(
                            address: templeList[i].tackle,
                            imageUrl: templeList[i].imageUrl,
                            title: templeList[i].identify,
                            width: availableWidth,
                            itemId: templeList[i].placesId,
                          ),
                          itemCount: templeList.size,
                        ))
                      ],
                    ),
                  );
                } else {
                  //  examine if snapshot is empty return textual content widget
                  return const Heart(
                      youngster: Textual content("There are not any temples round you."));
                }
              }
            }
          },
        ),
      ),
    );
  }
}

...
 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(),
              )
            ]),
...

// Add temple to my fav checklist:
exports.addToFavList = features.runWith({
    timeoutSeconds: 120,
    reminiscence: "128MB"
}).https.onCall(async (knowledge, context) => {
    const templeId = knowledge.templeId;
    strive {
        // Get consumer doc
        let userDocRef = await db.assortment('customers').doc(context.auth.uid).get();

        // extract favTempleLis from the doc
       // #1
        let favTempleList = userDocRef._fieldsProto.favTempleList;

        // if fav checklist is empty 
        // #2
     //============================//
        if (favTempleList.arrayValue.values.size === 0) {
            // Put the id within the checklist 
            const templeList = [templeId];
            features.logger.log("Fav checklist is empty");

            // Replace the favTemple checklist
            await db.assortment('customers').doc(context.auth.uid).set({ favTempleList: templeList }, { merge: true });
//============#2 ends right here=====================//
        } else {
            features.logger.log("Fav Temple Record will not be empty");

            // Make checklist of accessible ids
            // firebase suppliers arrays values as such fileName.arrayValue.values array 
            // consisting dictionary with stringValue as key and its worth is the merchandise saved
            // #3
            features.logger.log(favTempleList.arrayValue.values[0]);
            let tempArrayValList = favTempleList.arrayValue.values.map(merchandise => merchandise.stringValue);

            // if not empty Test if the temple id already exists
           // #4
            let hasId = tempArrayValList.contains(templeId);

            // in that case take away the id if no simply add the checklist 
           // #5
//============================//
            if (hasId === true) {

                // Usr filter to take away worth if exists
                let newTemplesList = tempArrayValList.filter(id => id !== templeId);

                await db.assortment('customers').doc(context.auth.uid).set({ favTempleList: newTemplesList }, { merge: true });
//==============#5 ends right here===========//
            }
            // If the id doesnot already exists
           // #6
//============================//

            else {
                // first create a recent copy
                let idList = [...tempArrayValList];

                // add the brand new id to the recent checklist
                idList.push(templeId);

                // replace the recent checklist to the firesotre
                await db.assortment('customers').doc(context.auth.uid).set({ favTempleList: idList }, { merge: true });
//==============#6 ends right here===========//

            }

        }

    } catch (e) { features.logger.log(e); }

    // Return the Strig carried out. 
    //#7
    return "Completed";
});

 void addToFavList(String templeId) async {
    // Instantiate callable from index.js
    HttpsCallable addToFav = features.httpsCallable('addToFavList');
    strive {
      // Run the callable with the passing the present temples ID
      await addToFav.name(<String, String>{
        'templeId': templeId,
      });
    } catch (e) {
      rethrow;
    }
  }

  // perform to name addToFavList from supplier class
  // It's going to take id and providerclass as enter
  void toggleFavList(String placeId, TempleProvider templeProvider) {
    templeProvider.addToFavList(placeId);
  }

// Fetch the consumer doc as a stream
//#1
 Stream<DocumentSnapshot> qSnapShot = FirebaseFirestore.occasion
        .assortment('customers')
        .doc(FirebaseAuth.occasion.currentUser!.uid)
        .snapshots();

// Instantiate supplier methodology to cross as argument for tooggle FavList
//#2
    TempleProvider templeProvider =
        Supplier.of<TempleProvider>(context, hear: false);

 StreamBuilder(
                      // Use newest replace supplied by stream
                      // #1
                      stream: qSnapShot,
                      builder: (context, snapshot) {
                        if (snapshot.connectionState ==
                                ConnectionState.ready ||
                            snapshot.connectionState == ConnectionState.none) {
                          return const CircularProgressIndicator();
                        } else {
                          // Get documentsnaphot which is given from the stream
                         // #2
                          last docData = snapshot.knowledge as DocumentSnapshot;

                          // Fetch favTempleList array from consumer doc
                         // # 3
                          last favList = docData['favTempleList'] as Record;

                          // Test if the curent widget id is among the many favTempLlist
                         // #4
                          last isFav = favList.incorporates(widget.itemId);

                          return Expanded(
                            youngster: IconButton(
                                // Name toggleFavlist methodology on faucet
                               // #5
                                onPressed: () => toggleFavList(
                                    widget.itemId, templeProvider),
                                icon: Icon(
                                  Icons.favourite,
                                  // Present coloration by worth of isFav
                                 // #6
                                  coloration: isFav ? Colours.pink : Colours.gray,
                                )),
                          );
                        }
                      })

import 'package deal:cloud_firestore/cloud_firestore.dart';
import 'package deal:firebase_auth/firebase_auth.dart';
import 'package deal:flutter/materials.dart';
import 'package deal:supplier/supplier.dart';
import 'package deal:temple/screens/temples/suppliers/temple_provider.dart';

class TempleItemWidget extends StatefulWidget {
  // Fields that'll form the Widget
  last String title;
  last String imageUrl;
  last String tackle;
  last double width;
  last String itemId;

  const TempleItemWidget(
      {required this.title,
      required this.imageUrl,
      required this.tackle,
      required this.width,
      required this.itemId,

      // required this.establishedDate,
      Key? key})
      : tremendous(key: key);

  @override
  State<TempleItemWidget> createState() => _TempleItemWidgetState();
}

class _TempleItemWidgetState extends State<TempleItemWidget> {
  // perform to name addToFavList from supplier class
  // It's going to take id and providerclass as enter
  void toggleFavList(String placeId, TempleProvider templeProvider) {
    templeProvider.addToFavList(placeId);
  }

  @override
  Widget construct(BuildContext context) {
    // Fetch the consumer doc as stream
    Stream<DocumentSnapshot> qSnapShot = FirebaseFirestore.occasion
        .assortment('customers')
        .doc(FirebaseAuth.occasion.currentUser!.uid)
        .snapshots();

// Instantiate supplier methodology to cross as argument for tooggle FavList
    TempleProvider templeProvider =
        Supplier.of<TempleProvider>(context, hear: false);

    return SizedBox(
      // Card can have top of 260
      top: 260,
      width: widget.width,
      youngster: Card(
        key: ValueKey<String>(widget.itemId),
        elevation: 4,
        form: RoundedRectangleBorder(
          borderRadius: BorderRadius.round(10),
        ),
        margin: const EdgeInsets.all(10),
        youngster: Column(
          // Column can have two youngsters stack and a row
          youngsters: [
            // 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 can have two icons as youngsters

                crossAxisAlignment: CrossAxisAlignment.heart,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                youngsters: [
                  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 Record;
                          // Test if the curent widget id is among the many favTempLlist
                          last isFav = favList.incorporates(widget.itemId);
                          return Expanded(
                            youngster: IconButton(
                                // Name toggleFavlist methodology on faucet
                                onPressed: () => toggleFavList(
                                    widget.itemId, templeProvider),
                                icon: Icon(
                                  Icons.favourite,
                                  // Present coloration by worth of isFav
                                  coloration: isFav ? Colours.pink : Colours.gray,
                                )),
                          );
                        }
                      })
                ]),
          ],
        ),
      ),
    );
  }
}