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