Roadmap to developing with "Flutter"

Syllabus for learning Flutter

Flutter is a UI toolkit developed by Google and its demands are increasing tremendously. If you want to become a Flutter mobile App developer, you’re at right place. This blog gives you the basics knowledge of how to start with Mobile Development.

Dev Environment

Vs code, Android Studio

Choose either of this IDE from above and give a play around the plugins and shortcuts which save your time in the future. Learn the habit of using version controls. The most famous one is “Git”.

Dart Introduction

Dart is a programming language designed for client development, paired with a flexible execution runtime platform for app frameworks. Google develops it. The goal of Dart is to provide a multi-platform development such as Desktop, Mobile, Web.

Basis of Dart

1. Types, Syntaxes, Class

2. Object - Oriented programming

3. Constructors

4. Methods(Functions), Loops, Lists, Named parameters

Once you’re done with the IDE and programming language, you must be familiar with the widgets available in Flutter.

Stateless Widget vs Stateful Widget

In Stateless Widget the build function called only once, which makes the User Interface of the Screen, but whereas the Stateful Widget build functions can alter in the future, they are mutable.

Styles

However, these comes along with the flutter installation

1. Material

2. Cupertino

Assets

This comes to play a role when you need to custom your font style, images, audio and video in-order to design your apps. Below you can find an example of a custom font.

fonts:

    - family: Schyler

      fonts:

        - asset: fonts/Schyler-Regular.ttf

        - asset: fonts/Schyler-Italic.ttf

          style: italic

Packages

dependencies:

  flutter:

    sdk: flutter

    cupertino_icons: ^1.0.2

The code example given above is the place where you can add your packages. This piece of code will be present in pubspec.yaml

Animation

This comes handy when you want users to have fun with your app with attractive animations and motions. There are some widgets which help you out to kick start with Animations.

1. Animated Align

2. Animated Container

3. Hero

4. Animated Opacity

5. Animated Widget

Stage-management in Flutter

Using the state management, you will reduce your code and make your app more dynamic.

1. Provider

2. GetX

3. BloC

4. Riverpod

HTTP Flutter

• Working with Json

• Function references

• Issuing HTTP requests

• Send Data

• Fetch Data using HTTP

Navigation

Navigator.pushReplacement(

          context, MaterialPageRoute(builder: (b) => FirstScreen()));

In the above code, the pushReplacement means you don’t need the user to navigate back to the previous screen.

Navigator.push(

          context, MaterialPageRoute(builder: (b) => FirstScreen()));

Push means there is an availability of navigating to the previous screen.

You can also use pushNamed, pop, popNamed etc...

Firebase

It’s a Google product which requires a special note. It will be useful when you want to have authentication, analytics for quality assurance, notification and storage. This is the most used database service for Flutter App.

Other Databases

Other than firebase you can also prefer below listed database

• SQLite

• Moor

• NoSQL

• MongoDB

Why Firebase?

I prefer Firebase because you have an easy way to start with authentication such as

• Google Singin

• Email and password Singin

• Forget Password

• Website Hosting

You can host your flutter web app at

The below given sites are useful to host your flutter Web Application

• GitHub pages,

• Google Cloud hosting,

• Firebase Hosting.

• Heroku

You can also work with finding location, connectivity, geo-coding, reverse coding, payment by using API’s and packages.

Conclusion

Do you find the blog useful? If so, share with your friends ! 🌟