“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

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

Setup IDE

Creating Project in Flutter

flutter create helloworld

soon all the project setup will be done

Structure of Flutter Project

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

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

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