Flutter is increasingly being developed not only on mobile, but also on other platforms such as the web, embedded systems, and desktop apps. You only have time to learn Flutter!

What’s better than starting your first app? So, let’s get started right away!

Preferences

In this post series, I am using Visual Studio Code as my Editor. You can use any editor. Make sure the Flutter SDK is installed on your PC. You’ll also need to install Android Studio to be able to run the app in the Emulator or on any Android device. If you’re using macOS, you can also set XCode to run Flutter apps in the iOS simulator or on a real iOS device.

Our Demo App

Here, we will build a demo single-page application (single-screen app) to quickly familiarize yourself with Flutter and some of its widgets. The demo app looks like this,

This is a very easy app to build to display text in the app bar and buttons. Click the button to change the background color.

App initialization

To initialize a new application, specify the directory path in terminal/console and use the following command:

flutter create your_project_name

Alternatively, you can create a new Flutter project from Android Studio or the VS Code command palette.

Project Folder Structure

Before you start creating your first app, take a quick look at the project folder structure.

>android
>build
>ios
>lib 
   -> main.dart
>test
>.gitignore
>pubspec.lock
>pubspec.yaml
>README.md

Folderー「android」

This folder contains all the project files for your Android application. Here you can make changes and add the necessary permissions and native Android code.

Folderー「build」

This folder contains all the compiled output, such as app bundles, apk files, and other related files and folders.

Folderー「ios」

This folder has all the native code for iOS apps. Similar to the Android folder, here you can add the necessary permissions and add the native code for iOS.

Folderー「lib」

In the lib folder, you will find the main.dart file. All dart code written in this folder is compiled to native platform code (native Android and iOS) at compile time.

Folderー「test」

This folder can contain unit tests for Flutter applications.

File「.gitignore」

IF YOU’RE USING GIT AS YOUR PROJECT’S VERSION CONTROL SYSTEM, YOU’RE PROBABLY FAMILIAR WITH THIS FILE. Files and folders that you don’t want GIT to control or track changes are declared in this file.

File「pubspec.lock」と「pubspec.yaml」

This file contains all the package names you need, the version of it, a link to the contents, dependencies, the app name, the app version, the app’s dependencies, etc.

File「README」

It is a markdown file that contains all the basic information and description about the application.

Run the app on an emulator/real device

To run the app, try creating or opening an existing Android or iOS emulator. Open the ib folder and the main.dart file and press F5 to run the application. If you have flashing and dart extensions installed in the VS Code Editor, hover over the void main() function in the main.dart file to Run | The Debug option appears. 

When you run the app, a basic Flutter app is automatically generated. The main.dart file is the entry point for the Flutter application. The execution of any Flutter application must be void main(){…} It starts with: From now on, remove everything and start the application from scratch.

Build the application.

Removed the code in the main.dart file. Let’s resume creating the app as follows:

Importing Packages

First, you need to import the required packages. This application requires the material package provided to Flutter. All widgets and functions are built on this package. You can import this package with the following command:

import 'package:flutter/material.dart';

If your application needs to add other packages, the command is the same as above, just change the package name.