In the world of mobile app development, Flutter has emerged as a powerful framework for building beautiful applications seamlessly across platforms. This tutorial delves into creating a Flutter app featuring user authentication through Firebase Google Sign-In and Firestore. Not only will we construct the authentication system, but we will also explore how to handle real-time data streams effectively. This guide is designed for intermediate developers, but don’t worry – if you’re new to Flutter, we’ll provide resources to ease your journey into this exciting framework.

Why Choose Flutter and Firebase for Your App?

Flutter allows developers to create natively compiled applications for mobile, web, and desktop from a single codebase. When combined with Firebase, developers can leverage robust backend services like authentication, analytics, and database services without managing servers.

Key Features:

• Cross-platform compatibility: Write once, run anywhere.
• Real-time data updates: Flutter’s reactive framework works beautifully with Firebase’s Firestore.
• Simple authentication process: Google Sign-In simplifies user authentication, allowing for secure access.

Setting Up Your Flutter Project

Before we start coding, we need to set up our Flutter project. Follow these steps to create a new app:

1. Open your command-line interface and run:

   flutter create my_flutter_app

2. Open your project in VS Code or your preferred IDE.
3. Configure the Android setup in Firebase:

• Go to the Firebase console, click on the Android button, and set your package ID (e.g., com.yourcompany.yourapp).
• Generate a signing certificate for Google OAuth. Copy and paste the command provided in the tutorial document, ensuring no outdated commands are used.

2. Download the google-services.json file from Firebase and place it in the android/app directory of your Flutter project.

With that ready, let’s ensure our build.gradle files are correctly configured:

• Update the build.gradle inside the app directory with your application ID.
• Ensure you apply the Google services plugin in the build files as described.

Integrating Firebase Dependencies

In your pubspec.yaml, add the necessary dependencies for Firebase:

dependencies:
  flutter:
    sdk: flutter
  firebase_core:
  firebase_auth:
  cloud_firestore:
  google_sign_in:
  rx_dart:

Run flutter pub get to install the new packages. These dependencies will facilitate authentication through Firebase and provide real-time data services.

Building the User Interface

Now let’s create the user interface of our Flutter app. We’ll start with the main dart file:

1. Import the necessary Firebase packages:

   import 'package:firebase_auth/firebase_auth.dart';
   import 'package:cloud_firestore/cloud_firestore.dart';

2. Create a simple UI with two buttons: one for signing in and another for signing out. Wrap your buttons in a column to stack them vertically, and use Material buttons with onPressed event handlers.
3. Center the buttons in your column for a neat layout:

   Column(
     mainAxisAlignment: MainAxisAlignment.center,
     children: <Widget>[ /* buttons go here */ ],
   )

Handling Authentication Logic

To manage authentication, we’ll write code to separate our business logic from presentation:

1. Create a new file called auth.dart.
2. Inside, define a class responsible for managing user authentication using Firebase’s authentication methods and Firestore for user data storage.
3. Implement methods such as signIn and signOut which will handle user authentication and data manipulation in Firestore.
4. Make sure to expose streams that represent user authentication states. This will allow the UI to react and update based on user status:

   Observable<User> user = FirebaseAuth.instance.authStateChanges();

Making the UI Reactive

To reactively update the UI when the authentication state changes, we’ll turn to Flutter’s StreamBuilder. This widget listens to streams and rebuilds its child based on the stream’s data:

1. Wrap the section of the UI responsible for displaying the sign-in and sign-out buttons in a StreamBuilder that listens to user observable we created earlier.
2. Based on whether the user is logged in or not, display the appropriate button.
3. Utilize the setState method within a stateful widget to manage the updates effectively.

Here’s an example of a StreamBuilder implementation:

StreamBuilder<User>(
  stream: FirebaseAuth.instance.authStateChanges(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.active) {
      return snapshot.hasData
          ? SignOutButton()
          : SignInButton();
    }
    return CircularProgressIndicator();
  },
);

Conclusion

By following this guide, you’ve successfully integrated user authentication into your Flutter app using Firebase Google Sign-In. This tutorial covered creating a custom authentication system, handling real-time updates, and designing a meaningful user interface.

Flutter’s ecosystem allows for rapid development and easy maintenance of future updates, making it a great choice for app developers.

Get Involved!

If you found this tutorial helpful, please share it with your fellow developers and consider subscribing for more tutorials! What topics would you like to see in our next Flutter series? Share your thoughts in the comments below!
Grab the full source code and additional resources for your development journey!