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.
Watch full course
and the finale…
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
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.
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
);
}
}
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>[],
),
);
}
}
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.
Watch the full course for details on completing the sign in and sign out flows.