Flutter入门 学习大纲
本节,主要记录基于Mac系统
的Flutter
的环境搭建
。主要根据官网介绍
进行搭建工作
,搭建过程会有一些坑
,而且有时需要采取科学上网
的方式。
一. 安装Flutter
1. 更新HomeBrew
- 如果你的电脑
已安装
这个工具包,升级
它
brew update
- 如果电脑
未安装
这个工具包,按照官网指示安装它
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. 下载Flutter
使用
科学上网
方式
-
2.1 进入 官网 ,点击
Get started
:
-
2.2 选择对应系统
-
2.3 下载最新版本压缩包
PS: 中文网地址为: https://flutter.cn/docs/get-started/install/macos
3. 配置环境变量
- 3.1 配置镜像
Flutter
运行需要去官方下载
所需资源
,没有梯子
的伙伴需要镜像服务器
,以下是官方文档
友情提示:
- 来到对应的
Shell配置文件
进行配置:
- 如果你默认使用
base
,配置路径为:~/.bash_profile
- 如果使用
zsh
,配置路径为:~/.zshrc
-
配置内容
:
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 3.2 配置环境
在Shell
文件中继续配置Flutter运行环境
(路径中的xxx
为自己的电脑用户名
)
export FLUTTER=/Users/xxx/iOSCoreMark/Flutter/flutter/bin
- 3.3 更新配置
使用source命令
更新配置:
source .bash_profile
4. 指定运行地址
我们运行Flutter指令
,需要先指定运行地址
。
- 方法一: 只在
当前命令行窗口
生效:
# 指定运行地址(pwd是当前文件夹路径,需要指定你自己flutter文件夹的路径)
export PATH="$PWD/flutter/bin:$PATH"
-
方法二:
永久生效
:
参考官方指引
(https://flutter.cn/docs/get-started/install/macos#update-your-path)
-
运行
flutter doctor
,检查运行环境
PS: 第一行
Flutter
配置成功即可,下面环境未配置成功
,我们可以去不同开发工具
中配置
。
二、安装Android Studio
- 直接去 官网下载最新版本的
Android Studio
- 下载后
直接安装
即可。
1. 配置安卓环境变量
- 在对应的
Shell配置文件
中:
#Flutter (下面“pwd”请使用自己的路径)
export FLUTTER=/Users/pwd/Flutter/flutter/bin
export PATH=FLUTTER:$PATH
#Flutter 镜像设置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#安卓 (下面“username”请使用自己的用户名)
export ANDROID_HOME=/Users/username/Library/Android/sdk
#安卓模拟器路径
export PATH=${PATH}:${ANDROID_HOME}/emulator
#安卓tools路径
export PATH=${PATH}:${ANDROID_HOME}/tools
#安卓平台工具
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
2. 安装Android Studio插件
-
安装完后,运行
flutter doctor
会发现缺少Flutter插件
:
-
来到Studio偏好设置,搜索并下载
Flutter
和Dart
插件:
-
安装完后,重启
Android Studio
,可以看到有Flutter 项目
的创建方式
了:
PS: 有一个坑点,如果
Flutter插件
已安装,但识别不到
正确的android studio路径
,是因为Android Studio路径
已改变,需要我们手动指定
下:flutter config --android-sdk /path/to/android/sdk flutter config --android-studio-dir /path/to/android/studio
- 此时再执行
flutter doctor
,会发现都搞定了。
3. 配置安卓模拟器
最新版本的包是
自动配置
了一个安卓模拟器
,如果没配置
,我们可以手动配置
一下:-
3.1 打开
AndroidStudio
,右上角找到模拟器管理
:
-
3.2 创建设备:
-
3.3 选择设备:
-
3.4 选择系统并下载
三、 Xcode和VSCode
- Xcode在Flutter最新版本中,是
自动配置
成功的 - VSCode,我们也只需要在
插件库
中手动搜索
和安装Flutter插件
即可
运行flutter doctor
,都是绿勾
,就表示配置成功
。
本节仅做一个环境搭建
的简单记录
,其实官方文档
都讲得非常详细
了。如果后续
需要其他坑点
,也会在本节进行补充
和记录
。
下一节,Flutter入门二:熟悉Widget、文字样式、ListView