How to write a simple flutter Hello World App and understand the basics.

The entry point to flutter app is it's main() function. 

Usually to debug just use the print('Hello World') to print a statement in a console.
To show something in app screen we import the flutter material package:
A package is a library of function that you can use and this library comes with pre-made widgets known as "Material Components". Many building blocks of our app and colors are taken from this "Material Components".
If you want widgets without any material components, you can also just import widgets.dart.
By importing this package we are able to run our App using the runApp function.

runApp(){} takes any widget as its argument

Let's create a container widget and parse that in as our input argument.

Putting trailing commas after properties in a widget is a great convention. It helps with formatting.

import 'package:flutter/material.dart';
const _padding = EdgeInsets.all(16.0);void main() {
  print("Hello World!");  runApp(
    Container(
     color: Colors.purple,     ),  );}

Okz, what about the app bars, titles and bottom tabs ?
Flutter has lots of built-in covenence widgets which will help you start up an app. The canonical one is the material app. Which comes with most of the features we want in an app.
It has a title, home, theme, built-in text directionality, what to do on back button press and more. It also lets you remove the slow mode banner in the top right corner.
The Scaffold is another one, and is usually created inside of the material app.
Scaffold offers drawers, app bars, bottom navigation, tabs and floating action buttons.

void main() {
  print("Hello World!");  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,      title: 'Hello World',      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),        ),        body: Container(
          color: Colors.purple,        ),      ),    ),  );}

For cleaner code we do not want to nest our whole app ody which can get large inside the main function. So we can create an external function that returns our body Widget.

void main() {
  print("Hello World!");  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,      title: 'Hello World',      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),        ),        body: helloBody(),      ),    ),  );}

Widget helloBody(){
  return Container(
    color: Colors.amber,  );}

We can also use a stateless widget and parse in arguments for widgets color or its text in its constructor function.

import 'package:flutter/material.dart';
const _padding = EdgeInsets.all(16.0);void main() {
  print("Hello World!");  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,      title: 'Hello World',      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World'),        ),        body: HelloRectangle(),      ),    ),  );}

class HelloRectangle extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: _padding,        color: Colors.greenAccent,        height: 400.0,        width: 300.0,        child: Center(
          child: Text(
            'Hello!',            style: TextStyle(fontSize: 40.0),            textAlign: TextAlign.center,          ),        ),      ),    );  }
}

Note: with Android Studio, you can wrap our widget easily by typing Alt+Enter while your curser is inside the container you want to wrap.