How to use Firebase (Android App) in FlutLab

6 min readSep 14, 2021

FlutLab supports automatic Firebase configuration for Web, Android and iOS apps. Read more about How to use Firebase (Web App) in FlutLab.

In this article, we will go thru step-by-step instruction about Firebase configuration for Android apps, and how will FlutLab help you with this task.

Go to https://firebase.google.com/. Sign in or Sign up to your Firebase account. Press the “Create a project” button.

2. Give a name to your Firebase project and click “Continue”.

3. We are not planning to use Analytics, so you can turn it off. Click “Create project” then.

4. Great! Your Firebase project is ready. Click “Continue”.

5. Open “Build” section in the left menu.

6. Select “Firestore Database” and click the “Create database” button.

7. In the Secure rules for Firestore Database dialog, select “Start in test mode”, and click Next .

Important: Test mode allows any user to read and write to your database, which is convenient during development. However, this can be a security risk. Before releasing any app to production, you should add security rules.

8. Set your location and click “Enable” button.

9. Great, you can create a database now. Press the “Start Collection” link.

10. Set the collection name to cars and click “Next”.

11. Fill in all fields the same way as shown below and click “Save”

12. Click “Add document” and add a new car brand. Now you are ready to use Storage on the Firestore Database.

13. Go to your FlutLab Profile and click “+Project” button.

14. Create a new project with the “Stateless Hello World” codebase. Important!!! You must fill in the Package field.

15. Click the “Connect to Firebase” button.

16. We are going to connect Android Firebase.

17. You need to Drag&Drop Firebase configuration to this window.

18. Back to Firebase and open “Project Overview/Project settings” in the left menu.

19. Scroll down and find “Your apps” section. Here is your Web App configuration. Click on the “Add app” button.

20. Select “Android” icon.

21. Fill in all the fields as shown below. Important!!! Enter the same package name as you specified when created the project in FlutLab.

22. Download google-services.json file

23. Press the “Next” button all further steps.

24. Great! Here is your Firebase configuration for Android app.

25. Back to FlutLab, drag&drop google-services.json file into the field and press “Continue”.

22. Select “Cloud Firestore” and press “Connect”.

23. At that moment, FlutLab will automatically add
- two packages to the pubspec.yaml file
- a couple of lines to your android configuration files.

24. Click the “Pub get” button.

25. Great! It works:)

26. Open main.dart file and replace all code with the code below (Ctrl+S to save).

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Favorite Car',
      home: MyHomePage(),
    );
  }
}class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() {
      return _MyHomePageState();
  }
}class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Favorite Car Votes')),
      body: _buildBody(context),
    );
}Widget _buildBody(BuildContext context) {
  return StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance.collection('cars').snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData) return LinearProgressIndicator();
      
      return _buildList(context, snapshot.data.docs);
    },
  );
}Widget _buildList(BuildContext context, List<DocumentSnapshot> snapshot) {
  return ListView(
    padding: const EdgeInsets.only(top: 20.0),
    children: snapshot.map((data) => _buildListItem(context, data)).toList(),
  );
}Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
  final record = Record.fromSnapshot(data);
  return Padding(
    key: ValueKey(record.name),
    padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
    child: Container(
      decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.circular(5.0),
    ),
    child: ListTile(
      title: Text(record.name),
      trailing: Text(record.votes.toString()),
      onTap: () => record.reference.update({
        'votes': FieldValue.increment(1)
      })),
    ));
  }
}class Record {
  final String name;
  final int votes;
  final DocumentReference reference;
  
  Record.fromMap(Map<String, dynamic> map, {this.reference})
    : assert(map['name'] != null),
      assert(map['votes'] != null),
      name = map['name'],
      votes = map['votes'];  Record.fromSnapshot(DocumentSnapshot snapshot) 
    : this.fromMap(snapshot.data(), reference: snapshot.reference);    @override
  String toString() => "Record<$name:$votes>";
}

“Future<void> main {…}” is very importan part of your Android app with Firebase. Don’t forget about it.

27. Select one of android builds in the “Build Project” list

28. Press the “Build Project” button with choosen android build.

29. You will see three options of getting your Android app in the “Outputs” section:
1. you can download the *.apk file to your PC;
2. you can scan the QR code and immediately install *.apk to your mobile device;
3. you can send the *.apk by email.