Shulou(Shulou.com)06/03 Report--

Author: Izriel, an iOS development engineer.

Flutter is a cross-platform solution launched by Google to help developers develop a new mobile UI framework for high-quality native applications on Android and iOS. Earlier, we introduced "the advantages and structure of cross-platform framework Flutter", summarized the necessity of Flutter choosing Dart language and its bottom-up framework structure, you can click on the title link to review the previous article. In this article, we will take you to learn more about the construction and operation of Flutter.

01Flutter development environment building (Windows version)

First, the system environment requirements: to install and run Flutter, the development environment must meet the following conditions.

Operating system: Windows 7 or later (64-bit)

Disk space: 400MB

Tools: Flutter relies on command-line tools such as PowerShell 5.0 or later and Git for Windows (Git command line tool).

We can go to the Flutter website to download the latest available installation packages.

Download address:

Https://flutter.io/sdk-archive/#windows

Note: the channel of Flutter changes frequently, please refer to the official website. At the same time, we also recommend downloading the installation package under the Flutter github project.

Download address:

Https://github.com/flutter/flutter/releases

After the download is complete, extract the installation package zip to the path where you want to install Flutter SDK (note: do not install Flutter to a path that requires high permissions, such as C:Files). After that, find flutter_console.bat under the flutter file in the Flutter installation directory, double-click to run and start the flutter command line.

Second, update the environment variable: if you want to run the flutter command on the command line of the Windows system, the developer needs to add the following environment variable to the user PATH: "Control Panel-> user account-> change my environment variable". At the same time, under the "user variable", check whether there is an entry named "Path": if the entry exists, append the full path of flutter\ bin, use; as a delimiter. If the entry does not exist, create a new user variable Path, and then take the full path of flutter\ bin as its value. The execution of Flutter requires networking, and you need to set up:

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

Export FLUTTER_STORAGE_BASH_URL= https://storage.flutter-io.cn

Run the flutter doctor command: developers need to run the flutter doctor command on the Flutter command line to see if other dependencies need to be installed, and if so, install it. Type flutter doctor in the terminal, and if you get a result similar to the following figure, you may even get more x than the figure, mainly because Android studio is not installed. Below we will list the installation steps for Android Studio.

4. Installation of Android Studio:

Download Android Studio from the official website at https://developer.android.com/

Start Android Studio, execute the Android Studio installation Wizard, and install the latest Android SDK, Android SDK tools, and Android SDK build tools, all of which are required for Android development with Flutter

Open the Android Studio software, find the configuration of Plugin, search for the Flutter plug-in, and the page shown in the figure appears. Click "Search in repositories" in the middle, and then click install. Restart after all installation is complete.

5. Install Android certificate

After installing Android Studio, open the terminal (command line) again and type flutter doctor, and the number of x will be significantly reduced, but you may still encounter 1-2. If only one means that no certificate is installed, the developer only needs to execute the following command in the terminal:

Flutter doctor-android-licenses

When prompted for Y _ hand N selection, please select Y directly to complete the installation.

02Flutter development environment building (Mac version)

First, the system environment requirements: to install and run Flutter, the development environment must meet the following conditions.

Operating system: MacOS (64-bit)

Disk space: more than 700m. If editing tools such as Android Studio are included, try to be larger than 3G.

Command line tools: bash, mkdir, rm, git, curl, unzip, which, brew.

Download the Flutter SDK package:

It is recommended to download it on the official website at https://flutter.io/setup-macos/.

After the download is complete, extract the installation package to the directory you want to install, such as: cd ~ / development

Unzip ~ / Downloads/flutter_macos_v0.5.1-beta.zip

Third, configure environment variables

After the compressed package is downloaded, select the location to decompress, and the location of the decompressed package should still be used when configuring the environment variables below.

First, open the terminal tool and use vim to configure the environment variables. The command is as follows:

Vim / .bash_profile

Then, add a line of code to the open file to configure the flutter command so that it can be used anywhere. The added code is:

Export PATH=/app/flutter/bin:$PATH

This command needs to be written according to where the package is decompressed, and the content is your path. After the configuration is complete, you need to reload it with the source command as follows:

Source / .bash_profile

After completion, the installation of flutter is almost complete, but for development, you also need to use commands to detect whether it has been successfully installed.

Fourth, check the development environment: as shown in the figure above, Flutter has been successfully installed, but the development environment is not yet available. You can use the flutter doctor command to check the plug-ins and software that need to be installed.

Install Xcode: to develop Flutter applications for iOS, you need Xcode9.0 or later.

Install Xcode 9.0 or later in the Apple Store.

Configure the Xcode command line tool to use the newly installed version of Xcode with the following command:

Sudo xcode-select-switch/Applications/Xcode.app/Contents/Developer

In most cases, this is the right path when you want to use the latest version of Xcode. If you need to use a different version of Xcode, specify the appropriate path.

Make sure that the Xcode license agreement is by opening the Xcode once or through the command sudo xcodebuild-license.

Install Android Studio: like Windows, you need to install Android Studio to build and run Flutter programs on Android devices.

03 upgrade Flutter

Flutter SDK has multiple branches, such as beta, dev, master, and stable, where stable is the stable branch and dev and master are the development branches. After the flutter installation is complete, you can run flutter channel to view all the branches.

To upgrade flutter SDK, you need to execute the command: flutter upgrade.

This command updates both the Flutter SDK and flutter project dependency packages. To update only the project dependency package (not including Flutter SDK), you can use the following command:

Flutter packages get gets all the dependent packages of the project.

Flutter packages upgrades gets the latest version of all dependent packages for the project.

04 configuration and use of development tools

I. configuration and use of Android studio

First, you need to install two plug-ins, Flutter and Dart plug-ins:

Flutter plug-ins: support Flutter development workflow (running, debugging, hot overloading, etc.)

Dart plug-in: provides code analysis (validation when entering code, code completion, etc.).

1. Installation steps

Start Android Studio

Open plug-in preferences (MacOS:Preferences > Plugins, Windows:File > Settings > Plugins)

Choose Browse repositories first. , select the flutter plug-in and click install

The plug-in takes effect after restarting Android Studio.

two。 Create a Flutter application

Select File > New Flutter Project

Select Flutter application as the project type, then click Next

Enter a project name (such as myapp) and click Next

Click Finish

Wait for Android Studio to install SDK and create a project.

3. Run the application

Navigate to the Android Studio toolbar

In target selector, select an Android device that runs the application. If the list is not available, select Tools > Android > AVD Manager to create

Click the Run icon in the toolbar

If everything is fine, you will see the launched application on the device or emulator, as shown in the following figure:

4. Experience hot overloading: Flutter can achieve a fast development cycle through hot overloading, which loads modified code in real time without restarting the application without losing state. You can see the changes on the device or simulator by making simple changes to the code and then reloading them using IDE or command-line tools.

Open the lib/main.dart file

Change the string 'You have pushed the button this many times:' to' You have clicked the button this many times:'

Do not press the stop button, let the application continue to run

To see the changes, call Save (cmd-s / ctrl-s), or click the hot reload button (the button with the lightning icon).

II. Configuration and use of VS Code

1. Install the flutter plug-in:

Start VS Code

Call View > Command Palette...

Select Extensions:Install Extension action after entering 'install'

Enter flutter in the search box, select 'Flutter'' in the search results list and click Install

Select 'OK' and restart VS Code

Verify the configuration: first, call View > Command Palette..., enter 'doctor',' and then select 'Flutter:Run Flutter Doctor'action. Check to see if there is a problem with the output in the "OUTPUT" window.

two。 Create a Flutter application

Start VS Code

Call View > Command Palette...

Enter 'flutter' and select' Flutter:New Project'action

Enter a Project name (such as myapp) and press enter

Specify the location to prevent the project, and then confirm

Wait for the project creation to continue, and the main.dart file is displayed.

3. Experience hot overload

One of the disadvantages of writing Flutter in VSCode is the need to manually load updated applications, which to some extent affects productivity. When we run flutter run, a red text prompt appears, as follows:

R key: hot load after click, that is, reload

P key: display the grid, you can grasp the layout

O key: toggle the preview mode of Android and iOS

Q key: exit debug preview mode.

4. Write a HelloWorld program

When we have set up an open environment, according to the usual practice, we need to write a HelloWorld program. Write the following code in the root .dart file as the Flutter master file.

Import 'package:flutter/material.dart'

/ / main function (entry function). Next, I will briefly talk about the function of Dart.

Void main () = > runApp (MyApp ())

/ / declare the MyApp class

Class MyApp extends StatelessWidget {/ / override the build method

@ overridebr/ > / / override the build method

@ override

/ / returns a Material-style component

Return MaterialApp (

Title:'Welcome to Flutteraa'

Home:Scaffold (

/ / create a Bar and add text

AppBar:AppBar (

Title:Text ('Welcome to Flutter')

),

/ / add a hello world text in the middle area of the body

Body:Center (

Child:Text ('Hello World')

),

),

);

}

}

The result is shown in the following figure:

05 connecting devices to run Flutter applications

Window only supports building and running Flutter applications for Android devices, while macOS supports both iOS and Android devices. The following describes how to connect Android and iOS devices to run flutter applications.

1. Connect Android simulator

To run and test the Flutter application on the Android simulator, follow these steps:

Start Android Studio > Tools > Android > AVD Manager and select Create Virtual Device

Select a device and select Next

Select one or more system impressions for the version of Android you want to simulate, and then select Next. X86 or x86x64 image is recommended

Under "Emulated Performance", select Hardware-GLES 2.0 to enable hardware acceleration

Verify that the AVD configuration is correct, and then select Finish

In "Android Virtual Device Manager", click Run on the toolbar. The simulator starts and displays the boot screen of the selected operating system version or device

Run flutter run to start your device. The name of the connected device is Android SDK built for, where platform is the chip family, such as x86.

Second, connect the real Android equipment

To prepare to run and test the Flutter application on an Android device, an Android version 4.1 or later Android device is required.

Enable developer options and USB debugging on Android devices

Use USB to plug your phone into your computer. If the device is prompted for debugging authorization, please authorize your computer to access the device

Run the flutter devices command on the command line to verify that Flutter recognizes the Android device to which you are connected

Run and start your application flutter run.

Third, connect the iOS simulator

To prepare to run and test the Flutter application on the iOS simulator, follow these steps:

On your MAC, find the simulator through Spotlight or the following command: open-a Simulator

Ensure that the simulator is using a 64-bit device (iPhone 5s or later) by checking the settings in the simulator Hardware > Device menu

Depending on the size of the computer screen, the analog HD screen iOS device may overflow the screen. You can set the device scale under the Window > Scale menu of the simulator

Run flutter run to start the flutter application.

4. Connect the real iOS equipment

If you want to install the Flutter application on a real iOS device, you need to make some settings in Xcode in addition to some additional tools and an Apple account.

1. Install homebrew (skip this step if brew is already installed)

two。 Open the terminal and run the following commands:

Brew update

Brew install-HEAD libimobiledevice

Brew install ideviceinstaller ios-deploy cocoapods

Pod setup

If any of these commands fail with an error, you need to run brew doctor and follow the instructions to resolve the problem

3. Follow the Xcode signing process to configure the project:

Open the default Xcode workspace via open ios/Runner.xcworkspace in your Flutter project directory.

In Xcode, select the Runner project on the left side of the navigation panel.

On the Runner target Settings page, make sure to select your development team under General > Signing > Team. When you select a team, Xcode creates and downloads development certificates, registers your account with your device, and creates and downloads configuration files.

If you want to start your first iOS development project, you need to log in to Xcode using your Apple ID. Any Apple ID supports development and testing, but if you want to distribute applications to App Store, you must register for the Apple developer program.

When you first use a real attach device for iOS development, you need to trust both your Mac and the development certificate on that device. Select trust when the iOS device connects to the Mac for the first time. Then go to the settings menu on the iOS device and select General > device Management and trust your certificate.

Run flutter run to start the flutter application.

The push technology team has also done a lot of development and exploration based on the Flutter platform, in which the message push plug-in Getui Flutter Plugin, as a special Package, can provide low-level encapsulation for Android and iOS, and component functions at the bottom of Flutter, so that Flutter can easily call the Native module. With the help of Getui Flutter Plugin, developers can quickly build a stable and efficient message push system to meet the needs of daily work.

Download link:

Https://github.com/GetuiLaboratory/getui-flutter-plugin

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.