Summary of the article

Here’s what you can learn from reading this article:

  • Install the Flutter
  • Create the first Flutter project
  • Experience the code hot deployment of Flutter

Flutter

The recent announcement of Flutter1.5 at Google/IO generated a lot of discussion in the industry and it was time to get a feel for its development experience. Overall, the Flutter installation experience was very good with few difficulties. My machine is MacOS 10.14.3

The installation

Download flutterSDK flutter_macOS_1.5.4, then unzip and change the file to the specified directory, my directory is as follows:

/Users/riverli/my/flutter
Copy the code

Add the flutter command to the system environment by adding the following code to.bash_profile:

export PATH="$PATH:/Users/riverli/my/flutter/flutter/bin"
Copy the code

Environmental detection:

Execute the flutter doctor command to list your environment problems on the command line. Just install the flutter doctor as prompted. Achieving the following results means your environment is fine.

~ $ flutter doctor Doctor summary (to see all details, run flutter doctor -v): ✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.3 18D109, ✓ ✓ Android toolchain - develop for Android Devices (Android SDK version 28.0.3) [✓] iOS toolchain - Develop for iOS Devices (Xcode 10.2) [✓] Android Studio (version 3.3) [✓] Connected device (1 available) • No issues found!Copy the code

I wrote the flutter code using Android Studio. If you do not want to use Android Studio, you do not need to install the flutter code. Android Studio requires the Flutter plugin to be installed to develop code; Two plug-ins need to be installed for the Flutter and Dart. Dart installation is required during flutter installation. The installation process is as follows. In Android Studio’s preferences, install the following:

Create the first FLUTTER project

The project can be created either from the command line or through Android Studio, which will be used in subsequent articles. Run the following command:

flutter create my_app
Copy the code

Enter the project you created

cd my_app
Copy the code

To run the project, run the following command:

flutter run
Copy the code

You may get the following prompt:

No connected devices.

Run 'flutter emulators' to list and start any available device emulators.

If you expected your device to be detected, please run "flutter doctor" to diagnose
potential issues, or visit https://flutter.dev/setup/ for troubleshooting tips.
Copy the code

This means that the connected device is not found, and the project execution is not known. You can execute flutter Emulators to view the list of emulators. Executing an item yields the following information:

 ~/my/flutter/my_app $ flutter emulators
2 available emulators:

4.7_WXGA_API_28     • 4.7in WXGA    • Generic • 4.7  WXGA API 28
apple_ios_simulator • iOS Simulator • Apple

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

You can find more information on managing emulators at the links below:
  https://developer.android.com/studio/run/managing-avds
  https://developer.android.com/studio/command-line/avdmanager
Copy the code

I have two emulators available on my machine 7_WXGA_API_28 and apple_iOS_simulator. Let’s start one of them. I chose the iOS emulator and execute the following command:

 ~/my/flutter/my_app $ flutter emulators --launch apple_ios_simulator
Copy the code

Then execute Flutter Run to start the project.

 ~/my/flutter/my_app $ flutter run
Copy the code

The diagram below:

Code hot deployment

When developing native Android or iOS projects, you need to restart the application every time you modify the code. Flutter does not need to do this. After you modify the code, you can deploy the code by pressing the R key on the command line. The development experience is very comfortable. Dart file (line 95 You have pushed the button this many times:’) and try to push the text. Press R on the command line to see the effect and the textures are gone.

conclusion

OK, this article is over. I wonder if you have built your environment, created your first FLUTTER project, and experienced hot deployment of code after reading this article. If you have any questions, you can follow my official account and leave a message to me, and I will help you answer it in the first time.

In the next article I will make a simple list using Flutter.