Your First Flutter 2.2 App : Hello,World

Step by Step method for making your first Flutter 2.2 App called Hello, World.

What is flutter?

Flutter is a remarkable framework for building attractive, natively compiled applications for mobile (iOS, Android), web, desktop, and embedded devices from a single codebase.

My assumptions 

1. Successfully Installed Flutter SDK & Plugin 
2. Android Studio is ready to build Flutter Applications 

Let’s start with a Hello, World Example. (Flutter 2.2 App)

What do you say when you pick up the telephone?
You say “hello,” of course. In programming, every beginner begins with a ‘Hello, world’ greeting.

Open Android Studio from your Desktop or by searching the name.

Select Create New Flutter Project from Android Studio wizard

Select Flutter App from left pane. If you’ve installed the Flutter SDK & Plugin, you could see the path of the SDK’s location.

Fill the details

Project Name	helloworld
Project location	<Browse your location>
Description	You can give anything here. I recommend descriptive words for classifying your app.
Organization	Your app needs to be recognised uniquely around the globe. This name could be your website’s reverse name.
Android Language	You can pick one of the languages here. I recommend Kotlin here.
iOS language	Choose Swift If you are using Mac for developing flutter apps
Platforms	Select both options (Android and iOS) if you are working on Mac. Windows users may have only Android for mobile app development.

The final step is flexible! Hit the Finish button.

Everybody makes mistakes

“Cannot Save Settings Invalid module name”

Flutter exacts a valid package name; you must use only lower case letters for the Dart package. Making project name to lowercase will not help sometime after this window. Making project name lowercase will not help sometime after this pop-up box. Be sure that you have given the correct name before you start coding.

The flutter will generate a simplistic counter app for you. It is awesome. Unfortunately, We have no notion about the code as a beginner. For now, just run the app by creating a virtual device.

Click on the run button

If you click on the floating action button, the value of the text will be increased by 1.

It’s time to create our flutter 2.2 app : Hello, world

Android Studio is clever! The IDE creates a file full of Dart code for you. Moreover, it highlights the matching parenthesis character. Make sure that the main.dart code appears in Android Studio’s editor.

Delete all the code, and write the instructions like below.

main.dart

import 'package:flutter/material.dart';

void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
       body: Center(
         child: Text("Hello, World"),
       ),
      ),
    );

  }
}

The main() function is the entry point of our app execution.

Flutter uses many Widgets to make a full-fledged app. MaterialApp(), Scaffold(), and Center() are Widgets that are conveniently stacked together.

The MaterialApp widget wraps several widgets that are generally needed for material design applications.

MaterialApp(. . .) is a constructor call. When flutter performs this code, it builds a MaterialApp whose starting screen is the Scaffold object.Center() is a widget that has a child widget Text(). “Hello, World ” will be displayed at the centre of the app.

Stop! Stop! Enough for beginners

Let’s run our application. Click the green run button.

Wow, Congratulation, you did it.