Flutter + Firebase: Setup

Flutter is a cross-platform app development framework. In this post, we will do a basic setup for Flutter development in Windows and macOS.

Prerequisites

Before we dive into the installation process, make sure you have the following prerequisites:

1. A computer
2. git
3. Google Chrome
4. VSCode (Please don’t use light mode here, please)

Installing Flutter

First, let's download and install the Flutter SDK by following these steps:

1. Visit the official Flutter documentation at docs.flutter.dev.
2. Select your operating system (Windows or macOS) from the provided options.
3. Follow the installation instructions until you reach the point where you are instructed to run the flutter doctor command.

Windows Setup

Once you've downloaded Flutter, ensure that your Flutter path is correctly configured. Here are the steps to set up Flutter on Windows:

1. Open a console window within the Flutter directory.

2. Run the following command:
   

   flutter doctor
   

3. Verify that the response includes the following entries:

   • [✓] Flutter
   • [✓] Chrome - develop for the web
   • [✓] VS Code

macOS Setup

For macOS users, it's essential to select the appropriate SDK for your Mac (Intel or Apple Silicon) during installation. Follow these additional steps after unzipping the Flutter package:

1. Place the Flutter directory in a preferred location, such as /your_username/Developer.

2. Open the Terminal and execute the following commands to add the Flutter path to your environment variables:
   

   vi ~/.bash_profile
   

   This will open your bash_profile in the VIM text editor. If you encounter difficulties using VIM, refer to online resources for assistance.

3. Press 'i' to enter insert mode, then add the following line inside your bash_profile:
   

   export PATH="$PATH:/Users/your_username/Developer/flutter/bin"
   

   Be sure to replace "your_username" with your actual username and adjust the path accordingly if you placed the Flutter directory elsewhere.

4. After adding the path variable, press the ESC key and then type Shift-z-z to save and exit.

5. In Terminal, run the following command to verify your setup:
   

   flutter doctor
   

6. Ensure that the response includes the following entries:

• [✓] Flutter
• [✓] Chrome - develop for the web
• [✓] VS Code

Platform Setup

Congratulations! You have successfully set up Flutter for web development. If you intend to develop for other platforms, you can find detailed instructions in the official Flutter documentation here.

VSCode Extensions

To enhance your Flutter development experience in VSCode, install the following extensions:

1. Flutter
2. Dart
3. Awesome Flutter Snippets (optional)

After installing these extensions, restart VSCode for the changes to take effect.

Running Your First Flutter Web App

Now that you have Flutter configured, it's time to create and run your first web app:

Creating a Flutter Project

You can create a Flutter project using either the terminal or VSCode:

via Terminal:

Navigate to the directory where you want to create the project and run:

flutter create project_name

via VSCode:

1. Open the command palette in VSCode (Mac: Cmd + Shift + P, Windows: Ctrl + Shift + P).
2. Search and select "Flutter: New Project."

Running the App

Once your project is created, you can run your web app as follows:

via Terminal:

Navigate to your project folder and execute the following command to launch the development server:

flutter run -d chrome

via VSCode:

Go to any Dart file in your project, click on the debug option, and run it from the top-right corner of VSCode.

Your Flutter web app will be accessible through a web browser by opening the following URL: http://localhost:5000 (note that the port may be different).

Conclusion

Congratulations! You've successfully set up Flutter for web development on both Windows and macOS. With Flutter's power and flexibility, you're now ready to create cross-platform web applications that provide exceptional user experiences. Dive into the Flutter documentation, explore different widgets, and embark on your web development journey. If you have any questions or thoughts, please share them in the comments below.

Happy Fluttering!

---

Let's go one step further and setup Firebase...

---

Integrating Firebase with Your Flutter App

Firebase is a powerful backend platform that provides a wide range of services to enhance your Flutter app. In this guide, we'll walk you through the steps to integrate Firebase into your Flutter app for any platform.

Prerequisites

Before diving in, ensure you have Flutter installed. Also, sign in to your Google account and access Firebase at console.firebase.google.com. If you haven't created a Firebase project yet, go ahead and create one.

Step 1: Installing the Necessary Command Line Tools

1. To kick things off, you'll need to install the Firebase Command Line Interface (CLI). Here's how:

• a. Start by installing Node.js and npm. If you haven't already, download and install Node.js from nodejs.org.

• b. Verify your Node.js and npm installations by running these commands in your terminal:
  

  node -v
  npm -v
  

• c. Once Node.js and npm are confirmed to be installed, proceed to install the Firebase CLI globally using npm:
  

  npm install -g firebase-tools
  

• d. To log in to Firebase, use the following command:
  

  firebase login
  

• e. If the above command doesn't work as expected, try this interactive login method:
  

  firebase login --interactive
  

• f. Follow the prompts in your browser to select your Google account and complete the authentication.

1. To streamline your Flutter and Firebase integration, we'll also install the FlutterFire CLI. Execute the following command from any directory:
   

   dart pub global activate flutterfire_cli
   

Step 2: Configuring Your Apps for Firebase

Use the FlutterFire CLI to configure your Flutter apps to connect with Firebase. Navigate to your Flutter project directory and run the following command to initiate the app configuration process:

flutterfire configure

The flutterfire configure workflow accomplishes the following:

• Enables you to select the platforms your Flutter app supports. For each chosen platform, the FlutterFire CLI establishes a new Firebase app within your Firebase project.

• You can opt to use an existing Firebase project or create a new one. If you have apps registered in an existing Firebase project, the FlutterFire CLI will attempt to match them based on your Flutter project's configuration.

• Creates a Firebase configuration file (firebase_options.dart) and integrates it into your lib/ directory. This configuration file contains unique, non-secret identifiers for each platform you selected.

After initially running flutterfire configure, be sure to rerun the command whenever you:

• Start supporting a new platform in your Flutter app.
• Begin utilizing a new Firebase service or product, especially when employing features such as Google sign-in, Crashlytics, Performance Monitoring, or Realtime Database.

Re-running this command ensures that your Flutter app's Firebase configuration remains up-to-date and automatically incorporates any necessary Gradle plugins for Android.

Stay Informed about Flutter

To ensure you're always up-to-date with the latest developments, best practices, and in-depth instructions on integrating Flutter, we recommend following our dedicated Dev.to post.