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.

class HelloWorldHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  .....
  }
}

Create Scaffold widget

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

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      .....
      body: new Center(
          child: new Text("Hello World")
      ),
      floatingActionButton: new FloatingActionButton(
          tooltip: 'Add', // used by assistive technologies
          child: new Icon(Icons.add),
          onPressed: () {
            sayHi();
          }
      ),
    );
  }

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.

new Scaffold(
      appBar: new AppBar(
        title: new Text("Main Page"),
        leading: new IconButton(icon: new Icon(Icons.menu),
            tooltip: "Navigation Menu",
            onPressed: null),
        actions: [
          new IconButton(icon: new Icon(Icons.save),
              tooltip: "Save Item",
              onPressed: null)
        ],
      ),
     ....
    );

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.

void main() {
  runApp(new MaterialApp(
    title: "Hello World", //App Name
    home: new HelloWorldHome(),
  ));
}

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.    ]]>