Flutter Hello World Example

In the last tutorial, we were able to set up the environment for Flutter development. In this tutorial, I am going to show you Flutter hello world example. If you still have not installed Flutter on your system first you must have to install flutter. Its super easy.

In install flutter tutorial we have created an application. I am going to extend the same code here.

I am going to remove all the given sample code. We will write all the necessary code by ourselves so we can understand it in a better way. First of all, we have to import a package. We will import flutter/material.dart package.  Using this package we can have all the material design features.

On the second step, We are writing the main function. As we already know every programming language has a main() function which is the entry point. Then we have to call runApp and in runApp we have to pass a runApp widget. I am going to pass MaterialApp widget. MaterialApp widget has so many attributes. For this tutorial, I am using the home attribute and giving a Text Widget. In the Text Widget simply calling the “Hello World”.

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
      home: new Text("Hello World"),
    ));

This is all the code we need for flutter hello world example. Now hit the run button in Android Studio.

We can see the hello world is printed but it looks ugly. This example gives us confidence that everything is working pretty well.

Flutter Hello World 

Now we are going to make some changes in the code so we can have a better looking hello world example. Now in the main() function, we are calling a new class HelloWorld and it extends a StatelessWidget class. Right now you don’t have to worry about what is StatelessWidget. We will talk about it in the coming tutorials.

import 'package:flutter/material.dart';

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

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

StatelessWidget has a build() function which is returning a Container. A container is like a box but we are developing a MaterialApp. So we will replace it with MaterialApp widget. In the MaterialApp widget, we will provide the title name attribute and home has a Scaffold widget. Scaffold widget is like a structure. So in Scaffold, We are creating an Appbar and body. body is centred with Center widget.

import 'package:flutter/material.dart';

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

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

It is time to run the application once more. BOOM here we go. Now we have a really nice looking flutter hello world example.