Flutter Tutorials for Beginners – Create First Hello World Application

Flutter is a programming language based on Google’s Dart. Using Flutter, you can create both Android an iPhone applications from a single code base. That is, you don’t need to create separate application for each Android and iPhone or you don’t need to write separate code for them.

• After configuring the flutter, you need to open the IDE. Here Android Studio is used.
• Now let’s create a new Flutter project. In File -> New -> New Flutter Project

• Select the project type. (Here Flutter application is selected)

• Now give the name for the Application and project location.

• Then give company name and Finish.
• Just wait some moments to finish the setup for the new project.

There will be a default sample application for a simple counter with a button. Just remove all the codes (except first line of import).

Let’s Start Coding

Let’s create a new customized application. Google’s Flutter uses Dart language. Which is not complicated.

First of all, like C, C++ language, we have to create a main function that works at beginning of debugging. Inside the main function, we need to specify the home class of the App.

voidmain()
{
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

Here MyApp is the class name that we will create in next step.

In Flutter, everything are widgets. Mainly there two types of widgets, Stateless and StateFul.
Both have their own peculiarities. Here we start with StateFul widget which supports advanced events and functions.

There is a short cut to create StateFul Widget.
Just type ‘stful’ then press Enter key.

Now you will get a template for StateFul widget. At the mouse curser point, type the name of the class. MyApp is our class name that we specified inside the main function.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Normally StateFul widget return ‘Scaffold’ instead of a ‘Container’. So just replace Container with Scaffold.

Inside the Scaffold, you should specify application elements like appBar, body, etc. appBar contains the title of the application and body contains the content of the application.

 appBar: new AppBar(
   title: new Text("My First Flutter App"),
 ),

Inside the body, let’s create a container that contains a child of sample text ‘Hello World’.

body: Container(
          child:
          Text("Hello World"),
        )

Complete Code:

import 'package:flutter/material.dart';

void main()
{
  runApp(
    MaterialApp(
      home: MyApp(),
    ),

  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("My First Flutter App"),
        ),
        body: Container(
          child:
          Text("Hello World"),
        )
    );
  }
}

Run the Flutter Application:

Running a flutter application is similar to running the android application on android studio. Connect your phone via USB or WiFi. Click on ‘Run’ button.

There is a hot reload and Hot restart button that avoid reinstalling the application on device again and again on each debugging.

Sample Output:

Notes:

• Normally ‘return widget’ terminates with semicolon (;) and all other widgets end with comma (,).
• We will study flutter design deeply in coming lessons.

Video Tutorial