Flutter 开发环境配置

添加 Flutter 环境变量

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，添加到环境变量

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

找到电脑环境变量添加，添加完成过后保存，添加后需要安装 git 并且添加到系统环境变量中，不然会在 flutter doctor时报错。**

获取Flutter SDK

获取SDK途径

Flutter 官网 flutter.io/sdk-archive…
github github.com/flutter/flu…

解压获取到的SDK 解压后找到解压路径的 bin 目录 D:\localProgram\flutter\bin 对应自己解压 SDK路径，赋值 Flutter SDK bin目录后添加到环境变量。重新启动电脑
查看Flutter环境配置是否生效

 flutter doctor

这个时候查看会出现提示Android Studio 和 Android SDK 未安装。所以需要安装 Android Studio 和SDK

安装 Android Studio 和 Android SDK

下载 Android Studio developer.android.com/studio/inde…
根据 Android Studio 安装指引进行安装 Android Studio和所需Android SDK文件
Android Studio 安装 Flutter 插件和Dart插件，找到 File->Settings->Plugins

然后分别输入 Flutter 和 Dart 搜索插件，进行安装，安装完成重启 Android Studio

检查 Flutter 开发环境

使用 flutter doctor 命令查看 Flutter 环境配置是否完成
遇到问题：Android Studio 已经安装 flutter doctor 命令找不到默认
重新指定 Android Studio 安装目录 flutter config --android-studio-dir="D:\Android Studio"
设置完成后再次查看

配置 Visual Studio Code 编辑器

安装 code.visualstudio.com/
安装后，安装 Flutter 插件和 Dart 插件
使用 VSCode 创建项目

快捷键：Ctrl+Shift+P
选择 Flutter:New Project 创建项目，选择创建项目类型，本地存储路径和项目名称，等待创建完成

利用 Android Studio 的 AVD Manager 创建 Android 模拟器

要准备在Android模拟器上运行并测试您的Flutter应用，请按照以下步骤操作：

在您的机器上启用 VM acceleration .
启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
选择一个设备并选择 Next。
为要模拟的Android版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image
在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用硬件加速.
验证AVD配置是否正确，然后选择 Finish。有关上述步骤的详细信息，请参阅 Managing AVDs.
在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面.
运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

学习笔记

项目目录介绍

名称	作用
.dart_tool	记录了一些dart工具库所在的位置和信息
.idea	android studio 是基于idea开发的，.idea 记录了项目的一些文件的变更记录
android	Android项目文件夹
ios	iOS项目文件夹
lib	lib文件夹内存放我们的dart语音代码
test	存放测试代码
.gitignore	git忽略配置文件
.metadata	IDE 用来记录某个 Flutter 项目属性的的隐藏文件
.packages	pub 工具需要使用的，包含 package 依赖的 yaml 格式的文件
flutter_app.iml	工程文件的本地路径配置
pubspec.lock	当前项目依赖所生成的文件
pubspec.yaml	当前项目的一些配置文件，包括依赖的第三方库、图片资源文件等
README.md	READEME文件

UI组件介绍

Material 组件 Android 风格组件 flutterchina.club/widgets/mat…
Cupertion 组件 ios 风格组件 flutterchina.club/widgets/cup…
常用组件

组件名称	作用
Text	用于显示文字
Image	用于显示图片
Icon	用于显示图标、有内置的Material 和 Cupertion 风格的图标
Container	类似于 html中的div可以添加内外边距、文本对齐方式、背景、边fluro角等特性
Row, Column	水平和垂直方向的多组件展示，使用 flex 布局
Stack	用于z轴方向的多组件展示，可以把一个组件堆叠到另外一个组件上面，类似于 css 的 position
Scaffold	页面的基本组件，提供基本的页面结构。包含顶部 title 及功能按钮，顶部 Tab，底部 tab，导航按钮等

使用依赖库

使用 fluro 配置路由

Flutter 导航框架 fluro (类似Vue Router) pub.flutter-io.cn/packages/fl…
fluro 支持参数通配符 /room/:id 简化了自定义动画
安装

命令行方式 flutter pub add fluro
在项目 pubspec.yaml 文件中添加如下代码，保存会自动安装

dependencies:
  fluro: ^2.0.3

轮播组件 flutter_swiper

pub.flutter-io.cn/packages/fl…

安装 flutter pub add flutter_swiper
引入

import 'package:flutter_swiper/flutter_swiper.dart';

使用

Swiper(
    itemBuilder: (BuildContext context,int index){
      return new Image.network("http://via.placeholder.com/350x150",fit: BoxFit.fill,);
    },
    itemCount: 3,
    pagination: new SwiperPagination(),
    control: new SwiperControl(),
  )

网络图片本地缓存 cached_network_image

网络图片添加本地缓存，延长网络请求超时时间

安装 flutter pub add cached_network_image
引入
使用

对话框 fluttertoast 5.0.0

pub.flutter-io.cn/packages/fl…

安装 flutter pub add fluttertoast
引入

import 'package:fluttertoast/fluttertoast.dart';

使用

Fluttertoast.showToast(
        msg: "This is Center Short Toast", // 提示内容
        toastLength: Toast.LENGTH_SHORT, // 位置
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );

图像选择器 image_picker

pub.flutter-io.cn/packages/im…

安装

dependencies:
  image_picker: ^0.6.6+4

权限配置

android 配置文件 android -> app -> src -> main -> AndroidMainFest.xml

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

ios 配置文件 ios -> Runner -> Info.plist

<key>NSCameraUsageDescription</key>
<string>Example usage description</string>
<key>NSMicrophoneUsageDescription</key>
<string>Example usage description</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Example usage description</string>

3. 引入

import 'package:image_picker/image_picker.dart';

使用

  _pcikImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
  }

字体图标使用

文件 static\fonts\iconfont.ttf
在 pubspec.yaml 文件中配置

  fonts:
    - family: CommonIcon
      fonts:
        - asset: static/fonts/iconfont.ttf

分享组件share

pub.flutter-io.cn/packages/sh…

打包

添加启动页
准备桌面图表
应用名称修改
启动图片修改

Android 打包

1. 修改应用名称

在 项目名称\android\app\src\main\AndroidManifest.xml 文件 application 标签中 android:label 属性设置应用名称

2. 修改应用图标

在 项目名称\android\app\src\main\res文件夹下以 mipmap-开头的文件夹，设置应用图标，并在 项目名称\android\app\src\main\AndroidManifest.xml 文件 application 标签中 android:icon 属性设置应用图标名称

执行打包命令

flutter build apk --no-tree-shake-icons

常见问题

http 请求不支持问题 flutterchina.club/networking/

参考链接

Flutter 中文网 flutterchina.club/

flutter学习记录