Hello World!  ?

In this tutorial, i’m going to guide you how to create your first Flutter app. As always, this will be the most popular hello world app.

Before you start, I hope you’re having a basic knowledge of programing. A little javascript knowledge + basic OOP knowledge is really enough to get started even though we use Dart programing language here.

Prerequisites

  • Basic object oriented programing programing knowledge
  • Flutter should be already installed in your computer with path is setup. If not, you can follow one of our guide. ( MacOS Guide , Windows Guide )

So let’s started  ?

First open your command line app if you’re using windows or terminal app if you’re using MacOS or Linux.

Navigate to the directory where you want to create your project. In my case, I’ve created a directory in my Windows Desktop with the name “FlutterApps“, so i’m going to navigate there by typing “cd %HOMEPATH%\Desktop\FlutterApps” and hit enter. Alternatively, if you’re using MacOS or Linux, and project directory is located in your desktop with the name “FlutterApps“, type “cd ~/Desktop/FlutterApps” and hit enter.

cd %HOMEPATH%\Desktop\FlutterApps

Creating the project..

I’m going to name my Flutter app “Hello Word”. Get back to your previous command line window, type “flutter create hello_world” and hit enter. When we run this command, Flutter will make us a project directory with standard directory structure and required files to get started quickly.

flutter create hello_world

Cool! Flutter starter app is ready for us now. Let’s go ahead and open the project from one of Flutter supported IDE. I recommend you to use Visual Studio Code or Android Studio.

If you're using Android Studio, Start Android Studio, Click on "Open an Existing Android Studio Project" , Select our "hello_word" directory from file explorer and click open.

If you're using VS Code, then open VS Code app, Go to File -> Open Workspace. Select our "hello_word" directory from file explorer and click open.

Understanding the Flutter’s Directory Structure

Since our Flutter starter app is ready now, let’s understand what’s in inside.

Flutter App Directory Structure
Directory/FileWhat’s that?
androidIf you want to write some native android codes or want to use native libraries for your app, this is where you can put them
hello_world.imlThis is an auto generated file when you run “flutter create” command. Usually you’ve nothing to do with this.
iosIf you want to write some native iOS/Swift codes or want to use native libraries for your app, this is where you can put them
libThis is where we write our Flutter application codes. Most of your time will spend here.
lib/main.dartThe main entry point of your Flutter app. When your app is starting, Flutter will look for this file to boot your application.
pubspec.yml & pubspec.lockpubspec.yml is the main configuration file where you can define your app name, description, version, dependencies, flutter sdk version uses for development, etc. pubspec.lock is the auto generated file from your configurations.
testThis is where you put your test cases

Let’s start coding

Initially when your app is starting, Flutter is looking for the main.dart file inside the lib directory to boot our application. You can see this file is already exists in our project with some example code. We don’t need it right now, so go ahead and DELETE ALL THE CONTENTS in lib/main.dart file.

First thing we need to do is import flutter library to our main.dar file. This will make us enable to use flutter framework functions within our app. We’re using Flutter’s material library here because it contains lots of beautiful reusable widgets. We can use Flutter code library instead, but that’s going to make our app bit more advanced and complicated.

lib/main.dart

import 'package:flutter/material.dart';

Now let’s create the main entry point class of our app. We’ve to extend this class with Flutter’s StatelessWidget class. I’m going to name our class with HelloWorldApp.

lib/main.dart

import 'package:flutter/material.dart';

class HelloWorldApp extends StatelessWidget {
	
}

Our main class is now ready, but that’s not enough. We’ve to inform Flutter that this is our main class. It’s a just simple one line of code. You can see i’ve mentioned our class name ‘HelloWorldApp‘ .

lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
	
}

Now we’ve to implement build method within this class, Initially, Flutter will call this method to load our application content.

class HelloWorldApp extends StatelessWidget {
	Widget build(BuildContext context) {

	}
}

Now all we have to do is return our app UI from this method. To do that, we need to create a container to hold all of our home page contents, so let’s make it.

class HelloWorldApp extends StatelessWidget {
	Widget build(BuildContext context) {
		return Container(
		)
	}
}

I want to display our Hello world text on center of the screen. To this, Flutter provides a widget called “Center“. What Center widget do is, it aligns all of its child content to middle of the screen. So let’s add “Center” widget to our container as a child. When we want to nesting an element or container, we have to add it as a child property In Flutter world.

class HelloWorldApp extends StatelessWidget {
	Widget build(BuildContext context) {
		return Container(
			child: Center(

			)
		)
	}
}

Now our app layout is ready. So we can add our “Hello world” text inside the Center widget. To do that, we can use Text widget provided by flutter. Let’s go ahead and add it.

class HelloWorldApp extends StatelessWidget {
	Widget build(BuildContext context) {
		return Container(
			child: Center(
				Text(
					"Hello world!"
				)
			)
		)
	}
}

Our primary app layout is ready now. But we need to make few improvements to it looks good.

First we need to define text direction (left to right or right to left) in order to get Text widget work. Otherwise our app won’t run. We can do it by adding textDirection property to our Text widget. If we want to make text direction left to right, we can add ‘TextDirection.ltr’ as its value. To make it right to left, we can add ‘TextDirection.rtl’. Once we add that, our final code will looks like below.

lib/main.dart

import 'package:flutter/material.dart';

void main() => runApp(HelloWorldApp());

class HelloWorldApp extends StatelessWidget {
	Widget build(BuildContext context) {
		return Container(
			child: Center(
				Text(
					"Hello world!",
					textDirection: TextDirection.ltr,
				)
			)
		)
	}
}

Let’s run our app…

First we need to start a device simulator to do that. If you want to test you app with an iPhone device, you can use Xcode simulator. Not sure how to open a simulator? please follow our guide on How to install Flutter on MacOS.

If you want to test the app with an Android simulator, first you need to open Android Studio, Go to AVD manager and run an emulator from the list. Other than that, you can also just connect your Android phone with your computer using a data cable and run the app on your device.

Run the App with Android Studio

You can select the device from Android Studio toolbar and run the app.

Run the App with Android Studio

Run the App with Visual Studio Code

If a device simulator/emulator already running, you can see it on the bottom of VS code editor. Just select the device to run the application on it.

Now you will be able to see your app on simulator/emulator screen like below.

Hello World App

Little bit more styling? Sure

Let’s add bit more styling to our app for make it looks cooler ?. I like to add white color to the app background, make font color blue and font size little bit larger, so it will be easier for our eyes.

You know we’ve put our all the UI elements inside a container element. So by default, the Flutter’s container color is black. After bit of exploring on Flutter’s official documentation for Container widget, i’ve found that it’s supporting a property called ‘decoration’ to change container style. As the documentation mentions, Container class is a type of a box, we can use BoxDecoration class to add styling. Flutter also provides list of colors we can use within apps.

Same way, i’ve explored the Flutter documentation for Text class and learned how to style it. Once i’ve added all the style changes to our app, the code become looks like below.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      child: Center(
        child: Text(
          'Hello World!',
          textDirection: TextDirection.ltr,
          style: TextStyle(
            fontSize: 32,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

And the UI become looks like this;

Flutter Hello World App

Congratulations! You’ve build your first mobile app with Flutter. In next tutorial, i’ll guide you how to say hello world with flutter in Material Design way.

Thanks for reading. ?

Share article:

Permalink: