Step By Step Tutorial in Learning Flutter: My First Flutter Application

This article is a definitive guide with step by step screenshots in creating your very own first Flutter application.

Click the Windows logo on far left corner, type in Android Studio. The results will show Android Studio from the list, click it.

You will see the android studio splash screen wait until it finishes

Fill in the following details as shown below. The Flutter SDK path should be filled in automatically for you, if not navigate to the directory where your Flutter SDK path is. Mine, I have it in C:\src\flutter

Type in the Company domain then click Finish

This will now create the Flutter Project

Similar window will appear, if the Top of the Day dialog box appears, just click Close button

Now, let us clear the main.dart, click anywhere inside the lengthy text inside the main.dart then delete everything. That is, highlight or select all the text then press delete key

Type the code or easily highlight code below and copy then paste it on Android Studio main.dart

import 'package:flutter/material.dart';

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

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

Will look like as below

Let us Run. If you don’t see a device emulator from your list, please see the article here.

Click the Green Arrow to Run it

Let us do some explanation.

With the red lines, those values came from the Text of AppBar and the Text from the body

Let’s do some exercise, so if we want to change the Hello World! to Good bye Covid-19

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: Center(
          child: Text('Good bye Covid-19'),
        ),
      ),
    );
  }
}

So let us run it again to see the change

Click the green arrow to run

Now, you will the change

Let us change the Welcome to Flutter in the AppBar to Lesson 01 using Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lesson 01 using Flutter'),
        ),
        body: Center(
          child: Text('Good bye Covid-19'),
        ),
      ),
    );
  }
}

Run it and the changes will appear showing Lesson 01 using Flutter

You may be wondering how about the other Welcome to Flutter, where can this be found, and what is the purpose of it

Click or tap the button as shown below from your emulator

We know now where it will be written

Basically, it is a small description that user will see when they switch to different opened applications

Let us tap or click again the button shown below

So let us go ahead and try changing it to let say Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lesson 01 using Flutter'),
        ),
        body: Center(
          child: Text('Good bye Covid-19'),
        ),
      ),
    );
  }
}

Run the application by clicking the Run green arrow button at the top right

Once it is run, click or tap again the button shown

Oh, don’t forget to Save your work as often as possible

To save your work, press Ctrl+S just like in any other application like Microsoft Word

That’s pretty much it, enjoy! Feel free to explore and do some changes.