Flutter Introduction

• Flutter is an open-source mobile application development framework launched by Google and has cross-platform, high-fidelity and high-performance features. The Dart language allows developers to create apps that run on both iOS and Android. Flutter provides a rich set of components and interfaces that developers can quickly add native extensions to the Flutter. Also, Flutter uses the Native engine to render views, which undoubtedly provides a good experience for users.

• The Flutter Widget is built with a modern responsive framework, inspired by React. The central idea is to build your UI with widgets. Widgets describe what their views should look like given their current configuration and state. As the widget's state changes, the widget rebuilds the UI, and Flutter compares the changes to determine the minimum change from one state to the next in the underlying rendering tree.

The advantage of Flutter

• Cross-platform paint engine
  Flutter differs from most other frameworks for building mobile applications in that it uses neither WebView nor native controls of the operating system. Instead, Flutter uses its own high-performance rendering engine to draw widgets. This not only ensures the consistency of the UI on Android and iOS, but also avoids the limitations and high maintenance costs of relying on native controls.

• A high performance
  The Flutter's performance depends on two things. First, The Flutter APP was developed by using Dart language.Dart is basically the same speed as JavaScript in JIT(Just-in-time) mode. But Dart supports AOT(Ahead of time), and when run in AOT mode, Faster than JavaScript. Second, Flutter uses its own rendering engine to draw the UI, so there is no need to communicate with Native during the layout process.

• Compatibility
  Flutter is a single language and a single framework independent of the platform, so it does not need to do platform adaptation as often as RN.

• Hot reload
  Which can greatly improve the development efficiency.

• Rich widget libraries
  A large number of widget libraries have been implemented officially, and a large number of open source widgets have been unofficially contributed.

• Development tool support
  Android Studio, IntelliJ, and VSCode all provide development plug-ins with a high degree of completion, as well as support for autoprompt, breakpoint prompt, stack information view and so on.

The disadvantage of Flutter

• There are still many problems with the current version of Flutter.

Build the Flutter development environment on Windows

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

• Operating Systems: Windows 7 SP1 or later (64-bit)
• Disk Space: 400 MB (does not include disk space for IDE/tools).
• Tools: Flutter depends on these tools being available in your environment.
  • Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10).
  • Git for Windows 2.x, with the Use Git from the Windows Command Prompt option.
    If Git for Windows is already installed, make sure you can run git commands from the command prompt or PowerShell.

Install Flutter

Since sometimes access to Flutter in China may be restricted, Flutter has officially set up a temporary image for Chinese developers. you can add the following environment variables to the user environment variables:

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Get the Flutter SDK

1. Download the following installation bundle to get the latest stable release of the Flutter SDK:

https://flutter.dev/docs/development/tools/sdk/releases

2. Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges).

Update your path

If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

• From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
• Under User variables check if there is an entry called Path:
  • If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
  • If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value.

Note that you have to close and reopen any existing console windows for these changes to take effect.

Run flutter doctor

From a console window that has the Flutter directory in the path (see above), run the following command to see if there are any platform dependencies you need to complete the setup:

C:\src\flutter>flutter doctor

This command checks your environment and displays a report of the status of your Flutter installation. Check the output carefully for other software you might need to install or further tasks to perform (shown in bold text).

Install the Flutter and Dart plugins

To install these:

1. Start Android Studio.
2. Open plugin preferences (Configure > Plugins as of v3.6.3.0 or later).
3. Select the Flutter plugin and click Install.
4. Click Yes when prompted to install the Dart plugin.
5. Click Restart when prompted.

[Build the Flutter development environment on Mac]

(https://flutter.dev/docs/get-started/install/macos)

Hot reload

Flutter’s hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs.

To hot reload a Flutter app:

• Run the app from a supported Flutter editor or a terminal window. Either a physical or virtual device can be the target. Only Flutter apps in debug mode can be hot reloaded.
• Modify one of the Dart files in your project. Most types of code changes can be hot reloaded; for a list of changes that require a hot restart, see Limitations.
• If you’re working in an IDE/editor that supports Flutter’s IDE tools, select Save All (cmd-s/ctrl-s), or click the Hot Reload button on the toolbar:

Flutter module supports hot reload

run:

flutter attach

Waiting for a connection from Flutter on SM N9600...
Syncing files to device SM N9600...
 6,061ms (!)

 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on SM N9600 is available at: http://127.0.0.1:61382/dcDqRpWTVVI=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

The above indicates that the connection is successful, as long as there is a change, You can see the changes by clicking on the keyboard R or r.
If you are waiting after running the command, try to kill the application process and restart it. Go to the relevant Flutter page to connect.

Some problems when running flutter project

• When compiling and packaging, the relevant package could not be found, because the three default configuration places of flutter adopted the package of Google path.

• Handling errors in Flutter（https://flutter.dev/docs/testing/errors）

For example, to make your application quit immediately any time an error is shown in release mode, you could use the following handler:

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  FlutterError.onError = (FlutterErrorDetails details) {
    FlutterError.dumpErrorToConsole(details);
    if (kReleaseMode)
      exit(1);
  };
  runApp(MyApp());
}

• Flutter app error - getter 'value' was called on null

If you have created and assigned value to the variable and still it shows getter 'value' was called on null, try to Run or Restart your app instead of Hot Reload. Because Hot Reload will not call initstate() (where variables assign their values) which will be only called by Restarting the app.

• Conflict of gradle version

What went wrong:
A problem occurred configuring project ':shared_preferences'.
> Could not resolve all artifacts for configuration ':shared_preferences:classpath'.
   > Could not resolve com.android.tools.build:gradle:3.4.0.

The build.gradle file in the Android root directory is configured as follows:

classpath 'com.android.tools.build:gradle:3.5.0

The version of the Android gradle plug-in for shared_preferences is not consistent with the version configured in the project. So you need to modify the Android gradle plug-in for shared_preferences to match the project.

The below is the directory:

flutter SDK directory\.pub-cache\hosted\pub.flutter-io.cn\shared_preferences-0.5.6+2\android\build.gradle