Create Your First Flutter App and Learn Flutter Framework
By: Mahmud Ahsan
Tags: Android App Development, Software Development, Software Engineering, Flutter, iOS App Development

4. Create a New Flutter Project in Android Studio

Select New Flutter Project from the File →New menu.

Screen captured by the author

You will see the following screen. Now select Flutter Application and click Next.

Screen captured by the author

Now write a project name, select the Flutter SDK path, set the project location, and click Next. For the project name, I use “short_profile”

Screen captured by the author

Now write a package name or use the default one suggested and click Finish.

Screen captured by the author

After clicking Finish, you will see the following screen.

Screen captured by the author

5. Understanding Android Studio

If you’re the first time you could watch this video tutorial to understand how to use Android Studio to create the Flutter app. Alternatively, you just follow to read the rest of the article.

How to use Flutter

Screen captured by the author

Basically, you will see this screen after creating a flutter app in android studio. Here I marked four numbers:

You can select any device, iOS simulator, or Android emulator You can run the app All the resources and source files. You can click the arrow to open any directories Console output

5.1 iOS Simulator

If you use macOS, you can install the iOS simulator. Just follow the steps described here below the macOS install.

5.2 Android Emulator

No matter what operating system you use, you can create Android Emulator to run your app on Android devices. To know how to create an android emulator follow the steps mentioned here.

Also on the above source, you will learn how to run a flutter app on real android devices.

6. Main Dart Program

Now double click main.dart file to open the code on the right side screen. And select all the code and remove it.

Screenshot captured by the author

6.1 Hello World

Now write the following code on the main.dart file. Now select Android Emulator or iOS Simulator or real device, and click Run.

You will see the following screen if you run on the iOS simulator.

Screenshot captured by the author

6.1.1 Understanding the Code

So let me discuss with you the code we’ve written so far.

At the top we wrote:

import 'package:flutter/material.dart';

This is how we import other code or libraries in a Flutter app. In this app, we are using material design. Flutter framework has built-in libraries for that and this is how we import the library.

6.1.2 main() Function

The next line is the main function. main() function is the entry point for an app. So the iOS or Android operating system will call this function to run our app.

Here for the main function, we use the arrow or fat arrow function => to define the function body. Where we used another built-in function runApp() . Within the function, we instantiate an instance of MyApp() widget.

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

6.1.3 MyApp Widget

MyApp is a stateless widget. That means this widget doesn’t contain any state.

What is a Widget?

According to the flutter dev:

Flutter widgets are built using a modern framework that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state.

And What is a State?

State is a kind of data which may change anytime. And when the data change, the view refereing to that state will re-render to show the updated data.

You can also refer to the following link to understand more:

As MyApp is a StatelessWidget , it doesn’t contain any stateful data that may change and trigger to re-render. But a stateless widget may contain a stateful widget.

In a StatelessWidget , you must have to define the build method. So we override the build method and this method returns a MaterialApp widget.

MaterialApp basically follows the material design patterns, and provides some useful widgets to create an app. To know more about it follow the source:

Within the MaterialApp we used a Scaffold widget for the home and for appBar we use AppBar Widget to show a beautiful top bar with a title.

We also used a Center widget as the body of Scaffold widget, and the Center widget has a child widget where we add a Text widget.

We also used debugShowCheckedModeBanner: false as a parameter of MaterialApp . It means to hide the debug text at the right corner.

All of these are built-in widgets, using which we create this beautiful “hello world” application.

Screenshot captured by the author

So far we used the following widgets: