Create your first Flutter app - Hello Flutter

View more Tutorials:

Follow us on our fanpages to receive notifications every time there are new articles. Facebook Twitter

1- Article objectives

In this article, I'm going to guide you to create your first Flutter application on Android Studio and run the app with Android Emulator successfully.
First of all, make sure that you have successfully installed the following necessary tools:

2- Creating Flutter project

On Android Studio, create a Flutter project.
  • File > New > New Flutter Project...
The project has been successfully created. Here is its structure:

3- Project structure explanation

The folder automatically generates code for the Android app.
The folder automatically generates code for the iOS app.
The home folder contains the Dart code of the app.
The file will be called to start the app.
The folder contains Dart codes used to test the app.
Sample code
Git version control file - This file contains the configuration of the GIT project.
The folder is automatically generated by the Flutter tool.
The file is automatically generated which contains a list of dependencies being used by the project.
The project file of Android Studio.
The file is used to declare resources related to the project such as images, fonts, etc.
This file should be added to GIT Control to ensure that your development team members use the same library versions.
The file describes the project, which is written according to the Markdown structure.

4- Writing code for application

Delete all the contents of the main.dart file and replace them with new ones.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World Demo Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      home: MyHomePage(title: 'Home page'),
class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      body: Center(
            'Hello World',

5- Run the application

The Flutter app needs to be deployed to an Android or iOS device to run. Therefore, during the app development process, you have one of the following options:
  1. Connect your physical Android device to your computer, and turn on Developer mode.
  2. Connect your physical iOS device (such as an iPhone) to your computer, and turn on Developer mode.
  3. Run an Android Emulator.

We are programming the Flutter application on Android Studio, so the best approach is to run an Android Emulator.
Now on Android Studio, select:
  • Tools > AVD Manager
Or click on the "AVD Manager" icon on the toolbar:
Then launch a virtual device on the list:
If you do not see any virtual device on the list, create one by following the instruction below:
Android Emulator is launched and get ready for deploying the Flutter app.
On the Android Studio toolbar, run your Flutter app as what you see in the illustration below:
Here is the result you get:

View more Tutorials: