Flutter-初次体验

Atom
461 阅读5分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Flutter简介

Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native 扩展。 关于Flutter的介绍，这里不做过多的阐述，可以直接通过Flutter中文网或者Flutter官网去了解。

搭建Flutter开发环境

注意：本篇仅以macOS为例 要开发Flutter应用，首先需要搭建Flutter的开发环境。可以直接从官网下载Flutter SDK到你指定的路径，也可以通过fvm去管理，FVM(Flutter Version Management)是Flutter版本管理软件，如果不同的项目采用不同版本的Flutter可以通过fvm去切换，非常方便。

常规安装和配置

这里提供两种方式，直接下载和fvm下载，直接下载的步骤和官方差不多，也可以直接查看官方提供的方法。

下载Flutter SDK

进入官网下载页面选择你要下载的平台，我用的Mac这里选择macOS。 03.png 选择最新的压缩包下载，当前的版本是flutter_macos_2.5.3-stable，stable代表稳定版本，flutter版本会不断的更新，所以当你打开这个下载页面时可能和我现在的版本不一样，下载最新即可。 04.png

解压SDK包

下载完成后，需要把SDK包解压到一个安装路径，Flutter的SDK中包含了很多的命令行工具，我们需要配置环境变量，所以建议安装在平时放命令行工具程序的地方，我这里放在用户家的目录下~/flutter，这个根据自己的情况而定。

配置镜像

因为Flutter在运行的时候需要去官网下载所需要的资源，而这些资源是在国外的服务器上，因此我们需要更改为国内的服务器地址，这样在更新资源的时候就不会因为网络问题而无法下载。

  • 如果你使用默认的bash那么配置~/.bash_profile
  • 如果你使用zsh(Mac新系统默认使用zsh)那么配置~/.zshrc
# Flutter镜像配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
配置环境变量

接下来，讲Flutter命令行工具的路径配置一下。还是在Shell的配置文件中。

# Flutter配置
export FLUTTER=~/flutter
export PATH=$FLUTTER/bin:$PATH

配置完成后打开终端输入以下命令，更新一下配置文件

# bash则使用.bash_profile
$ source ~/.zshrc

接下来输入Flutter的检测指令flutter doctor来查看一下是否配置OK 05.png 这里看到Flutter环境已经配置OK，我这里的版本是1.20.3，如果没有安装Android Studio和Xcode这里也会打x。

通过FVM安装和配置

安装fvm

首先添加Homebrew的tap，如果你的电脑没有安装Homebrew，请先安装。

brew tap dashixiong91/fvm
brew install fvm
环境配置

请把以下代码拷贝到你的~/.zshrc，如果是旧系统拷贝到~/.bash.profile。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export FVM_DIR="$HOME/.fvm"
# 注意下面的路径根据你安装的fvm路径配置
source "/usr/local/opt/fvm/init.sh"
常用的fvm命令
# 安装Flutter版本
fvm install <version> // 例：fvm install 2.5.3
# 使用对应的版本
fvm use <version>
# 查看当前安装的所有版本
fvm list
需要注意的点

如果你的fvm当前版本是1.1.6及以上，需要修改fvm.sh里的配置，文件中两处curl后加个-L参数，变为curl -L样式

# fvm.h的路径
/usr/local/Cellar/fvm/1.1.6/libexec/fvm.sh

发现我的M1电脑的路径是在/opt/homebrew/Cellar/fvm/1.1.6/libexec/fvm.sh，根据实际安装位置来。

配置Android环境

安装Android Studio

我们可以到Android Studio的国内官网地址下载并安装。根据你的平台选择对应的版本。 06.png

配置Android SDK

根据安装向导，需要安装Android SDK，Android SDK Command-line Tools和Android SDK Build-Tools。也可以进入偏好设置勾选安装，Preferences - Appearance & Behavior - System Settings - Android SDK - SDK Tools。 06.png

安装Flutter插件

点击Preferences - Plugins，搜索Flutter，点击安装即可，期间会提示安装dart，点击确定安装，这样Flutter插件安装完成。 07.png 我这里已经安装了，所以显示installed。在终端里执行flutter doctor看看是不是都OK，如果存在Android license问题，可以根据提示执行下面命令。

flutter doctor --android-licenses

这样整个环境就配置好了，再次运行一下flutter doctor 08.png

初识Flutter

项目创建

打开Android Studio，选择Create New Flutter Project - Flutter Application，填写工程名称，选择dart路径，选择指定的项目路径，然后创建。 09.png 创建完以后，打开模拟器运行，可以看到一个简单的Flutter项目就跑起来了。 10.png 在lib/main.dart默认生成了一些UI代码。可以看到main.dart引用了flutter/material.dart，类似于iOS中的UIKit；MaterialApp里集成了很多样式，Scaffold里的AppBar可以设置导航栏，然后在body里添加主屏幕的UI。

初识Widget

把项目main.dart的代码删除，保留导航栏，在中间放个文字。 11.png 这里用到了Center和Text的Widget，使文字在body里居中显示。

StatelessWidget

StatelessWidget是无状态的Widget，用于不需要维护状态的场景，它通常在build方法中通过嵌套其它Widget来构建UI，在构建过程中会递归的构建其嵌套的Widget

StatefulWidget

StatefulWidget是有状态的Widget，一个StatefulWidget类会对应一个State类，State表示与其对应的StatefulWidget要维护的状态。

案例

下面用ListView实现一个汽车的列表，首先定义一个模型类，然后定义一个汽车的数据数组datas。定义如下：

class Car {
  const Car({this.name, this.imgUrl});
  final String? name;
  final String? imgUrl;
}

final List<Car> datas = [
  const Car(
    name: '保时捷918 Spyder',
    imgUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-7d8be6ebc4c7c95b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  ),
  const Car(
    name: '兰博基尼Aventador',
    imgUrl:
    'https://upload-images.jianshu.io/upload_images/2990730-e3bfd824f30afaac?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240',
  )
];
ListView的使用

根据ListView的定义通过builder方法，然后传一个itemBuilder，itemBuilder是一个返回Widget的函数，需要传2个参数。

// 带下划线的方法：文件内部访问
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),
        ),
      ],
    ),
  );
}

这里用到了Column组件，我们让图片和文件竖向排列，然后把_itemBuilder作为参数传给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,
      ),
    ),
  );
}

然后运行，看一下效果。 ListView.gif

总结

根据本篇主要对Flutter有个基本的认识，从环境搭建，Android Studio的配置以及项目的创建，可以使项目运行起来。下面做个简单的总结：

  • 搭建Flutter开发环境，可以直接下载SDK安装在电脑的指定位置，也可以通过fvm进行管理，如果项目是多版本的使用fvm更加方便。
  • Android Studio的配置
  • Flutter工程的创建
  • 初步了解了Flutter部分Widget的使用
avatar
文章
阅读
粉丝