Flutter 构建跨平台应用

一、简介

  • 官网
  • 中文
  • Google的移动UI框架,快速在iOS和Android上构建高质量的原生用户界面
  • 免费,开源

二、下载安装

  • 下载SDK
    下载页
  • 解压到需要安装的目录,配置PATH,以及国内需要的镜像(否则使用flutter packages get无法访问到资源会卡主)
##Flutter
export PATH=/usr/local/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,或者echo $PATH

  • 运行flutter doctor检查需要安装的依赖,一般都会给出解决方案,只需要把指令拷贝下来执行即可,以及IDE所需要安装的插件(只需要关注自己用的IDE)
    部署ios 设备需要安装的
 $ brew update
 $ brew install --HEAD usbmuxd
 $ brew link usbmuxd
 $ brew install --HEAD libimobiledevice
 $ brew install ideviceinstaller ios-deploy cocoapods
 $ pod setup

安卓需要Android Studio,一般会出现版本不兼容问题,需要依照提示修复
注:brew update有时会因为被墙或速度慢卡主,需要更改镜像源

三、启动模拟器

  • MAC启动应用,苹果模拟器
$ open -a Simulator
  • 启动安卓模拟器,一般需要进入Android Studio,或者命令进入emulator 所在的目录下,./emulator -avd Pixel(和@name相同)启动一个叫Pixel的安卓模拟器,以下是快捷操作配置
$ vim ~/.bash_profile

本机所在的路径


image.png
##Android Virtual Device
export PATH=/Users/jony/Library/Android/sdk/tools:$PATH

使配置生效

$ source ~/.bash_profile

添加emulator所在的路径

$ emulator @foo //启动名为foo的模拟器
  • 查看模拟器
$ flutter devices
image.png

四、创建并启动应用

  • 创建flutter应用,使用VSC打开,可以看到所有的文件
$ flutter create flutter_app
$ cd flutter_app
$ code . 
  • 在模拟器上运行
$ flutter run -d all //在所有设备上运行

运行成功就可以在模拟器上看到应用界面,一般都会提示按r热加载
直接使用VSC的start debugging(快捷键F5)方便

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容