Flutter学习笔记(一)

2019年5月8日 219次阅读 来源: 小唐羽锋

前言

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

开发环境搭建

1.使用镜像

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到用户环境变量中,直接打开终端输入就行了.

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

注意： 此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

2.我的当前系统及IDE版本

1. 操作系统:Mac OS Mojave 10.14.2
2. Xcode 10.1 (版本必须高于7.2,官方文档说的)

3.下载Flutter SDK

Mac系统下Flutter的SDK有以下几个版本:

1.Stable channel(稳定版本),目前最新的版本为V1.2.1
2.Beta channel(测试版本),目前最新的版本为V1.3.8
3.Dev channel(也属于测试版本,比Beta稳定性差一些),版本为V1.4.4

你可以直接在官网下载Flutter SDK,然后在指定文件夹里解压,也可以通过克隆github链接.

方式一:先cd到指定文件夹,然后输入命令,路径为你下载的SDK所在路径

unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip

方式二:直接在指定文件夹下克隆

git clone -b master https://github.com/flutter/flutter.git

4.设置path环境变量

  只在当前命令行窗口设置
  export PATH="$PWD/flutter/bin:$PATH"
4.1更新环境变量

更新环境变量的意义在于可以运行flutter命令在任何终端会话中

  1. 首先复制Flutter SDK的安装目录路径
  2. 然后在终端中输入open $HOME/.bash_profile命令,会弹出一个.bash_profile的窗口 《Flutter学习笔记(一)》 屏幕快照 .png

3.在该窗口输入下列命令.注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径

    export PUB_HOSTED_URL=https://pub.flutter-io.cn   //国内用户需要设置
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn   //国内用户需要设置
    export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

4.保存退出,执行source $HOME/.bash_profile
5.执行echo $PATH命令,验证目录是否已经在PATH中,也可以执行命令flutter -h,出现下图所示的命令帮助信息,证明已经配置成功了

《Flutter学习笔记(一)》 屏幕快照 .png

5.检查环境

flutter doctor是对mac本机的环境配置诊断脚本，脚本结果会直接放出 flutter 环境有哪些需要继续配置
执行flutter doctor命令,出现下面截图的内容.Android的内容暂时不用理会,看一下iOS的问题.

《Flutter学习笔记(一)》 image.png

如果出现蓝色箭头所指的内容,说明你的Mac还没有安装Homebrew,这是一个包管理工具.在终端中输入下列命令安装Homebrew,直接回车即可

 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完成之后,就可以执行brew命令,配置iOS环境了.

6.配置iOS环境

根据上面的截图,执行brew命令,完善iOS环境.

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

以上步骤可能会略有一些不同.每个人电脑的环境配置是不一样的,请按需执行命令.

问题总结:

1.执行brew link usbmuxd命令时,出现了截面中的警告.

《Flutter学习笔记(一)》 屏幕快照 .png

根据截图的提示:先执行brew unlink usbmuxd,然后执行brew link usbmuxd.问题解决

我的环境配置只出现上述一个问题,其他命令依次执行,没有问题.网上有些人说的问题,我也搜集了两个简书博主的文章,供你参考一下.

mac 上配置flutter开发环境
flutter环境配置详解MAC版

7.创建一个flutter项目

创建项目前,先执行命令open -a Simulator,打开Xcode模拟器.

 第一步: flutter create my_app
 第二步: cd my_app
 第三步:flutter run  //运行项目

这个时候,你看到模拟器出现截图画面,就说明你的配置已经大功告成了.

《Flutter学习笔记(一)》 image.png

笔记会持续更新的,Flutter的应用前景还是很好的,早学早占坑.

    原文作者：小唐羽锋
    原文地址: https://www.jianshu.com/p/549baf4f4602
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞