Creating your first Flutter Application

In the previous posts, we’ve seen how to install and set up a development environment for Flutter. Now, let’s create our first ‘”Hello World” application in Flutter.

In this post, we’ll see:

• How to create a Flutter application.

Creating a “Hello World” application

Time needed: 5 minutes.

• Open Android studio and click on “Start a new Flutter project“.Open Android Studio. If you have installed the Flutter and Plugins, you will now see a new option “Start a new Flutter project“. If you don’t have this option, try reinstalling the Flutter plugin for Android studio.

• Select “Flutter Application”.

Select “Flutter Application” from the next window and click Next.

• Give your application a name.

In this window, you will see options to configure your application. You can choose a name for your application or you can leave the field as it is.
Also, there will be an option to choose the location of the Flutter SDK. If the path is not detected automatically, specify the path to the Flutter SDK using the three-dot-icon (…) near to the text field.
ClickNext to continue.

• Choose a package name and chick Finish.

Now you can provide your domain name here. This is to choose a unique package name for your application. Later, this package name will be the URL of your application.
When you are creating the application, make sure that you are connected to the internet.

After creating the project, Android Studio will show you the main.dart file which is located in the lib folder.

To write our first Hello World application in Flutter, clear the contents of main.dart. Also, delete the widget_test.dart file from the test folder.

Let’s begin by adding a reference to material.dart package. This is a library contains the widgets that have the material design.

import 'package:flutter/material.dart';

Material design is a design language designed by Google. It has some design pattern and guidelines that all applications should follow.

Next, we declare the main method, which is the entry point of the application. So, anything written in the main method will be executed when the application runs.

void main(){
  //Do your magic here
}

Now I’m adding the runApp() method to the main method. This method shows whatever is passed as the parameter to the method.

We cannot simply add the runApp() method because it expects a parameter. So I’m passing a Text widget to it. A text widget is used to display text on the screen. It takes data as the first parameter and textDirection as the second parameter.

import 'package:flutter/material.dart';

void main(){
  runApp(Text("Hello World", textDirection: TextDirection.ltr));
}

To know the parameters that can be passed to the Text Widget, place your mouse over Text() and double-click on it by pressing the Ctrl key.

If you have created an AVD earlier, run the app by clicking the ▶ button or pressing Shift + F10.

The AVD may take some time to start depending on the performance of your computer. If it takes a long time to start, it will be better to use your device or an emulator such as Bluestacks to test your application.

In the next post, we’ll see how to apply basic styles to our “Hello World” application.