In this post, 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


  1. File>New Project.
  2. Select Flutter application as the project type
  3. Enter a project name
  4. Click Finish
    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.

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.

Create Scaffold widget

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

AppBar

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.

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 a 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