Creative Bracket

Firebase Authentication and Flutter Full Course 2020

Firebase is a platform that provides the infrastructure needed to build apps fast. In the previous mini-course we built a mobile and web app with Flutter and MongoDB. In this full course we will build a messaging app with Firebase Authentication and Flutter.

We begin by setting up a Flutter project from scratch and building the general look and feel of our messaging UI. We then create a Firebase project while setting up and configuring our Android and Web applications. We will set up Firebase Authentication with the google_sign_in package and Cloud Firestore for storing our chat messages. We will learn how to set up the correct security rules to ensure only authenticated users are allowed to write data to our collection.

Set up Flutter project

Before creating a Flutter project we need to enable Flutter Web support since we will also be running this app in the Web browser. Run the following commands to enable Flutter Web support:

$ flutter channel beta # checkout the beta channel
$ flutter upgrade
$ flutter config --enable-web
Enable Flutter Web support in Terminal

With Flutter Web enabled you can proceed to create your Flutter project:

$ flutter create my_messaging_app

After that process is complete open the directory in your editor of choice, whether Visual Studio Code or Android Studio as the recommended editors for Flutter development.

Ensure you have the relevant extensions installed for your editors. In the case of Visual Studio Code you need the Dart Code extensions. For Android Studio search for “Flutter” in the plugins repository under Configure > Plugins.

Run the Flutter project

Launch any of the device simulators using the steps in Visual Studio Code below. This assumes you have the listed simulators already set up using AVD Manager in Android Studio or any other means. Make sure that the simulator you select has Play Store support enabled.

Launch simulator for Flutter project in Visual Studio Code

You can run a Flutter project by typing the flutter run command in the Terminal and hitting Enter. Alternatively you can use the editor controls to run your Flutter app.

Build UI for Firebase Authentication

Open lib/main.dart and refactor the MyApp StatelessWidget like so:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "The Chat Crew", // <== Change this line
      debugShowCheckedModeBanner: false, // <== Add this line
      theme: ThemeData(
        primarySwatch: Colors.purple, // <== Change this line
      ),
      home: MyHomePage(title: "The Chat Crew"), // <== Change this line
    );
  }
}
Flutter Mobile App

Refactor the _MyHomePageState class by removing the _incrementCounter() method and _counter field.

class _MyHomePageState extends State<MyHomePage> {
  // int _counter = 0;

  // void _incrementCounter() {
  //  setState(() {
  //    _counter++;
  //  });
  // }

  @override
  Widget build(BuildContext context) { ... }
}

In the build() method remove the floatingActionButton: section of the Scaffold() widget and the two Text() widgets rendered in the Column() children. In fact you should have the code below once you’ve taken out the unnecessary bits:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true, // <== Added this line
      ),
      backgroundColor: Color(0xffdee2d6), // <== Added this line
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[],
      ),
    );
  }
}
Flutter Mobile App

The section below the app bar of the app consists of a message wall to display chat messages and the bottom area which will show either the sign in button or the message form.

The message wall will be rendered in an Expanded() widget since that takes up most of the screen real estate.

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
  ],
),

To display the Sign in button, install the flutter_signin_button package:

$ pub global activate crawl # install the crawl cli
$ crawl add flutter_signin_button

Import flutter_signin_button and display after the Expanded() widget:

import 'package:flutter_signin_button/flutter_signin_button.dart';

..

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
    Container(
      padding: const EdgeInsets.all(5),
      child: SignInButton(
        Buttons.Google,
        padding: const EdgeInsets.all(5),
        onPressed: () {},
      ),
    ),
  ],
),

Stop the whole app and start again in order to load the image assets required to display the Google logo on the sign in button.

Flutter Mobile App with Google Sign in button

Watch the full course for details on completing the sign in and sign out flows.

Sharing is caring smile emoji

If you enjoyed reading this post, please share this through the various social buttons hovering on the left/top side of the screen ↖️arrow up emoji. Also, check out and subscribe to my YouTube channel (hit the bell icon too) for videos on Dart.

Subscribe to the newsletter for my free 35-page Get started with Dart eBook and to be notified when new content is released.

Like, share and follow me heart eyes emoji for more content on Dart.

Jermaine Oppong

Hello 👋, I show programmers how to build full-stack web applications with the Dart SDK. I am passionate about teaching others, having received tremendous support on sites like dev.to and medium.com for my articles covering various aspects of the Dart language and ecosystem.

Useful learning materials



Add comment