“Hello World” in Flutter

Flutter is a tool for cross platform mobile development. It is supported and developed by Google. Flutter uses Dart as programming language. It is free and open source. In this blog i will guide you step by step how to create your first Flutter app.

Set up environment

First we have to setup the development environment on our machine. Please use this link https://flutter.dev/docs/get-started/ to install and setup the required software's to start working in flutter.

You can watch the complete development of Hello World App on my YouTube channel

Setup IDE

Download SDK for flutter and dart and configure path in Android Studio.

Creating Project in Flutter

When all the installations are finished, a new project can be created using command line.

flutter create helloworld

soon all the project setup will be done

Structure of Flutter Project

Open the project in Android Studio or Xcode or Visual Studio or Any other editor you like.

IOS and Android folders are having native IOS and Android projects, we need to do some configuration changes in these projects according to the requirements. We will write our flutter code in lib folder.

In pubspec.yaml we will define the dependencies and assets of our project.

main.dart

By default main.dart file is executed on launch of the flutter project. In this dart file we have to start with import statement, to import material design components in our program

import 'package:flutter/material.dart';

Than We have to write the main function. main() function is the entry point of our code. Then we have to call runApp function and in this function we have to pass a widget. This widget will be displayed on the mobile screen. there are two types of widgets that we can pass in runApp function.

1. Stateless Widget
2. Stateful Widget

void main() {
  runApp(object_of_a_Widget);
}

For our first example we keep it very simple and use Stateless widget. Now we will create a stateless widget.

void main() {
  runApp(new HelloWorld());
}

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

build method of StatelessWidget will return a Widget that will be displayed on the mobile devices. Here we have used Container object which is a blank box. We have to add child's to it.

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

In the MaterialApp widget, we have provided values to the attribute , the title as text value “First Example” and home has a Scaffold widget. In Scaffold, We are creating an Appbar and body. body has as Text Widget simply calling the “Hello World”. Means we can add widgets inside other widgets.

Now our complete code is

import 'package:flutter/material.dart';

void main() {
  runApp(new HelloWorld());
}

class HelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'First Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Run the App

On the command prompt, use the following command to run the App

flutter run -d <device>

if we want to run on Android Emulator than command will be

flutter run -d emulator-5554

When we run this code it will give following output