Create a Simple "Hello World" application using Flutter SDk

What you'll learn in this Section

• How to create a flutter project using command prompt.
• Material design package that we going to use to develop this beautiful application in Android.
• Definition of Stateless Widget.
  

Step: 1 Let's create a Simple Hello World Project using Command Prompt

• Open your command prompt on clicking the Windows button and type CMD or CTRL + R to open the Run application in your windows and type CMD to open Command Prompt.
• Once Command Prompt has been open, type the following command like this "flutter create your_project_name".

Finally, We have created a simple flutter project.

Step: 2 Creating a simple "Hello World" Application

• Go to the lib directory and open main.dart file using your code editor tool which we discussed in another blog post.
• Main.dart is the start point of the flutter application everything you write goes into here.
  
  
  

Before developing the application let's understand the basics

In flutter, everything is Widget, even padding and alignment is a Widget.

1. void main() => runApp(MyApp()); - the following code is start point where Flutter starts to build the application.
2. import 'package:flutter/material.dart'; - Importing the material package which we going to use to develop the android application. Material design package Standards followed on android.
3. Scaffold Widget, provide the default material for the app like app bar, title, body, and more property.
4. class MyApp extends StatelessWidget - extends is nothing but inherit(inheritance) the Stateless widget class from the material package. The return type of this class is Widget
5. build(BuildContext context) is an argument passed in the build method where the metadata information is passed between widget and flutter, it acts like tunnel to pass the various information.
6. AppBar widget holds the information about app bar of the app.
7. Body widget holds the subtree widget Center and the Center widget hold the text widget.
8. The Center widget aligns the subtree widget to the center of the screen.
9. Text widget which prints to the screen.

Stateless Widget: 

• Stateless widget is an immutable state, to put in simple words for understanding Stateless widget doesn't change its state or redrawn when the application in action/once after the build.
  
  
  
  
  
  

  Code:

  
  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Welcome to Flutter',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          body: Center(
            child: Text('Hello World'),
          ),
        ),
      );
    }
  }

• Once everything is completed, finally we need to build the application using command flutter run "your application name" in your terminal.

• debug mode apk will be installed on your emulator device and output will be displayed.
  

Ho ho ho!
Vignesh (VS)
Developer

Blogger

Marketer.