What is Flutter?

Flutter is an open-source mobile application development framework created by Google and it is FREE. It supports cross-platform development and artificial intelligence.

Relation of Flutter & Google

  • Flutter is Google’s portable UI toolkit used by Google, developers and organizations across the globe to produce beautiful natively-compiled applications for mobile, web and desktop from a single codebase.
  • Flutter can deliver apps on iOS and Android.
  • Flutter creates applications for Google Fuchsia as well.
  • Initial release date: May 2017
  • Stable Release: May 7,2019
  • Preview release: May 15,2019

Benefits of Flutter

  • Fast Development:
    • Make your app in milliseconds with Stateful Hot Reload, which also fix bugs faster.
    • A set of fully-customizable widgets include platform differences such as scrolling, navigation, icons and fonts  to build native interfaces in minutes on both iOS and Android.
  • Indicative & Flexible UI:
    • Focus is on native end-user experiences.
    • It is layered architecture of flutter which permits full customization resulting in flexible designs and smoother animations
  • Beautiful UIs:
    • Captivate your users with Flutter’s built-in Material Design and Cupertino (iOS-flavor) widgets , rich motion APIs and platform awareness.
    • Flutter enabled IDE/Editor: Complete control over pictures on the screen, analyzes code and finds possible mistakes.

Examples of Flutter-built apps:

  • Alibaba  used flutter made it easy for iOS and Android on their Xianyu app, which has 50M+ downloads.
  • Google Ads use flutter to help run your ad campaigns effortlessly.
  • AppTree provides an enterprise app platform for brands like McDonalds, Stanford, Wayfair & Fermilab.
  • Hamilton Musical

Features of Flutter:

  • The Flutter Outline shows a live view of the structure of a file in your flutter project. You can rapidly drive through the code and perform refactors on your widgets with the buttons at the top.
  • Flutter apps have a considerably larger size than its native counterparts.

Language of Flutter: Dart is the main language.

Components of Flutter:

  • Dart platform: Language that has more advanced features like just-in-time execution engine, ahead-of-time (AOT) compilation on iOS. Also due to “hot reload” one can inject changes to source files during the running of application.
  • Flutter engine: platform-specific SDKs.
  • Foundation library: APIs communicate with the engine
  • Design-specific widgets: UI design involves assembling and/or creating various widgets

Employment scope: More and more jobs for flutter development are being posted each day as more and more agencies and startups are also looking into it.

React Native and Flutter: Flutter is much better alternative to React Native because it is actually native. It doesn’t require a JavaScript bridge to talk to OEM widgets.

What’s New in Flutter in 2019?

  • 1.0 Stable Release
  • Integrating support for Android and iOS app which is already existing.
  • Visual Studio Code and Android Studio
  • Web-based tooling debugging & inspecting.
  • Flutter can create Pixel Perfect iOS app.
  • Google maps, In-App Purchases, and Web views
  • Dart is optimized for client development

I would recommend Flutter to build hybrid applications.


Login UI with Firebase in Flutter

Login UI in Flutter with Firebase


This article is about Login with Firebase in Flutter.  The purpose of this article is to help the reader understand Firebase in a simple way.

Innoventix Solutions Developed UI of Login/Sign-up Form using Firebase.


What is Firebase?

Firebase is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services such as a Realtime database, cloud storage, authentication, crash reporting, machine learning, remote configuration, and hosting for your static files. Use Firebase to host your Flutter app on the web.

Add Firebase to your Flutter app:

Step 1: Create a Firebase project

Step 2: Register your app with Firebase

Step 3: Add a Firebase configuration file

Step 4: Add Flutter Fire plug-in


⦁        Ensure that your app is not currently running in your emulator or on your device.

⦁        From the root directory of your Flutter app, open your pubspec.yaml file.

⦁        Add the Flutter Fire plug-in for the Firebase Core Flutter SDK




sdk: flutter

# Add the dependency for the Firebase Core Flutter SDK

firebase_core: ^0.4.0+9


Add the Flutter Fire plug-in for the Firebase products that you want to use in your app.




sdk: flutter

# Check that you have this dependency (added in the previous step)

firebase_core: ^0.4.0+9


# Add the dependency for the FlutterFire plug-in for Google Analytics

firebase_analytics: ^5.0.2


# Add the dependencies for any other Firebase products you want to use in your app


# For example, to use Firebase Authentication and Cloud Firestore

firebase_auth: ^0.14.0+5

cloud_firestore: ^0.12.9+5

⦁        Run flutter packages get

For more information about managing packages and plug-in, refer to Using Packages.

⦁        If you have added Analytics, run your app to send verification to Firebase that you’ve successfully integrated Firebase. Otherwise, you can skip the verification step.


Visit this link –

UI is available in 2 modes:

Light mode & Dark mode

Dark mode UI:

Light mode UI:

This UI consists of various types of the plug-in, widgets functionality which are

⦁        google_sign_in: ^4.0.14

⦁        firebase_auth: ^0.15.0+1

⦁        firebase_messaging: ^6.0.2

⦁        flutter_launcher_icons: “^0.7.3”

⦁        flutter_facebook_login: ^3.0.0

⦁        http: ^0.12.0+2

⦁        community_material_icon: ^3.5.95

⦁        fluttertoast: ^3.1.3

⦁        Gradient button

⦁        Login with Google

⦁        Login with Facebook

⦁        Login with Phone

Why Use Firebase in Flutter:


  • Real-time Database: Firebase has a real-time and cloud-based database where you can store data is JSON and synchronized continuously to all connected clients. If you want to create an Android, iOS, or Web app which provides real-time updates to users without creating Database or API then you should use firebase. It is the capability to manage backend components of applications. The real-time database is the foremost advantage of the Firebase.
  • Authentication: There are many apps that need identification of a user to save user data in the cloud to provide an enhanced experience on various devices. Firebase provides instant UI Libraries and SDKs for authenticating clients across applications using email id, password, or username. Here you can integrate various sign-in techniques to allow users to log in to your app.
  • Hosting: Firebase provides fast, secure, static, and production-grade hosting for developers. It allows developers to efficiently deploy web apps and static content to a CDN (Content Delivery Network).
  • Storage: It is another best advantage of Firebase that it is very useful when you want to create an app for storing and serving files of users such and images and videos