Create your first Flutter app - Hello Flutter

View more Tutorials:

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

android
The folder automatically generates code for the Android app.
ios
The folder automatically generates code for the  iOS app.
lib
The home folder contains the  Dart code of the app.
lib/main.dart
The file will be called to start the app.
test
The folder contains  Dart codes used to test the app.
test/widget_test.dart
Sample code
.gitignore
Git version control file - This file contains the configuration of the  GIT project.
.metadata
The folder is automatically generated by the Flutter tool.
.packages
The file is automatically generated which contains a list of dependencies being used by the project.
.iml
The project file of Android Studio.
pubspec.yaml
The file is used to declare resources related to the project such as images, fonts, etc.
pubspec.lock
This file should be added to GIT Control to ensure that your development team members use the same library versions.
README.md
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.
lib/main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  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;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(this.title),
      ),
      body: Center(
          child:
          Text(
            '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 > ADV Manager
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: