Flutter推出已经一段时间了,最近有时间,正好可以进行学习,使用,并计划最终嵌入目前项目中进行线上验证。
都是个人的开发使用经验,不全面,但绝对能够派上用场跟解决问题。
大致概念
Flutter:一个可以跨平台(android和iOS)进行开发的工具。
开发使用IDE:Android Studio (3.0以上版本),Visual Studio Code(1.20.1以上版本),或是文本工具。
开发的第一步,就是配置开发环境,进行代码调试。
本节结合自身,进行快速配置。
若想完整学习的,可以查阅中文版的官方文档
第一步:下载安装Xcode ,在App Store中下载最新版本的Xcode,进行安装。
![](https://img.haomeiwen.com/i10152941/f779e4713b218544.png)
并创建一个应用,在模拟器上进行运行。
![](https://img.haomeiwen.com/i10152941/964069b84597a0a7.png)
第二步:下载安装 Android Studio。可以选择官网,也可以搜索国内安装方法,还有相应的AndroidSDK下载,耗时较长,因为android环境安装问题有时候较多,有时候需要翻墙,大家可以自行搜索Android 环境搭建。
![](https://img.haomeiwen.com/i10152941/6d3780169f20564c.png)
这里可以增加安装Genymotion。Android 开发比较适合的模拟器,大家也可以自行查找进行安装。
![](https://img.haomeiwen.com/i10152941/b7ff5e4ccb46768b.png)
然后,进入AndroidStudio进行插件安装,如图
![](https://img.haomeiwen.com/i10152941/0113512d18591f3b.png)
第三步:Flutter系统环境配置
首先随便找个目录,我是在放在了 /Users/johnson/Library/Developer/
这个地址后面会用到。
然后命令行
cd /Users/johnson/Library/Developer/
git clone [https://github.com/flutter/flutter.git](https://github.com/flutter/flutter.git)
![](https://img.haomeiwen.com/i10152941/83d1081b875b308e.png)
然后打开用户目录
command+shift+. 快捷键,展示隐藏文件,在自己用户名下,找到文件 .bash_profile跟 .zshrc,如图
![](https://img.haomeiwen.com/i10152941/829b87f9c31fbfbf.png)
设置 .bash_profile 文件,没有这个文件,可以进行新建。
输入内容
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/johnson/Library/Developer/flutter/bin:$PATH
export PATH=${PATH}:/Users/johnson/Library/Android/sdk/platform-tools
export PATH=${PATH}:/Users/johnson/Library/Android/sdk/tools
上面3个是flutter的配置,注意文件目录。
下面2个是android sdk目录地址配置,根据你的实际情况。
![](https://img.haomeiwen.com/i10152941/bc90fe78e2c4ba5b.png)
设置 .zshrc文件,没有这个文件,可以进行新建。
输入内容
source ~/.bash_profile
![](https://img.haomeiwen.com/i10152941/a8122dbb634ab077.png)
至此,所有环境配置的均已经完成。
在Flutter git项目下,有个hello world文件夹,我们可以进行运行我们的第一个flutter程序。
![](https://img.haomeiwen.com/i10152941/49b79af1fc116769.png)
我们先进行验证
命令
cd /Users/johnson/Library/Developer/flutter/examples/hello_world
flutter doctor
![](https://img.haomeiwen.com/i10152941/960f2c080a7d9a17.png)
若有报错,问题,那么可以根据内容,查找相应的解决方案。
若没有问题,接下来,进行
flutter run
![](https://img.haomeiwen.com/i10152941/2e69e90a676af2a3.png)
我们的第一个flutter应用已经跑起来了,不过运行的是iOS的模拟器,如果把genymotion开启,选择android模拟器,也可以在android模拟器上运行。
Android跟iOS端均已配置完毕,可以进行开发使用了。
网友评论