Building Your First Flutter App

This post teaches you how to build your first Flutter app. You’ll learn how to create a Flutter project with the IntelliJ idea and run a debuggable version of the app. You’ll also learn some fundamentals of Flutter app design, including how to build a simple user interface and handle user input.

Before you start this, install Flutter.

1.Create a Flutter Project

Flutter Hello World

2.Create Widget

Your entire app is going to be made out of widgets.Your app is one huge widget, which has sub-widgets, which has sub-widgets, all the way down.Widgets are just like components.Flutter is a functional reactive framework and the key idea is you’re using your model data to describe templates for how your view should look at all sorts of different situations.The framework itself is the one that controls how to change between those different views.So It’s a slightly different paradigm for how you think about programming UIs.

Immutable Widgets

Rather than your more typical model view controller setup, where you have a controller that’s running back and forth and syncing these two things, you’ve got your model data describing how your view should look.This means that in practice, it gives you are really nice things like hot reload,But under the covers, while the developer doesn’t have to worry about this,this means that the widgets that are created are immutable and ephemeral and again, while you don’t have to worry about how to change a view with an immutable widget, It helps save the developer from avoiding a lot of common bugs.Like if you have persistent, long-running UI objects, they could get into inconsistent state, and it’s hard to debug.This way, it makes programming dynamic UIs much easier.Your code ends up being very modular, reusable.

1.Create Stateless widget

A stateless widget is a widget that describes part of the user interface.The stateless widget is useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself.

2.Create Scaffold widget

Scaffold Implements the basic material design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets.


An app bar consists of a toolbar, a TabBar and a FlexibleSpaceBar.App bars are typically used in the Scaffold.appBar property, which places the app bar as a fixed-height widget at the top of the screen.

The AppBar widget lets us pass in widgets for the leading and the actions of the title widget.

4.Using Material Design

A Material Design app starts with the MaterialApp widget, which builds a number of useful widgets at the root of your app, including a Navigator, which manages a stack of widgets identified by strings, also known as “routes”. The Navigator lets you transition smoothly between screens of your application. Using the MaterialApp widget is entirely optional but a good practice.

Flutter Hello World

Now, AppBar and Scaffold widgets from material.dart, our app is starting to look at bit more like Material Design. For example, the app bar has a shadow and the title text inherits the correct styling automatically. We’ve also added a floating action button for good measure.



Leave a Reply

Your email address will not be published. Required fields are marked *