bizz84 / firebase_user_avatar_flutter

Advanced Provider Architecture Demo: Image Picker + Firebase Storage Upload

Advanced Provider Architecture Demo: Image Picker + Firebase Storage Upload

This project shows how to capture, upload and show an avatar image, while supporting multiple user accounts with Firebase.

It serves as the foundation for the following tutorials on Provider architecture:

Advanced Provider Tutorial - Part 1: Project Setup & Authentication Flow

To get started with this tutorial, checkout the initial-setup branch.

Then, follow the steps in Firebase Configuration.

Video tutorial here:

Advanced Provider Tutorial - Part 2: MultiProvider, Multiple Services & Stream Dependencies

To continue from the end of the previous tutorial, checkout the authentication-complete branch.

Video tutorial here:

Advanced Provider Tutorial - Part 3: Dependencies Between Providers

To continue from the end of the previous tutorial, checkout the working-implementation branch.

Video tutorial here:

The final, completed project is available on the optimized-implementation branch.

Firebase Configuration

To use this project with Firebase authentication, some configuration steps are required.

• Create a new project with the Firebase console.
• Add iOS and Android apps in the Firebase project settings.
• On Android, use com.example.firebase_user_avatar_flutter as the package name (adding a SHA-1 certificate fingerprint is not needed for this project).
• then, download and copy google-services.json into android/app.
• On iOS, use com.example.firebaseUserAvatarFlutter as the bundle ID.
• then, download and copy GoogleService-Info.plist into iOS/Runner, and add it to the Runner target in Xcode.

See this document for full instructions:

• https://firebase.google.com/docs/flutter/setup

Additional References

A lot of the techniques used in this project are explained in great detail, and implemented step-by-step in my Flutter & Firebase Udemy course.

This is available for early access at this link (discount code included):

• Flutter & Firebase: Build a Complete App for iOS & Android

License: MIT

firebase_user_avatar_flutter's Issues

AuthWidgetBuilder Conflicts with MaterialApp onGenerateRoute: generateRoute property

I have used your approach for authentication stream.
That is okey.
In my project, I needed to use onGenerateRoute: property of MaterialApp widget which is child of AuthWidgetBuilder.

When the stream: _authService.onAuthStateChanged emit new state once login or logout event, while MaterialApp constructs new tree, MatrearialApp home: doesn't activated and doesn't route to AuthWidget.

If you refresh whole application, then no problem, but again if you logout or login the MaterialApp does not visit home: property.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'package:family_infopool/core/models/user.dart';
import 'package:family_infopool/core/services/connectivity_service.dart';
import 'package:family_infopool/ui/widgets/auth_widget_builder.dart';

import 'package:family_infopool/core/states/share_app_state.dart';
import 'package:family_infopool/core/managers/dialog_manager.dart';
import 'package:family_infopool/core/services/navigation_service.dart';
import 'package:family_infopool/core/services/dialog_service.dart';

import 'package:family_infopool/ui/views/startup_view.dart';
import 'package:family_infopool/ui/widgets/header_footer.dart';
import 'package:family_infopool/ui/router.dart';

import 'package:family_infopool/locator.dart';

import 'core/services/live_user_profile_service.dart';

void main() {
setupLocator();

LiveUserProfile dummyLiveUserProfile = LiveUserProfile(user: User.initial());

runApp(MultiProvider(
providers: [

    Provider<LiveUserProfile>.value(value: dummyLiveUserProfile),

    ChangeNotifierProvider<ShareAppState>(
      create: (context) => ShareAppState()),

    StreamProvider<ConnectivityStatus>(
      create: (context) => ConnectivityService().connectionStatusController.stream),

  ],
  child:MyApp()

));
}

final RouteObserver routeObserver = RouteObserver();
final MyRouteObserver myRouteObserver = MyRouteObserver();

class MyApp extends StatelessWidget {

@OverRide
Widget build(BuildContext context) {
print('(MyApp): MyApp starts.');

return  KeyShare(
  child: GestureDetector(
    onTap: () => FocusScope.of(context).unfocus(),
    child: AuthWidgetBuilder(
      builder: (context, userSnapshot) {
      print('(MyApp): MaterialApp starts.[${userSnapshot.connectionState}]');
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'iPikuka Family InfoPool',
        theme: ThemeData(),
        home: StartUpView(userSnapshot: userSnapshot), //which is smilar implematation of AuthWidget
        navigatorObservers: <NavigatorObserver>[myRouteObserver],
        onGenerateRoute: generateRoute,
        navigatorKey: locator<NavigationService>().navigationKey,
        builder: (context, child) {
            print('(MyApp): Navigator for Dialog Service created.');
            //There was a problem if visit this Navigator when ConnectionState.waiting, so this is a prevention solution.
            if (userSnapshot.connectionState != ConnectionState.active)
              return Container();
            else
              return Navigator(
                observers: <NavigatorObserver>[routeObserver],
                key: locator<DialogService>().dialogNavigationKey,
                onGenerateRoute: (settings) => MaterialPageRoute(
                                                maintainState: true,
                                                builder: (context) => DialogManager(child: child)),
            );
        },
      );
      
      },
    ),
  ),
);

}
}

Null safety update

Hello
Love your videos and thank you for putting in so much effort.
I have 2 questions

1. Will you update the code for null safety?
2. Don't you have to initialize all providers under MultiProvider?
   When trying to use your code, it wants to me initialize FireStoreService provider as well, which i try to do like this
   Provider
   (
   create: (context) => FirestoreService(uid: UserData().uid),
   ),
   However, since UserData().uid is null at that point, i don't think this will work, even with assert(uid.isNotEmpty)

streamBuilder vs Consumer / changeNotifier

For managing authState, why do you use a streamBuilder? Is not not suitable to use a Consumer()?

I just thought that that if you are using Provider, there is no need to have streamBuilder as the parent widget. Am I missing something? Can the authState widget be made without streamBuilder?

Wrong applicationID

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:processDebugGoogleServices'.

No matching client found for package name 'com.example.firebase_user_avatar_flutter'

You need replace in android/app/build.gradle :
line 41 :

    applicationId "com.example.firebase_user_avatar_flutter"

by
applicationId "com.codingwithflutter.firebase_user_avatar_flutter"