Creating A HelloWorld Flutter Application

In this tutorial, we will show you how to write a HelloWorld application using Flutter. With Flutter, you can create natively compiled, multi-platform applications from a single codebase, which can be used on any device.

Prerequisites

Before you begin this guide you'll need the following:

• A local development environment. You can check out the following tutorial here...
  
  
• Installed Android Studio. You can check out the following tutorial here...
  
  
• Installed and configured Flutter. You can check out the following tutorial here...

Step 1 — Create Your Flutter Project

Let's start by creating our project in the following directory /home/digitalriver/flutterprojects

Run the following command to create the project directory:

mkdir /home/digitalriver/flutterprojects
  

Navigate to the created directory:

cd /home/digitalriver/flutterprojects

Run the following command:

flutter create hello_world_app

You’ll see the following output:

Creating project hello_world_app...
Running "flutter pub get" in hello_world_app... 3.8s
Wrote 96 files.
All done!
In order to run your application, type:
$ cd hello_world_app
$ flutter run
Your application code is in hello_world_app/lib/main.dart.

Step 2 — Modify The Following File lib/main.dart

In this step, we are going to modify the contents in the following file lib/main.dart. 

Modify the contents of the following file: lib/main.dart using your favorite text editor for this example we are using vi:

vi lib/main.dart

Delete all of the code from lib/main.dart. Replace it with the following code:

import 'package:flutter/material.dart';

void main(){

  runApp(
    new MaterialApp(
      title: 'Hello World App',
      home: new myApp(),
    )
  );

}

class myApp extends StatelessWidget {
  
  @Override
  Widget build(BuildContext context) {
    
      return new Scaffold(
      appBar: new AppBar(
        title: new Text('Hello World App'),
      ),
      body: new Center(
        child: new Text(
          'Hello, world!'
        ),
      ),
    );
  }
}

Save the file contents and quit the text editor

Step 3 — Run The App

In this step, we are going to run the app in our selected IDE. 

Run the app in the way your IDE describes. You should see either Android, iOS, Windows, Linux, macOS, or web output, depending on your chosen device.

flutter run
  

You should get output similar to the following:

Conclusion

In this article, you should have created a basic HelloWorld app and run it in your IDE of choice.