简介
-
Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码，在Android和iOS平台上都可以运行。 -
Flutter使用Dart语言开发。Dart可以被编译成不同平台的本地代码，让Flutter可以直接和平台通讯而不需要一个中间的桥接过程，从而提高了性能。 -
Flutter最大的特点是跨平台、以及高性能
Flutter环境-Android（windows系统）
Dart环境
-
打开Dart官网-Get Dart页面，点击Dart SDK installer for Windows，即可打开
windows版的下载页面 -
点击下载安装包下载安装即可
-
打开
cmd，输入命令dart --version。正确输出版本号就表示安装成功
安装配置JDK
-
到Java官网下载对应系统、对应版本的
JDK，双击安装即可（默认安装在C:\Program Files\Java目录下） -
配置环境变量：系统变量里面新建一个
JAVA_HOME变量，其值为JDK安装目录C:\Program Files\Java\jdk1.8.0_91 -
配置环境变量：系统变量里面找到
Path变量，添加两个值%JAVA_HOME%\bin和%JAVA_HOME%\jre\bin -
打开
cmd，输入命令java和javac。正确输出就表示安装成功
下载安装Android Studio
- 打开Android Studio下载页面，下载安装即可
下载配置Flutter SDK
-
打开Flutter SDK下载页面，选择对应的系统下载
-
将下载下来的安装包解压到任意一个目录（不要有中文，比如：
D:\flutter） -
配置环境变量：系统变量里面找到
Path变量，将刚才Flutter SDK目录下的bin目录（这里是D:\flutter\bin）配置到该变量中 -
打开
cmd，输入命令flutter -v。正确输出就表示安装成功
配置Flutter国内镜像
- 搭建环境过程中要下载很多资源文件，当一些资源下载不了的时候，可能会报各种错误。
- 在国内访问
Flutter的时候有可能会受到限制。Flutter官方为我们提供了国内的镜像- 这一步不是必须的，只是为了访问网络问题、被墙等问题
- 参考：Flutter社区中文资源、Using Flutter in China
-
配置环境变量：系统变量里面新建一个
FLUTTER_STORAGE_BASE_URL变量，其值为https://storage.flutter-io.cn -
配置环境变量：系统变量里面新建一个
PUB_HOSTED_URL变量，其值为https://pub.flutter-io.cn -
打开
cmd，输入命令flutter doctor检测环境是否配置成功 -
第一次运行的时候，可能会提示
Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses。在cmd中输入命令flutter doctor --android-licenses。提示输入Y/N的地方全部输入Y即可
使用Android Studio安装Flutter插件
-
打开
Android Studio -
File→Settings→Plugins，在右侧搜索flutter，安装搜索到的Flutter，安装完成后重启Android Studio
Flutter环境-iOS（Mac）
准备
- 升级
Mac os系统为最新系统 - 安装最新的
Xcode
Dart环境
- 没有安装
brew这个工具首先需要安装它。参考https://brew.sh/
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 执行命令：
brew tap dart-lang/dart - 执行命令：
brew install dart
下载Flutter SDK
-
打开Flutter SDK下载页面，选择对应的系统下载
-
将下载下来的安装包解压到任意一个目录（不要有中文，比如：
/Users/xxx/flutter） -
把
Flutter安装目录的bin目录配置到环境变量，把Flutter国内镜像也配置到环境变量里面。vim ~/.bash_profile
export PATH=/Users/xxx/flutter/bin:$PATH
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
-
执行命令
source ~/.bash_profile -
输入命令
flutter -v或者flutter -h。正确输出表示配置成功
配置Flutter iOS环境
-
执行命令
flutter doctor。应该会有很多问题，根据提示需要执行brew命令 -
没有安装
brew这个工具首先需要安装它。参考https://brew.sh/
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- 根据
flutter doctor的提示，执行对应命令
# 根据`flutter doctor`的提示执行，下面的是示例。一个个命令挨个执行
# 如果运行命令失败请运行`brew doctor`并按照说明解决问题
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy
brew install cocoapods
pod setup
-
执行完命令后，重新运行
flutter doctor，检测环境配置是否完成（develop for iOS devices需要正常） -
生成
Flutter项目命令：flutter create flutterdemo
模拟器
-
可以用真机调试。也可以用模拟器。
-
推荐使用第三方的夜神模拟器
-
假设模拟器安装路径
D:\Program Files\Nox\bin\Nox.exe
vscode连接不上夜神模拟器解决办法：
- 打开
cmd，cd到夜神模拟器的安装目录D:\Program Files\Nox\bin\- 输入命令
nox_adb.exe connect 127.0.0.1:62001
编辑器
Android Studio
-
打开
Android Studio -
File→Settings→Plugins，在右侧搜索flutter，安装搜索到的Flutter，安装完成后重启Android Studio -
新建项目：
File→New→New Flutter Project→Flutter Application，点击Next，填写项目名称、目录等相关信息即可（域名建议修改成自己的域名，包名必须是唯一的）
Xcode
-
Mac中使用Xcode，打包iOS项目比如用到Xcode -
打开项目之前需要修改项目文件权限
Vscode
-
Android Studio太卡了，推荐使用vscode开发。Mac上面也可以安装和使用vscode -
安装插件
Dart：用来支持Dart语法 -
安装插件
Code Runner：可以直接运行我们的文件。比如直接运行dart代码 -
安装插件
Flutter -
安装插件
Flutter Widget Snippets：Flutter提示工具 -
安装插件
Awesome Flutter Snippets：有很多方便的快捷输入，比如：statelessW、statefulW -
新建项目：
ctrl + shift + p→Flutter：New Project→ 输入项目命令 → 选择项目路径
常用命令
flutter doctor：检查Flutter环境配置flutter run：运行项目
r：点击后热加载p：显示网格o：切换android和ios的预览模式q：退出调试预览模式
发表评论