Flutter项目实战-我的第一个Flutter项目-准备+前言篇(一)

318 阅读2分钟

一、前言

做了安卓原生快5年的时间,Flutter也已经出来很久,现在很多项目为了快速推进,都会首选flutter或者小程序这种偏前端业务的技术栈。

目前所在的团队也选择了flutter作为新业务的拓展方向,之前只是简单接触了Flutter的几个项目代码,正好离正式立项还有段时间,打算趁着年前整理一下笔者的Flutter学习之旅。

二、开发环境

  • mac环境
  • android studio编辑器

三、环境准备

3.1 下载Flutter SDK

官方地址

docs.flutter.dev/development…

image.png

3.2 解压

下载完成后可以将文件包解压至自己的固定路径内

image.png

3.3 终端环境配置

编辑or创建.bash_profile文件

3.3.1 创建.bash_profile

cd ~
touch .bash_profile

3.3.2 查看、编辑.bash_profile

cd ~
open .bash_profile

3.4 配置环境

在文本编辑器里添加关于flutter sdk的相关配置

export PATH=/Users/UserName/....(flutter解压路径)/flutter/bin:$PATH 
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

3.5 更新环境变量

source .bash_profile

3.6 flutter doctor 检查

至此,可以运行一下flutter doctor 检查一下上面的配置是否生效了

image.png

此时虽然XCode的检查编译条件不支持但是不影响其他平台的运行,笔者主要用AS运行项目,还没安装XCode.

四、可能遇到的问题

4.1 cmdline-tools component is missing

这个是AS自带的一个工具

打开AS

image.png

勾选 Android SDK Command-line Tools 进行下一步的安装即可

4.2 CocoaPods not installed

brew install cocoapods

image.png

此时可以看到只剩下XCODE还没下载了

五、AS中配置Dart

5.1 搜索安装Dart

image.png

5.2 搜索安装flutter

image.png

此时就可以新建我们的第一个Flutter 项目了

image.png

连接的是模拟器或者是实体机,再点击运行按钮

image.png

可以看到一个简单的Flutter Demo已经运行起来了

点击右下角的加号按钮 在界面可以进行简单的点击次数计数。