Flutter-搭建环境

简介:

Flutter是谷歌的移动UI框架, 可以快速在IOS和Android上构建高质量的原生用户界面。Flutter可以与现有的代码一起工作。

优点:

  1. 快速开发:毫秒级的热重载

  2. 灵活UI:内置丰富的motion API、Material Design和Cupertino(iOS风格)widget,分层架构,快速渲染、灵活设计

  3. 很好的结合原生:包含了许多核心的widget(滚动、导航、图标、字体等)都可在ios和android上达到原生应用一样的性能。

  • 系统要求

操作系统:macOS(64-bit)/Windows 7 或更高版本 (64-bit)

磁盘空间:mac - 700M / Windows – 400M

工具依赖:

  1. MAC环境:bash、mkdir、rm、git、curl、unzip、which
  2. Windows环境:确保命令提示符或PowerShell中运行 git 命令,不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中。

 

  • 开发环境搭建

1.访问受限,可以更换镜像源

export PUB_HOSTED_URL=https://pub.flutter-io.cn 
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意:此镜像为临时镜像,并不能保证一直可用

2.下载镜像

https://flutter.dev/docs/development/tools/sdk/releases?tab=macos#macos

3.解压安装包到目录(或者使用解压工具)

unzip flutter_macos_v1.7.8+hotfix.4-stable.zip

4. 添加环境变量(在flutter的父目录执行,也就是执行3的那个目录)

export PATH=`pwd`/flutter/bin:&PATH

注:此添加环境变量只对当前窗口有效;可以将环境变量放到/etc/profile中,将路径加到PATH的末尾,重启电脑即可生效,亲测有效!

也可以放到~/.bash_profile中,每次打开窗口执行source命令即可

5.运行以下命令查看是否需要安装其它依赖项来完成安装:

flutter doctor

第一次运行flutter会慢一些,耐心等待,命令行输出的粗体显示的可能需要安装的其他软件或进一步需要执行的任务;

一般的错误会是xcode或Android Studio版本太低,安装了缺失的依赖后再次运行flutter doctor命令来验证是否有其他问题

看我的报错

[✗]iOS tools - develop for iOS devices
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy

三、  Android Studio插件

版本:3.0或更高

设备:Android 4.1(API Level 16)或更高版本

Preferences>Plugins选择Flutter,点击install,重启Android Studio

  1. 打开Android Studio ,选择Start a new Flutter project
  2. 选择Flutter Application 作为project类型,点击Next
  3. 输入项目名称,点击Next
  4. 点击Finish
  5. 点击运行
  6. 第一次安装后,其后代码更新,点击reload既可热重载

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值