Flutter

Introduction

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

Fast: Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.
Productive: Build and iterate quickly with Hot Reload. Update code and see changes almost instantly, without losing state.
Flexible: Control every pixel to create customized, adaptive designs that look and feel great on any screen.

Reach users on every screen, deploy to multiple devices from a single codebase: mobile, web, desktop, and embedded devices.

iOS and Android apps: Build features once and deploy to both iOS and Android. Cupertino and Material designs are built into the Flutter framework, so your apps feel at home on both platforms.
Web apps: Reach users everywhere by deploying Flutter apps on the web. Build fast prototypes and deploy your mobile app to the web from the same codebase.
Windows, macOS, and Linux apps: Transform your apps into desktop experiences with a single codebase and familiar tooling. Target Windows, macOS, and Linux without rewriting.
Embedded: Create custom solutions with the power and flexibility of Flutter. Deploy anywhere, including smart devices, cars, and more.

Installation

You need to go Flutter web site and get started to installation of Flutter. Select the operating system on which you are installing Flutter. Each system has own system requirements. Just read the documentation.

Follow selected operating system setup. Basicly you will need to go through a following steps:

Download the Flutter SDK
Update your path, so you can run Flutter commands
Run flutter doctor, to see if there are any platform dependencies you need to complete the setup
Platform setup for iOS and/or Android emulator or devices

Android

To develop Flutter apps for Android, you need to install Android Studio first. Read more from here Install Android Studio - macOS or Install Android Studio - Windows.

iOS

To develop Flutter apps for iOS, you need a Mac with Xcode installed. Read more from here Install Xcode. Note that you can't create iOS apps with Windows.

Create a First App

Create a new Flutter app with a below command:

1	`flutter create my_app`

First project creation will resolve all dependencies in flutter/packages/flutter_tools and project will be created after all dependencies are got. You should see a below message after project is created:

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd my_app
  $ flutter run

Your application code is in my_app/lib/main.dart.

Run First App in emulator

Android

Once you have Android Studio installed on your PC or Mac. One best way is just to launch Android studio and start emulator from there. Select one of your Virtual Device and run it.

In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_SDK_ROOT environment variable to that installation directory.

> flutter devices
3 connected devices:

sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
macOS (desktop)              • macos         • darwin-x64     • macOS 11.6.5 20G527 darwin-x64
Chrome (web)                 • chrome        • web-javascript • Google Chrome 112.0.5615.121

Before you can use Flutter, you must agree to the licenses of the Android SDK platform. Make sure that you have a version of Java 11 installed and that your JAVA_HOME environment variable is set to the JDK’s folder. Android Studio versions 2.2 and higher come with a JDK, so this should already be done.

Open an elevated console window and run the following command to begin signing licenses.

1	`flutter doctor --android-licenses`

Note

You might have already made an agreement in Android Studio if you have used it!

Go to your my_app directory and launch your Flutter App:

cd my_app
flutter run

You should see your project compiling, linking and signing process:

Using hardware rendering with device sdk gphone64 x86 64. If you notice graphics artifacts, consider enabling software rendering with
"--enable-software-rendering".
Launching lib/main.dart on sdk gphone64 x86 64 in debug mode...
Running Gradle task 'assembleDebug'...                            133.5s
✓  Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app-debug.apk...        1,378ms
Syncing files to device sdk gphone64 x86 64...                   1,692ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on sdk gphone64 x86 64 is available at: http://127.0.0.1:56701/Soruc1-09a4=/
The Flutter DevTools debugger and profiler on sdk gphone64 x86 64 is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:56701/Soruc1-09a4=/

After a small amount of time your app should be visible in Android emulator.

iOS

Once you have Xcode installed on your Mac, find the Simulator via Spotlight or by using the following command to launch iOS emulator

1	`open -a Simulator`

Go to your my_app directory and launch your Flutter App:

cd my_app
flutter run

You should see your project compiling, linking and signing process:

Launching lib/main.dart on iPhone 13 in debug mode...
Running Xcode build...                                                  
 └─Compiling, linking and signing...                        41.8s
Xcode build done.                                           67.4s
Syncing files to device iPhone 13...                               318ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on iPhone 13 is available at: http://127.0.0.1:55128/p31Uc6OJJbs=/
The Flutter DevTools debugger and profiler on iPhone 13 is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:55128/p31Uc6OJJbs=/

After a small amount of time your app should be visible in iOS emulator.

Set up an editor

You can build apps with Flutter using any text editor combined with Flutter’s command-line tools. However, we recommend using one of our editor plugins for an even better experience. These plugins provide you with code completion, syntax highlighting, widget editing assists, run & debug support, and more.

VS Code is a lightweight editor with complete Flutter app execution and debug support. Install the Flutter and Dart plugins

Start VS Code.
Invoke View > Command Palette….
Type “install”, and select Extensions: Install Extensions.
Type “flutter” in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin.

Validate your setup with the Flutter Doctor

Invoke View > Command Palette….
Type “doctor”, and select the Flutter: Run Flutter Doctor.
Review the output in the OUTPUT pane for any issues. Make sure to select Flutter from the dropdown in the different Output Options.

Write your first Flutter app

You are now ready to start the “First Flutter app” codelab. In about an hour and a half, you will learn the basics of Flutter by creating an app that works on mobile, desktop, and web.

Link: Your first Flutter app