How to make your First Flutter App

Flutter allows you to make beautiful natively iOS, Android, and Web apps from a single codebase.

Flutter is known for its fastest development, Expressive and Flexible UI, and Native Performance. The most loving feature of flutter that every dev loves is its, Hot Reload option which allows developers to see the changes of code within seconds without being restart of the app.

What is Flutter?

Flutter is Google’s offering to the developers for easy and quick open-source, cross-platform app development to build Android, iOS, and Web apps. With Flutter, you code once and compile it for multiple platforms.

Prerequisites for creating an App

Note: Flutter uses Dart as a programming language. If you don’t know much about that, you can start with their documentation here.

Setup flutter SDK

1. Download the flutter Windows 1.22.5 SDK
2. Extract the zip file and add flutter SDK like an example, C:\src\flutter.
3. Now, Open Terminal and run flutter doctor to check if there are any dependencies you need to install or not to complete the setup. If not, then install all those dependencies and run the command again.

You can check this flutter documentation for installation.

Setup Android Studio

1. Download and install Android Studio
2. After installation, go through the ‘Android Studio Setup Wizard’ and install other dependencies.
3. Setup Android Device and Emulator.

Setup VS Code

1. VS Code is preferred by most of developers as it is lightweight and flexible as compared to Android studio. Download here
2. Install Dart and Flutter extensions. Go to View>Command Palette and type install and select ‘Extensions: Install Extension’.
3. Enter flutter and then dart and install them.
4. Now, run flutter doctor in terminal to check if there is any issue or not.

Let’s create your first flutter app

We’re going to create a basic single page business card app.

Create a New Flutter Project

1. Start VS Code
2. Select Terminal>New Terminal
3. Type: flutter create ‘your_app_name’ Press: Enter
4. Wait for the project creation to continue, and the main.dart file to appear

Now, you have created your project, it's time to make your first app.

Note: You’ll mostly edit lib/main.dart, where the Dart code lives.

Go to Your-project-directory/lib/main.dart file, you will find the below sample flutter code:

Now, delete all the code because we are going to create the app from scratch.

You are in the main.dart file, now first we’ll import some packages that are needed to run the flutter app.

Add the following:

Creating a Material Design

Flutter comes with a package that makes it very quick to start making a Material-style app. It provides a simple way of creating a screen that has an app bar and body.

Add the following code:

Stateless Widgets

In this app, we are using a StatelessWidget. This means that it cannot be changed dynamically.

To make our app as a business card, copy-paste the below code and replace all code with the previous code to make your app:

Result

Below is the final simple business card app that we have made:

To further improve the app you can change the background color, text style, etc.

That’s all, now you have created your first flutter app.