Build and create the first Flutter program in the Flutter environment

Posted by dsantamassino on Mon, 10 Jan 2022 06:07:56 +0100

What is Flutter

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

advantage

  • It is claimed that it can develop Android and iOS native level applications at one time, hot reload and flexible user interface,
  • Write a set of code in Dart language to run on Android and iOS platforms at the same time. The performance is infinitely close to native. It supports android 4.1 or above and iOS 8 or above. Generally, I haven't heard of the ghost of Dart. However, ah, don't be nervous. Dart's language can be said to be Java syntax. so, it's easy for us Android developers to accept
  • The class libraries of Java and kotlin are called in fluent, and of course swift is also called. There is no need for developers to configure it again
  • And the official version of fluent can realize cross platform
  • -It fully supports development in the existing development tools, and Dart language has the advantages, so that the same function only needs a little code. The iteration is more convenient, and the hot reload function

We Android developers can directly use Android studio for development, which is very simple

Fluent architecture

Fluent is divided into two parts. The upper layer is the functional responsive Framework (open source) and the lower layer is the Engine. It can be understood that App is developed based on the Framework and runs in the Engine.

Install the Flutter

Environment: Mac Development tool: Android studio 3.0

  • Install the Flutter 1. Download the Flutter source code (the official recommendation is to download the beta branch)
git clone -b beta https://github.com/flutter/flutter.git

2. After downloading the code, open bash in the terminal_ The profile file is configured. When the file exists, open and edit the file open -e .bash_profile

export PATH=$PATH:XXX/flutter/bin   perhaps(The effect is the same)
export PATH="XXX/flutter/bin:$PATH"

Update the newly configured environment variable. The command is as follows: source .bash_profile As shown below

3. Then enter fluent to test. If common not found does not appear, the configuration is successful. Then verify that the PATH contains a flitter

4. Execute the command fluent doctor to detect dependencies that need to be installed.

wangweideMac:~ wangwei$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.6.0, on Mac OS X 10.12.6 16G1510, locale zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
 ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✗] iOS toolchain - develop for iOS devices
 ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
   Download at: https://developer.apple.com/xcode/download/
   Or install Xcode via the App Store.
   Once installed, run:
     sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
 ✗ Brew not installed; use this to install tools for iOS device development.
   Download brew at https://brew.sh/.
[✓] Android Studio (version 3.0)
[✓] Connected devices (1 available)

! Doctor found issues in 2 categories.
wangweideMac:~ wangwei$

Prove that the installation is successful If the second item is android toolchan Where there is an error, you need to download the new sdk according to the prompt. I encountered this pit during the installation process,

Configure Android Studio

Download the plug-in shuttle. dart will be automatically downloaded during the download process Add dart and fluent plug-ins in Android Studio, where dart is used for code analysis and fluent is used for project compilation.

Configuring fluent will automatically download the Dart plug-in together

Create the first shutter demo

  • Android studio create Open Android Studio and create a new fluent project Click new – > new shutter project – > shutter application – > select the shutter SDK (just downloaded) – > finish to complete the creation
  • Terminal creation The simplest command. Note that this naming method is recommended for fluent. For a new project, the project name cannot contain capital letters, which is different from Android Stuidio.
flutter create myflutterapp
cd myflutterapp
flutter run

The interface of creating fluent project may be blocked for a while. You may encounter: Running "flutter packages get" in try_flutter_app...

You can consider using it at this time Domestic mirror image . Here is our environment variable configuration:

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

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

After setting the image, you can run other commands, such as fluent run or fluent packages get

The following code is a successful process

I/SurfaceView( 6339): updateWindow -- OnPreDrawListener, mHaveFrame = true, this = io.flutter.view.FlutterView{cff2a5f VFE...... .F...... 0,0-720,1280}
 5.4s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on vivo Y67A is available at: http://127.0.0.1:49604/
For a more detailed help message, press "h". To quit, press "q".
I/[MALI][Gralloc]( 6339): [+]r_hnd(0x7f6e98b140), client(61), share_fd(69)
D/GraphicBuffer( 6339): register, handle(0x7f6e98b140) (w:720 h:1280 s:720 f:0x1 u:0x000b00)
I/[MALI][Gralloc]( 6339): [+]r_hnd(0x7f6e98bc80), client(61), share_fd(71)
D/GraphicBuffer( 6339): register, handle(0x7f6e98bc80) (w:720 h:1280 s:720 f:0x1 u:0x000b00)
I/System  ( 6339): FinalizerDaemon: finalize objects = 1

This completes the construction of the Flutter environment and the creation of the first Flutter program

Problems encountered

Flutter doctor Waiting for another flutter command to release the startup lock

When you open Android studio, the simulator at the top is always in the loading state, even if the simulator has been opened. Prompt for running the shuttle doctor

Waiting for another flutter command to release the startup lock

Check github's shuttle issue and find the solution as follows: 1. Open the installation directory of flutter / bin/cache/ 2. Delete lockfile file 3. Restart Android studio

Topics: Flutter

Hot Topics

©2024 Programmer Think