Flutter系列：1.开发环境配置

Lionad-Morotar 发布于2019-06-25 17:01 / 1152人阅读

摘要：要求为存放的路径，笔者的路径为执行以下命令使的修改生效打印，验证是否在其中执行安装依赖不出意外，到此为止安装成功。参考官网配置指南

前言

Flutter是Google推出的跨平台App开发SDK，通过自己实现高性能引擎相较于RN和Weex的JS桥接方案有本质的性能优势，具体原理对比可以阅读此文移动端跨平台开发的深度解析进一步了解。

笔者作为一名iOS开发者对Flutter的高性能跨平台方案有着浓厚的兴趣，作为学习目的，打算通过实现一些简单的Demo的形式来分享自己学习的过程，希望同大家共同交流学习，共同进步。

Flutter为什么选择Dart语言

两个最主要的原因就是Dart有2个重要的特征：JIT和AOT, 基于JIT的开发模式支持Hot Reload(热加载)，加速开发周期；AOT的编译器可以生成更加高效的ARM代码，可以快速启动并拥有可预测的生产部署性能。Learn More

开发环境

机器：macbookPro macOS v10.14

Flutter SDK: flutter_macos_v0.9.4-beta

IDE: VSCode (Xcode Version 10.0)

测试平台：iOS

开发环境配置 Flutter下载

点击下载sdk flutter_macos_v0.9.4-beta.zip ，其他版本点我前往

打开命令行，解压sdk到指定路径, 例如个人用户目录下自己创建的Flutter文件夹，也可以手动解压

 cd ~/Flutter
 unzip ~/Downloads/flutter_macos_v0.9.4-beta.zip

环境变量配置

在用户根目录下打开或者新建 .bash_profile 文件，添加以下配置：

# Flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=~/Flutter/flutter/bin:$PATH

其中前2行是专为中国开发者配置的代理，第3行为添加Flutter到PATH。要求为存放"Flutter/bin"的路径，笔者的路径为"~/Flutter/flutter/bin"

执行以下命令使.bash_profile的修改生效

source $HOME/.bash_profile

打印path，验证flutter/bin是否在其中

echo $PATH

执行安装Flutter依赖

flutter doctor

不出意外，到此为止Flutter安装成功。

注意: 如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

VSCode安装配置

下载最新版VSCode
点击去官网下载解压后拖到应用程序目录即可直接运行VSCode

安装Flutter插件

选择Extensions，输入Flutter 点击Install安装，安装后需要点击Reload方可加载插件，如下图

验证Flutter

依次点击VSCode菜单栏 View->Command palette

然后输入"doctor"选择 "Flutter: Run Flutter Doctor"命令执行

创建第一个Flutter APP

命令行执行命令打开iOS模拟器

open -a Simulator

依次点击VSCode菜单栏 View->Command palette
然后输入"Flutter", 选择"Flutter: New Project" 命令执行，然后输入工程名字 "myapp" (工程名只能小写)创建第一个Flutter APP

点击Debug->Star Debugging 或者F5快捷键运行APP, (首次运行会提示选择环境，选择Dart&Flutter)
VSCode会自动编译并运行到模拟器，如图：

这是默认工程的APP, 显示一行提示文案，按钮点击次数以及一个+按钮，点击按钮后次数显示数字将不断增加。

Hot Reload

Flutter 提供热加载功能，在Debugging状态下编辑修改代码直接保存后，便可以加载相应的修改，而并不需要重启调试，大大提升开发速度。

注意：Debug模式下，启用Dart的JIT模式，故支持Hot Reload；而Release模式下，启用的是Dart的AOT模式，此模式会做一些优化故不支持Hot Reload。

修改lib/main.dart第93行提示文案为：

"You have clicked the button this many times:",

然后保存，app上的文案就会直接更新，而不需要重新编译运行。

参考

Flutter 官网配置指南

专线服务超融合服务器 Flutter开发环境 Flutter开发环境搭建开发环境配置 python开发环境配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/17187.html

Flutter基础（二）Flutter最新开发环境搭建和Hello World

摘要：注释处的方法是程序的入口，使用了符号，这是中单行函数或方法的简写，等价于如下代码方法是框架的入口，如果不返回方法，那么执行的是一个控制台应用。本文首发于微信公众号「刘望舒」前言最近的Google I/O大会上，Flutter1.5 开始支持移动、Web、桌面和嵌入式设备，从不温不火的sky一直进化到如今热门的Flutter，Flutter的发展已经超出很多人的想象。我对跨平台技术一...

tuomao 2019-05-23 17:30 评论0 收藏0
Flutter 即学即用系列博客——01 环境搭建

摘要：笔者这边使用的是电脑，因此以电脑的环境搭建为例。官网安装链接中文网安装链接我们这边以官网为例进行说明。下载完成之后解压到自己想放置的目录建议路径不要包含中文。按照上面提示进行处理即可。前言工欲善其事，必先利其器所以第一篇我们来说说 Flutter 环境的搭建。笔者这边使用的是 MAC 电脑，因此以 MAC 电脑的环境搭建为例。 Windows 或者 Linux 也是类似的操作。 ...

JohnLui 2019-04-23 15:14 评论0 收藏0
Flutter 即学即用系列博客——04 Flutter UI 初窥

摘要：坏处就是视觉干扰。这个是自动产生的，不可删除。通过的修改初步熟悉界面的写法。通过一个具体的小控件初窥的写法和使用方法。表示完全不透明。更多阅读即学即用系列博客环境搭建即学即用系列博客一个纯说明即学即用系列博客在旧有项目引入前面三篇可以算是一个小小的里程碑。主要是介绍了 Flutter 环境的搭建、如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter。这...

番茄西红柿 2019-04-23 15:13 评论0 收藏0
Flutter系列：2.实现一个简单的登录界面

摘要：从代码可以看到其属性是一个对象，也是的基础组件之一，实现基本页面布局结构，比如页面导航栏，同时也封装了一系列的基础控件，比如抽屉页，提示，底部提示。前言上一篇文章Flutter系列：1.开发环境配置已经配置好了基本的开发环境，那么这篇将直入主题，实现一个简单的登录页面，实现输入用户名密码点击登录后验证输入有效性，模拟调用api登录，最终弹窗提示登录成功。 showImg(https...

DTeam 2019-06-25 17:01 评论0 收藏0
一文读懂Flutter的搭建与运行

摘要：在本文中，我们将带大家进一步了解的搭建与运行。操作系统或更高版本磁盘空间工具依赖或更新的版本和命令行工具这些命令行工具。运行应用程序定位到工具栏在中选择一个运行该应用的设备。作者：个推iOS开发工程师伊泽瑞尔 Flutter是Google推出的跨平台的解决方案，用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架。之前我们为大家介绍了《跨...

JayChen 2019-08-26 13:54 评论0 收藏0