DEV Community: Fré Dumazy

Firebase for Flutter in DartPad

Fré Dumazy — Thu, 11 Nov 2021 13:02:06 +0000

During the Firebase Summit 2021 Keynote Firebase announced the support for its Flutter SDKs in DartPad. This is something that provides a lot of opportunities and will definitely make it easier to experiment with both Firebase as well as Flutter. Even though the setup is pretty straight forward, I'd like to show it step by step.

Firebase setup

I don't want to go into too much detail about how to setup a project in Firebase since there's already a lot more resources on that and their own documentation provides everything you need to know. The important thing to know is that you need to have a Firebase project and have a web app registered. If you go into the project settings and down to 'Your apps', you can select the 'Config' option in the 'SDK setup and configuration'. This gives a clear overview of the values you'll need.

DartPad

In DartPad, start by displaying the "Pub package versions" by clicking on the ℹ️ in the bottom right corner. This will show all the packages that you can import in DartPad. You should be able to see the firebase_* packages listed. If you're experiencing issues, this can be a good reference to know which version of these you are actually using.

Initialize Firebase

Initializing the Firebase SDK is almost only a matter of copying your web app's configuration into the FirebaseOptions:

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: const FirebaseOptions(
      apiKey: "AIzaAbCdEf...",
      authDomain: "my-project-id.firebaseapp.com",
      projectId: "my-project-id",
      storageBucket: "my-project-id.appspot.com",
      messagingSenderId: "012345678912",
      appId: "1:012345678912:web:abc123...",
    ),
  );

  runApp(MyApp());
}

There are 3 steps in this process:

Call WidgetsFlutterBinding.ensureInitialized(); to avoid calls to the framework before it's actually ready.
Initialize the Firebase SDK with the values that are found in the Firebase Console under your web app's configuration. Depending on your app, it's probably important that you await this before moving on to the last step.
The last step is simply running your initial widget with the runApp() function.

Calling the Firebase SDK

Now you just need to verify if this is correct. I'll use Cloud Firestore as an example here, but there are other Firebase APIs you can use in DartPad as well, such as Firebase Authentication. Say you have a collection of 'people' that you want to display in your DartPad app.

Then the code you'll need is nothing different than using the Firebase SDK for Flutter on another platform.

// new import to add
import 'package:firebase_core/firebase_core.dart';

// main method as shown above

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: PeopleList(),
        ),
      ),
    );
  }
}

class PeopleList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
      stream: FirebaseFirestore.instance.collection('people').snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return const CircularProgressIndicator();
        }
        final docs = snapshot.requireData.docs;
        return ListView.builder(
          itemCount: docs.length,
          itemBuilder: (_, index) {
            final json = docs[index].data();
            return ListTile(
              title: Text(json['firstName']),
              subtitle: Text(json['lastName']),
            );
          },
        );
      },
    );
  }
}

As a result, the people are listed when running the app.

Conclusion

Setting up the Firebase SDK in DartPad is really easy and actually takes less steps than using it on another platform. I can see this having huge benefits for teaching and sharing samples. Give it a try at dartpad.dev!

Code sample

If you'd like to see the full sample for this article to experiment with, it's available here.

You'll need to use your own Firebase web app config and make sure you have the 'people' collection available as shown in the example above.

Other notes

I'm not a 100% sure that you need to call WidgetsFlutterBinding.ensureInitialized(); as the initial step. In this example it works fine without, but I added it because more complex use cases might require it.
If you start a new Firebase project and Cloud Firestore to test this and you're not able to fetch the data, check your security rules. I've set mine to test mode for this article but this might not be the case for you.
This tutorial only focuses on the minimum to set up Firebase on DartPad. There might be better ways to call the Firestore APIs or to structure the code.

Flutter sandbox script

Fré Dumazy — Sat, 31 Oct 2020 14:40:43 +0000

When I want to try out something small in Flutter, I mostly have two options. Either use DartPad or create a small sandbox project locally.

DartPad vs local project

I don't always like to use DartPad because it doesn't allow me to use the setup I'm used to on my machine. Code completion isn't that great, there's no option to easily click through the framework's source code and we cannot add certain libraries.

Having a sandbox project locally is nicer to work with but it requires some tedious setup. Go to a directory, create a new project, remove all the verbose comments in main.dart and, if you want to run on a real iOS device, set up signing in Xcode. Quite a hassle, so I took some steps to make it easier.

Create a clean project

First of all, I created a new Flutter project and set it up just as how I wanted it to have as a starting point. I made sure it was able to run on a real iOS device and simplified the main.dart file:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Sandbox',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Sandbox"),
      ),
    );
  }
}

For me, this is what I mostly would like to have as a starting point for trying something out.

Once this was all set up, I simply created a local Git repository and commit this on the master branch.

git init
git add .
git commit -m "Initial commit"

Now, to start with a clean slate, I just open this project and run git reset --hard to go back to this starting point. But if you've created other files that aren't tracked by Git, you need to run git clean -f -d as well to remove those. This was all a bit too cumbersome for me.

Script it

I simply created a script that resets this project and opens it in VS Code. It's basically just a few lines, but I wanted to add something extra to it.

If I don't have any connected devices, I want to be able to run my code on an iOS simulator or Android emulator. So I added two options to the script: -i for starting the simulator, -a for starting the emulator or -ia to start both, of course.

Here's the script:

#!/bin/bash

# Absolute path of the Flutter sandbox project
sandbox_path="/Users/fre.dumazy/Developer/Playground/flutter_sandbox"
# Name of Android emulator to open.
# Check with `emulator -list-avds`
avd_name="Pixel_4_API_30"

main() {
    processOptions "$@"
    resetSandbox
    openVsCode
}

openVsCode () {
    # Open the project in VS Code at the main.dart file
    code "$sandbox_path" "$sandbox_path/lib/main.dart"
}

usage () {
    echo "Usage: $0 [-i] [-a]"
}

processOptions () {
    while getopts ":ia" flag; do
        case "${flag}" in
            i) 
                startSimulator
                ;;
            a) 
                startEmulator
                ;;
            *)
                usage
                ;;
        esac
    done
}

startSimulator () {
    open -a Simulator
}

startEmulator () {
    # Start emulator in a background process and ignore logs in terminal
    emulator -avd "$avd_name" > /dev/null 2>&1 &
}

resetSandbox () {
    (cd "$sandbox_path" \
     && git reset --hard > /dev/null 2>&1 \
     && git clean -f -d > /dev/null 2>&1)
}

main "$@"

Some values need to be configured at the top, but once that's set up, I can use it over and over again.

Alias it

Once this script was made, I added it as an alias in my bash.profile so I could call this from any directory in the terminal.

alias fsandbox='~/scripts/flutter_sandbox.sh'

Now I can just type fsandbox when ever I want to fiddle with Flutter.

It's nothing special, but enables me to quickly have a sandbox project set up and avoids me from trying out stuff in existing projects, or losing time with DartPad.
I'll probably add more features to the script in the future. One of the things I'd like is that previous changes are first committed to a separate branch with the last modification date and time as branch name, so I don't accidentally lose useful code snippets.

If you haven't set up anything like this, try it out, it might help you. If you do have another way that enables you to quickly try something out, let me know, I'd love to hear it :-)

Upload to TestFlight with Fastlane and 2FA

Fré Dumazy — Wed, 26 Aug 2020 11:27:59 +0000

I recently (accidentally) turned on two-factor authentication (2FA) for an Apple account that we use to submit iOS builds to TestFlight via our CI pipeline. Because of this, our CI system could not longer upload new builds to TestFlight.

Looking at the Fastlane documentation for continuous integration, I saw there was a possibility to use application specific passwords that allow other systems to upload the iOS builds on your behalf.

So I generated an application specific password at appleid.apple.com and added it as environment variable FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD. However I wasn't able to get this working until I figured something out in the pilot documentation. It states:

pilot/upload_to_testflight can use an Application Specific Password via the FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD envirionment variable to upload a binary if both the skip_waiting_for_build_processing and apple_id options are set. (If any of those are not set, it will use the normal Apple login process that might require 2FA authentication.)

The upload_to_testflight action in the Fastfile was actually missing these two parameters, at least the apple_id was missing here. After trying to add it, it still wasn't working, but now I got the following error message:

apple_id value is incorrect. The correct value should be taken from Apple ID property in the App Information section in App Store Connect.

I thought I have to specify the Apple account's email address as apple_id, just like it is in a Fastlane's Appfile, but this actually expects the app's apple id, for example 123456789, which can be found on App Store Connect. After changing my upload command to this, it finally used the application specific password from the environment variable and was able to upload the iOS build to TestFlight:

upload_to_testflight(
  skip_waiting_for_build_processing: true,
  apple_id: "123456789"
)

I lost quite some time getting the uploads to work in a CI system for a 2FA account, so I hope I'm able to help somebody by posting this here. Let me know if this helped you :)

Accidentally removed Flutter binary on macOS

Fré Dumazy — Fri, 07 Feb 2020 12:07:11 +0000

I've accidentally removed a binary file named Flutter on my Mac via Storage Management.

Afterwards I ran into this issue:
The 'Pods-Runner' target has transitive dependencies that include statically linked binaries: (/path/to/app/ios/Flutter/Flutter.framework)

How I've eventually fixed it:

Fix Flutter SDK: Via a reinstall, but maybe changing channels and triggering a new build of the Flutter tool might work as well.
Clean out the Cocoapods cache: pod cache clean --all
Remove the Cocoapods cache directory: rm -rf "${HOME}/Library/Caches/CocoaPods"
Repair the Pub cache: pub cache repair
Start from a fresh checkout of the project. .packages should not be generated yet.
flutter packages get
Run (or build) the iOS app

Some of these steps probably aren't necessary or could be done in a better way, but this is what worked for me.
I just wanted to publish this in case it might help somebody in the future. That somebody might even be me.

If you've encountered the same issue before and was able to fix this, let me know how you did it :)