How I Understood Flutter in 1 Day and nailed it.

This is a long overdue article ,which I finally started. This article is all about how I got started with Flutter in very first day and almost dead on.This article will solely concentrate about the essentials of Flutter which you need to understand before you dive into it.

Language to write on  :- Flutter uses dart as a programming language which itself is fairly easy to get started with and this article is all about it.but first understand why did Flutter choose to use Dart?

Why Dart ?

Dart is neat , short and strongly typed object oriented language . Dart delivers high performance and delivers predictable performance and it can be used as a cross platform language,. Dart compilation can be :-

JIT (Just in Time) :-

This enables for exceptionally fast development cycles and game-changing workflow , features like HOT RELOAD allows reloading the code on the running app without losing the state massively reducing development time.

AOT (Ahead of Time) :-

Dart is AOT (Ahead Of Time) compiled to fast, predictable, native code, which allows almost all of Flutter can be written in Dart. . The Dart code (both the SDK’s and yours) are ahead-of-time (AOT) compiled into a native, ARM library.

This is about Dart and now lets jump into the essentials of Flutter .

The Essentials of Flutter :-

Almost Everything is a Widget or more precisely a hierarchy of Widgets .

But , what is a Widget?

Widgets are the foundation of flutter apps ,the central idea is that you build your UI out of widgets, it describes how the view should like given their current configuration and state.

runApp function inflate the given widget and attach it to the screen.

Whenever the state changes it rebuild its description ,it takes the given Widget and makes it the root of the widget tree.

Did I said state?

Widgets can be of two types either stateful or stateless , take a look at these different types of widgets so that we can get a better understanding of them and know which one to use when it comes to defining our own widgets.

Stateless widgets

A widget that does not require mutable state or in other words static widget  . There are cases where you’ll create widgets that don’t need to manage any form of internal state.

They do not depend on any data change or any behavior change. For Example. Text, Icon, RaisedButton are Stateless Widgets.

Stateful widgets

A widget that has mutable state or in other words dynamic widget  . They allow us to create widgets which can dynamically change their content over time. , they can be updated during runtime based on user action or data change. If a Widget can change its state during run time it will be stateful widget.

Material app widget :-

How to set app title , theme , remove debug banner ?

Well , Material App Widget is the answer.

MaterialApp is top level widget , a convenience widget that wraps a number of widgets that are commonly required for material design applications. But what about other standard elements like appbar , drawer ? For this you need to understand Scaffold .

Scaffold widget :-

Scaffold implements the basic material design visual layout structure.

![](https://cdn-images-1.medium.com/max/160
0/1*KnnEZbsOylkz28bzb7Llzw.jpeg)

Some main properties of Scaffold Widget :-

1. Appbar (Toolbar)

2. Body (Container for any view)

3. Drawer (DrawerLayout)

4. BottomNavigationBar (BottomNavigationView)

5. [FloatingActionButto]
   (https://docs.flutter.io/flutter/material/FloatingActionButton-class.html)n

6. BottomSheet

Some other important widget :-

Container Widget:- A convenience widget that combines common painting, positioning, and sizing widgets. Container has only one child (generally contains rows or columns ).

Try to wrap everything inside container widget as they have some important properties like alignment,color,margin and padding and can be treated as single entity / module ,subdivide apps to sections ,grouping , makes it easier to customize.

Example:-

new Container(
  color: Colors.amber.shade400,
  alignment: FractionalOffset.center,
  child: new Row(
    children: <Widget>[
 ],

)

Important Properties :-

alignment → Align the child within the container.

child → The child contained by the container.

decoration → The decoration to paint behind the child.

color → A background color which is to be applied to the container

foregroundDecoration → The decoration to paint in front of the child.

margi n → Empty space to surround the decoration and child.

padding → Empty space to inscribe inside the decoration. The child, if any, is placed inside this padding.

Row Widget:- A Row is a widget used to display child widgets in a horizontal manner. Rows have children ( multiple widgets can be wrap inside it ) .

Example :-

new Row(
    children: <Widget>[
    new Text(‘The first text widget’, textAlign: TextAlign.center),
    new Text(‘The first text widget’, textAlign: TextAlign.center),
    new Text(‘The first text widget’, textAlign: TextAlign.center)
 ],
)

Column Widget:- A Column is a widget used to display child widgets in a vertical manner. Columns have children ( just like rows it can also wrap multiple widgets ) .

Example:-

new Column(
    children: <Widget>[
      new Text('The first line of text'),
      new Text('The second line of text'),
      new Text('The third line of text'),
    ],
)

Stack Widget:- A widget that positions its children relative to the edges of its box or for overlapping content.

Flex Widget:- A widget that displays its children in a one-dimensional array.

Expanded Widget:- A widget that expands a child of a Row , Column or Flex.

Inspecting Flutter :-

Flutter Widget Inspector

The Flutter framework uses widgets as the core building block for anything from controls (text, buttons, toggles, etc.) to layout (centering, padding, rows, columns, etc.). The Inspector is powerful tool for visualizing and exploring Flutter these widget trees. It can be helpful when:

• Undestanding existing layouts
• Diagnosing layout issues

To start click “Select widget” on the Flutter Inspector toolbar and then click on the device to select a widget. The selected widget will then be highlighted on the device and in the widget tree.

Hope you enjoy the article! Leave a comment below or inbox me in facebook if with any questions / suggestions!