Flutter学习指南（1）：Mac 搭建flutter环境核心总结

本套教程的优点，提供一种思路，本人iOS开发者 。按照自己的思路走下去 ，遇到问题解决问题 ，不会什么学习什么 。从基本的网络入手（上传，下载） -常用控件-- 上刷拉新。复杂项目-- 混合项目本地调用 。

flutter 不能替代原生，目前为止，大多数的底层框架很不完善 。包括音视频，直播等。

注意：flutter是写界面，动画，手势，交互。 并且没有使用原生的api，直接走的是硬件支持 。不能接受的绕行。中文官网文档 --- 前期准备

一.配置环境

1.下载flutter(需要翻墙)，或者GitHub 下载

2. 解压到一个目录下例如home 目录

~  #这就是home目录的符号

3. 配置环境变量

vi $HOME/.bash_profile

按【i】键,添加下面代码，然后按【esc】推出输入，
之后输入 【:wq】退出编辑

# flutter setting
# ~/flutter
export PATH=$HOME/flutter/bin:$PATH
export FLUTTER_ROOT=$HOME/flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

4. 验证配置是否成功

运行 source $HOME/.bash_profile 刷新当前终端窗口.

source $HOME/.bash_profile

通过运行flutter/bin命令验证目录是否在已经在PATH中:

echo $PATH

二. 在IDE中开发flutter

1. 编译器的选择。

你可以使用自己喜欢的开发工具去开发 Flutter 应用。不过官方给了两个建议，Android Studio（google自家的东西） 与 VS Code（用的人最多的）。xcode（先别想了，调试的时候用一下就得了）

我们选择VSCODE,必须安装的还有XCODE（调试使用） 和 android studio（调试使用） ，更新到最新版本 。

1. 为vscode 安装 编译环境/插件

熟悉vs code的使用
安装 dart 和 fultter 的插件环境

2. 为vscode 安装 编译环境/插件

找到vscode 下方的terminal面板 运行

flutter doctor

复制下方一条一条命令运行。费时间有耐心，必须翻墙，不翻墙太费劲了。

按照提示解决所有问题，重新运行 【flutter doctor】

3.! No devices available 问题 。

USB连接一个真机 ，或者运行

flutter devices //  查看连接的设备列表
flutter emulators  //  查看模拟器设备列表

4.创建一个项目

flutter create first_flutter  // 不可以使用大写，等待一会就好

完成后很快

5主要目录说明

lib 主要开发位置，dart代码位置 ，main函数主入口 。
ios 含有Xcode代码，可以使用Xcode打开适配证书，网络等。
android 同上 。
其他项目配置文件和版本控制文件先不说 。

6运行项目

flutter run  // 连接真机直接安装，或者第3步模拟器运行

证书问题打开Xcode或者 android studio 配置好重新重新运行 。

Flutter 常用命令

flutter --version    #查看 Flutter 版本
flutter -h 或者 --help #打印所有命令行用法信息
flutter analyze  #分析项目的 Dart 代码
flutter build #Flutter 构建命令
flutter channel  #列表或开关 Flutter 通道
flutter clean    #删除构建/目录
flutter config      #配置 Flutter 设置
flutter create    #创建一个新的 Flutter 项目
flutter devices    #连接设备的列表
flutter doctor          #显示相关安装工具的信息
flutter drive    #为当前项目运行 FLutter 驱动程序测试
flutter emulators    #列出、启动和创建模拟器
flutter format    #格式一个或者多个 Dart 文件
flutter fuchsia_reload    #在 Fuchsia 上进行热重载
flutter help    #显示帮助信息的 Flutter
flutter install    #在附加设备删安装 Flutter 应用程序
flutter logs    #显示用于运行 Flutter 应用程序的日志输出
flutter packages    #用于管理 FLutter 包
flutter precache    #填充了 Flutter 工具的二进制工件缓存
flutter run    #在附加设备删运行 Flutter 应用程序
flutter screenshot    #从一个连接的设备截图
flutter stop    #停止在附加设备上的 Flutter 应用程序
flutter test    #对当前项目的 Flutter 单元测试
flutter trace    #开始并停止跟踪运行的 Flutter 应用程序
flutter upgrade #升级 Flutter 副本

小问题较多，不写了 。有什么问题下面留言 。帮你解决 。

运行在linux上的web项目 环境配置

下载或者clon Flutter sdk /
任意新建一个目录例如 flutterSDK

cd  ～
mkdir  flutterSDK
cd  flutterSDK
//解压你下载的文件名称
 tar xf   《#下载的文件目录#》

接下来把flutter sdk、dart sdk和webhubwiz执行文件目录加入PATH环境变量：

~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/bin
~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/bin/cache/dart-sdk/bin
~/hubwiz$ export PATH=$PATH:$HOME/flutterSDK/flutter/.pub-cache/bin

命令行运行一下，看看环境是否配置成功

 flutter --version && dart --version 

进入工作目录 例如 ～/flutterWebWorkSpace

cd  ～/flutterWebWorkSpace
git clone https://github.com/flutter/flutter_web.git
flutter pub global activate webdev //安装webdev包
cd flutter_web/examples/hello_world  ## 进入到下载好的web项目
flutter packages upgrade   ## 安装依赖包
webdev serve  ## 启动web服务

检查防火墙和安全组设置
本地访问http://localhost:8080 ，其他端访问 // ip：8080

问题 更改吧brew 国内源

cd
curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install >> brew_install
vim brew_install
    更改脚本中的资源链接，替换成中国科学技术大学的镜像
    就是把这两句 
    BREW_REPO = “https://github.com/Homebrew/brew“.freeze 
    CORE_TAP_REPO = “https://github.com/Homebrew/homebrew-core“.freeze 
    更改为这两句 
    BREW_REPO = "https://mirrors.ustc.edu.cn/brew.git".freeze
    CORE_TAP_REPO = "https://mirrors.ustc.edu.cn/homebrew-core.git".freeze
rm -rf /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core
git clone git://mirrors.ustc.edu.cn/homebrew-core.git/ /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core --depth=1
/usr/bin/ruby brew_install