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.stableThe 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 doctorCheck 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 ToolsandAndroid 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 - PluginsSearch,Flutter, click install, the installation will be prompteddartClick OK to install, soFlutterThe plug-in is installed.I already have it installed here, so it showsinstalled. interminalIn the implementationflutter doctorLet’s see if everything is OK, if it existsAndroid licenseIf 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.dartSome UI code is generated by default. You can seemain.dartRefer to theflutter/material.dart, similar to iOSUIKit;MaterialAppThere are a lot of styles integrated into it,ScaffoldIn theAppBarYou can set the navigation bar, and thenbodyTo add a home screenUI.

I met a Widget

The projectmain.dartDelete the code, keep the navigation bar, and put a text in the middle.This is used hereCenterandTexttheWidget, so that the text inbodyCenter 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 upFlutterDevelopment environment, you can directly download the SDK installed in the specified location of the computer, or throughfvmManage if the project is multi-version usedfvmMore convenient.
  • Android StudioThe configuration of the
  • FlutterProject creation
  • Get a feel for itFlutterPart of theWidgetThe use of