Flutter Beginner guide

Flutter is an open-source UI framework. It was introduced by Google in 2017. Flutter uses Dart Language to develop mobile applications. Using Flutter we can develop cross-platform mobile applications from a single codebase.

(1)Why you should work with Flutter?

There are many reasons to work with flutter. there are many tech companies like Google, eBay, Alibaba that are using Flutter for their mobile Application. Let’s look at what and how to learn flutter.

(2)Flutter is Open-source and Free to Use

Flutter is Open-source and Free to Use that’s why it’s interesting to learn from documentation by the developers in the open developer forum.

(3)Highly Customisable

In Flutter it allows utilizing different gadgets in the development process.

(4)Flutter Gives Hot Reload Functionality

In native programming when you have to see some small changes you have to rerun the application and it takes more time.

In flutter use hot reload and changes reflect directly. You don’t need to rerun the application. so it makes development fast.

(5)Flutter Supports Google Firebase

Flutter supports Google firebase so it gives more confidence to the developer to include offices in the development environment.

(6)Lower Development Timeline and Cost

Form single codebase you can make an application for android and IOS. so it making lower development cost and time.

Here we are discussing how to learn flutter

(7)Flutter Documentation

Flutter Documentation more helpful for the learning or developing phase. It’s Cover a lot of topics like:

1. Getting Started with flutter
2. Samples — examples of code
3. Videos — many videos on the Flutter YouTube channel
4. Widgets Catalog — set of flutter widgets
5. API Docs — the API reference docs for the flutter framework

(8)Tutorial HandBook

This is a book on various Flutter concept that helps in how to deal with various problems while coding on flutter. this tutorial handbook gives a solution to the common problem faced while writing any application.

Some topics are in the handbook:

• Updating data in TextField
• Stateful widgets & Stateless widgets
• JSON Storage
• FlatButton, RaisedButton, IconButton, Checkbox
• Slider, AppBar
• Rows & Columns

(9)Flutter Application Development Quick Start Guide

Here step-by-step procedure for starting a development framework.

• How is Flutter different for app development?
• Setting up flutter
• Basics of Dart
• Basics of Flutter
• What is widget
• What is layout
• Navigation
• Networking
• JSON
• State Management

(10)How is Flutter different for app development?

Flutter Works with:

• Android & IOS
• Web & Desktop
• Auto
• Raspberry Pi

Check out this video.

(11)Setting up Flutter

Flutter is easy to set up and it depends on what OS you are using, you can see steps in this official Flutter site:

Install

When you install flutter you install dart too so no need to install dart separately.

You will need an Android Studio and Xcode as well.

(12)Dart Basics

Flutter Uses Dart Language for built Application. And Flutter uses rendering engine-SKIA.it Controls every pixel on the screen.

Official Doc for way flutter uses Dart. And Official Doc of Drat Language and Semple.

You can Practice on DartPad

For basic code, you can use DartPad.(

(DartPad)

(13)Flutter Basics

Now you are familiar with a dart. It’s time to go on Flutter.

$ flutter create app_name

And you can see something like this:

(App Name)

Open Project on VsCode or Android Studio and run the Project.

(Home Page)

Now it’s time to do what all developers do!

Setup package file: written if YAML,pubspec.

Pubspec file

(14)What is Widgets

In Flutter everything is a widget.

If you’ve not read the overview Please go back and read it :) You will get an idea about the widget. In flutter their two types of widget stateless and stateful.

Stateless widgets are those widgets whose state doesn’t change. As the name states, when an action is performed on the screen it doesn’t change its state.

When a widget needs to hold a state like the selected page at that time the stateful widget is the right choice. The current state of a widget Stored by a stateful widget.

Documentation for the stateful widget:

StatefulWidget

(15)What is the layout

In flutter including layout models, everything is a widget.

Documentation for layout in flutter is here:

Layouts in Flutter

Widgets such as ListView, Row, Column that helps other widgets to arrange.

(16)Navigation

To display data in a well-organized manner, Most apps contain multiple screens.

In Flutter For navigation, we can use Navigator.

(Navigator)

1. Navigate to the new Screen

Navigate to the new Screen

2. Pass data to a new Screen and get a result

Pass data to a new screen

Get result from screen

3. Flutter has named routes to manage all this efficiency

Navigation with Named routes

4. In named routes, we can pass arguments.

Pass arguments

(17)Networking

Generally, most apps are connected with a third-party server end get data by sending requests.

We use an HTTP pub for such stuff.

Dart Package: http

1. Fetch data from the network

In flutter, we can fetch data from the network using an http request

Data from internet

2.Authenticated requests

We can make an authenticated request by passing headers

Here is Official Doc.

3. Web sockets

Web sockets

(18)JSON

There are two strategies for JSON serialization. Automated serialization using code generation and manual parsing.

JSON and Serialization

(19)State Management

In many apps, when made some changes at some point and it reflects some changes at other points this is State management.

Flutter has multiple ways that can manage the state of the app.

Here are possible ways for state management.

1. setState way

Adding interactivity

2. Inherited Widget

This is the Official video for inherited Widgets:

https://youtu.be/Zbm3hjPjQMk

3.Provider Package

The provider is a mixture of dependency injection.

Here we have official documentation of the provider.

Provider docs

4. BLoC Pattern

BLoC pattern is a LightWeight and highly predictable state management library for Dart.

The official guide to Bloc

Conclusion:

Flutter is a really powerful Plugin. And it provides the best UI design. It takes less time than other frameworks. For someone who has an interest in flutter app development, this is the right time to learn flutter.