Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.
Introduction of Flutter
Flutter is a cross-platform, high-fidelity, high-performance mobile application development framework launched by Google and open source. Dart allows developers to develop apps, a set of code that runs on both iOS and Android. Flutter provides a wealth of components, interfaces, and developers can quickly add Native extensions to Flutter. More information about Flutter can be found on the Website of Flutter Chinese or on the Website of Flutter.
Build the Flutter development environment
Note: This article uses macOS as an example only
To develop Flutter applications, the development environment for Flutter needs to be built first. You can download the Flutter SDK directly from the official website to the path you specify, or manage the Flutter through FVM. FVM is the Flutter Version Management software. If different projects use different versions of The Flutter, you can use FVM to switch between them. It’s very convenient.
General installation and configuration
Here provide two ways, direct download and FVM download, direct download steps and the official similar, you can also directly view the official provided method.
Download the Flutter SDK
Enter theOfficial website Download pageChoose the platform you want to download from, my Mac and choose macOS.Select the latest zip package to download, the current version isFlutter_macos_2. 5.3 - stable
.stable
The version of Flutter will be updated constantly, so when you open this download page, it may be different from my current version. Just download the latest version.
Unpack the SDK package
The SDK of the Flutter contains many command line tools. We need to configure environment variables. Therefore, it is recommended to install the Flutter in the place where you normally put the command line tools.
Configure the mirror
Because Flutter needs to download the required resources from the official website when it is running, and these resources are from foreign servers, we need to change the server address to a domestic one, so that the download will not be impossible due to network problems when the resource is updated.
- If you use the default bash, configure ~/.bash_profile
- If you are using ZSH (the default for new Mac systems) then configure ~/.zshrc
Export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cnCopy the code
Configuring environment Variables
Next, the path configuration of the Flutter command line tool. Again in the Shell configuration file.
Export Flutter =~/ Flutter export PATH=$Flutter /bin:$PATHCopy the code
After the configuration is complete, open the terminal and run the following command to update the configuration file
Bash_profile $source ~/.zshrcCopy the code
Enter the Flutter detection instructions nextflutter doctor
Check to see if the configuration is OKHere you can see that the Flutter environment has been configured. My version is 1.20.3. If Android Studio and Xcode are not installed, the Flutter environment will also be installedx
.
Install and configure through FVM
Install the FVM
Add Tap for Homebrew first, if you don’t have Homebrew installed on your computer, install it first.
brew tap dashixiong91/fvm
brew install fvm
Copy the code
Environment configuration
Please copy the following code to your ~/.zshrc, or to ~/.bash.profile for older systems.
export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn export # FVM_DIR = ". $HOME/FVM "pay attention to the following path according to your installation FVM path configuration source"/usr/local/opt/FVM/init. Sh"Copy the code
Common FVM commands
FVM install <version> // example: FVM install 2.5.3 # Use <version> # Check the list of all the currently installed FVM versionsCopy the code
Points to be aware of
If the current version of FVM is 1.1.6 or later, you need to modify the configuration of FVM
# FVM. The path of the h/usr/local/Cellar/FVM 1.1.6 / libexec/FVM. ShCopy the code
Find my M1 computer path is/opt/homebrew/Cellar/FVM / 1.1.6 / libexec/FVM. Sh, according to the actual installation location.
Configuring the Android Environment
Install the Android Studio
We can go to Android StudioDomestic official website addressDownload and install. Choose the version based on your platform.
Configure the Android SDK
The installation is required according to the installation wizardAndroid SDK
.Android SDK Command-line Tools
andAndroid SDK Build-Tools
. You can also go to your preferences and check install,Preferences - Appearance & Behavior - System Settings - Android SDK - SDK Tools
.
Install the Flutter plug-in
Click on thePreferences - Plugins
Search,Flutter
, click install, the installation will be prompteddart
Click OK to install, soFlutter
The plug-in is installed.I already have it installed here, so it showsinstalled
. interminal
In the implementationflutter doctor
Let’s see if everything is OK, if it existsAndroid license
If yes, run the following command as prompted.
flutter doctor --android-licenses
Copy the code
Now that the environment is configured, run it againflutter doctor
First Flutter
Project creation
Open theAndroid Studio
, the choice ofCreate New Flutter Project - Flutter Application
, enter the project name, select the DART path, select the specified project path, and then create.Once created, open the simulator to run and you can see a simple Flutter project running. 在lib/main.dart
Some UI code is generated by default. You can seemain.dart
Refer to theflutter/material.dart
, similar to iOSUIKit
;MaterialApp
There are a lot of styles integrated into it,Scaffold
In theAppBar
You can set the navigation bar, and thenbody
To add a home screenUI
.
I met a Widget
The projectmain.dart
Delete the code, keep the navigation bar, and put a text in the middle.This is used hereCenter
andText
theWidget
, so that the text inbody
Center display.
StatelessWidget
StatelessWidget is a StatelessWidget used in scenarios where no state needs to be maintained. It typically builds the UI by nesting other widgets in the build method, recursively building its nested widgets during the build process
StatefulWidget
A StatefulWidget is a StatefulWidget. Each StatefulWidget class corresponds to a State class. State represents the State to be maintained by its corresponding StatefulWidget.
case
Let’s use ListView to implement a list of cars, first defining a model class, then defining an array of cars, datas. The definition is as follows:
class Car { const Car({this.name, this.imgUrl}); final String? name; final String? imgUrl; } final List<Car> datas = [const Car(name: 'Porsche 918 Spyder', imgUrl: 'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2 /w/1240',), const Car(name: 'Lamborghini Aventador', imgUrl: 'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1 240 ', a)];Copy the code
The use of the ListView
Pass the Builder method according to the ListView definition, and then pass an itemBuilder. ItemBuilder is a function that returns the Widget and takes 2 parameters.
Widget _itemBuilder(BuildContext context, int index) {return Container(margin: Const EdgeInsets. Only (bottom: 10.0), child: Column(children: [Image.network(datas[index].imgurl!), Text(datas[index].name!, style: const TextStyle(fontSize: 18.0),),); }Copy the code
Here we use the Column component, we make the image and file vertical, and pass _itemBuilder as an argument to listView. builder.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo'),
),
body: ListView.builder(
itemBuilder: _itemBuilder,
itemCount: datas.length,
),
),
);
}
Copy the code
And then run it and see what happens.
conclusion
Based on this article, there is a basic understanding of Flutter, from the environment construction, Android Studio configuration and project creation, to make the project run. Here’s a quick summary:
- Set up
Flutter
Development environment, you can directly download the SDK installed in the specified location of the computer, or throughfvm
Manage if the project is multi-version usedfvm
More convenient. Android Studio
The configuration of theFlutter
Project creation- Get a feel for it
Flutter
Part of theWidget
The use of