Write First Application

After installing Flutter Development environment and IDE, it's time to create your first app. Follow the steps below to write your first mobile app.

Step 1: Open Terminal on source code storage path:

You may need CD command to change the directory on the terminal. 

It will change the directory where you want to store your flutter apps source code.

Step 2: Run the create command:

flutter create testapp //  is app name

It will create an app with the name, you can replace your own app name. Remember, space and special characters are not allowed on the app name.

This command will create an app with a custom package name, you will have to edit your package name while publishing. It is a bit lengthy. You can set the package name while creating your app. To do that, run the "create" command like below:

flutter create --org com.testapp.flutter testapp // replace package name and app name

When you run create command, flutter will create an app folder, you can load that folder with code editors. 

If you have already configured the Android emulator, then run the command below to run your program

cd testapp

flutter run

Source Code Files and Folder Structure:

When you load the source code folder with any IDE, you will see different kinds of folder and files, among them, some major files and folders are explained below:

Files and Folders:

• android/ - Android App core files. It needs to configure the android environment.
• ios/ - iOS App core files.
• lib/ - Writing and storing Dart codes 
• ---- main.dart - startup index file
• pubspec.yaml - Flutter configuration file

Write your First Application:

Before writing your first mobile app, you should have basic programming concepts such as variables, object-oriented programming, loops, conditional statements, etc.  Open main.dart file and clear all default codes and follow the explanation below to make the "Hello World" app. 

import 'package:flutter/material.dart';

void main() {
  // initial default method which is first executed
}

main() is the first method that will execute by default. You have to start to write further coding inside this method.

Now create a new class and extends it with StatelessWidget

import 'package:flutter/material.dart';

void main() {
}

class MyApp extends StatelessWidget{
}

On VS Code or android studio, the red line will appear on "MyApp" due to syntax error, click on it, the yellow balloon will appear, click on it and then click on "create 1 missing override(s)", the following code will appear.

import 'package:flutter/material.dart';

void main() {
   
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

On main() method, put the following code.

runApp(MyApp()); 

Now, create a home page class and extends it with StatelessWidget

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         title: Text("Welcome to Flutter")
       ),
       body: Center( 
          child: Text("Hello World"),
       )
    );
  }
}

Now, in MyApp class, put the following code in widget build:

 return MaterialApp(
       home: Home(), //home class
 );

Final Code:

import 'package:flutter/material.dart';

void main() {
   runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         title: Text("Welcome to Flutter")
       ),
       body: Center( 
          child: Text("Hello World"),
       )
    );
  }
}

This is your "Hello World" first application written with Flutter, now run the app on an emulator or physical mobile device. The output will look like the images below.

Android	iOS