Build a Flutter Firebase App for Mobile & Desktop

How to Create a Flutter Firebase App for Both Mobile and Desktop

Flutter is Google's UI toolkit, which helps you build applications with the already existing code and bring out beautiful, natively compiled applications for mobile, web, and desktop without the need for a separate but single codebase. Flutter is open source and free, used by developers and organisations to develop applications at ease.

In this code lab, you'll create a simple mobile Flutter app with object-oriented code and basic programming concepts that don't need previous experience with Dart, mobile, desktop, or web programming.

To survive in the cut-throat competitive market, to go up with the trending device and attain more customer base, the increasing number of smartphone users has to be the point of consideration. Considering mobile phones to fight for success, has pushed businesses and startups to think about having robust mobile applications. Mobile phones and the mobile app development reigning in the industry also need to have the choice to be kept to end in the expected resultant position. The choice of native app development or cross-platform development has brought in a rising number of advantages. The mobile app industry has seen great advancement and innovations and the development of cross-platform applications obviously have a wide choice of technologies. In the trending world of mobile apps, Google’s Flutter has outshined as one of the best options for both developers and businesses to get started with their app in just a few days.

Flutter & Firebase corresponds to their innate ability of never-ending scope of development covering multiple platforms like — Android, iOS, Web and Desktop. They have recently introduced constraints that let you focus on making performant apps and have gained immense popularity & acceptance and are now widely trusted too.

Firebase provides a rich feature for handling deep linking for applications and the best part is that it is free and brings in optimal user experience. The better navigation is made possible to the intended equivalent content contributing to building, improving and growing applications for multiple platform domains.

With the new release of Flutter 2.0 the support for the web platform has become stable and pushes the reusability of code to another level on the web. Flutter is a portable UI framework for building beautiful app experiences, the version 2.0 has hit the stable milestone.

Here, in this article, we’ll see how to build a simple web app and deploy it to Firebase Hosting.

Setup a flutter environment

Initially, set up a flutter environment with two software, the Flutter SDK and an editor. The default goes for Android studio and the preferred code lab is run on a physical Android or iOS device set to developer mode and connected to your computer. Some Xcode tools may require installation which is made possible with the iOS simulator and the same setup in Android studio opt an Android Emulator. Then comes the debugging stage which is carried out in a browser, usually Chrome and can be used as a Windows, Linux, or macOS desktop application too.

Create the starter flutter app

Create a simple Flutter app and do the most editing on lib/main.dart and replace the content there where the Dart code lives. For the replacement delete all the code from lib/main.dart and replace it with the code for the app where an indentation can become skewed which can be fixed with tools like

Android Studio/IntelliJ IDEA: Reformat Code with dartfmt.
Visual Studio Code: Select Format Document.
Terminal: Run flutter format <filename>.
Material: Material is a visual-design language that's standard on mobile and the web and offers a rich set of Material widgets.
StatelessWidget: In Flutter mobile app development, almost everything is a widget, including alignment, padding, and layout.
The Scaffold widget: It provides a default app bar, a title, and a body property and the widget subtree can be quite complex and provide a build method that describes how to display the widget.

Use an External Package

Now, start using an open-source package plus some utility functions as well as many other open-source packages. Add the package as a dependency of this app and import the new package into "lib/main.dart."

The suggestions for libraries to import renders the import string and the package to generate the text. The additional changes are made possible

when the app is running, hot reload to update the running app. Each time you click hot reload or save the project a random pair is generated inside the build method and the material widget does toggle in the Flutter Inspector.

Stateless widgets can't change the properties but the Stateful widgets maintain change during the whole lifetime. Implementing a stateful widget creates an instance of a state class and the object is immutable and regenerated, persisting over the lifetime of the widget. Adding a stateful widget, creates its State class, inside the existing MyApp stateless widget creating boilerplate code for a stateful widget..

Also Read: Flutter App Development-The Perfect Fit For Your Project

It can go anywhere in the file in lib/main.dart and position your cursor after all of the code and can Return to start on a fresh line. To create a Stateful widget at this stage press Return to accept and the cursor gets positioned for you to enter the name of your stateful widget.

Once you've entered the name, the IDE automatically updates the accompanying State class and is prefixed with an underscore. Underscore enforces privacy and is a recommended best practice in the state class to extend. The app's logic saves the list of generated word pairs, as the user adds or removes them from the list.

Now modify further with

interactivity.
Ability to navigate to a new route.
Theme colour

Deploy to Firebase hosting.

Now the app is completed and the decision to use Firebase hosting includes four simple steps:

Create the Firebase project: In the Firebase console, click on add new project. Give a name and click continue.
Install the firebase-tools CLI: Firebase CLI provides a variety of tools for managing, viewing, and deploying to Firebase projects and runs the same with that Node.js is installed on your machine.
Initialise Firebase hosting for your Flutter project: Run the command for exec the firebase login in the root directory of your Flutter app. On the appearing web page, it becomes possible to insert your credentials and accept all permissions and as an output, a message of success informs you of the outcome of the operation. Then initialise your Firebase project and run this command firebase init to set up the features of Firebase CLI features and select FirebaseHosting and then click ‘Enter’ to confirm your choice.
Build and deploy the app: To deploy the mobile app development, use the command flutter to build a web to build your app launch and create the necessary files and at the end of the build process run the command firebase deploy.