Flutter 下载安装教程

所属分类: 软件教程 / 编程开发 阅读数: 1327
收藏 0 赞 0 分享

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

框架概况

Flutter是谷歌的移动UI框架 [4] ,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia [1] 应用的主要方式。
Flutter组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变,组件会重构它的描述(description),Flutter会对比之前的描述, 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。
 

发展历史

Flutter的第一个版本被称为“Sky”,运行在Android操作系统是。它是在2015年Dart开发者峰会 [3] 上亮相的,其目的是能够以每秒120帧的速度持续渲染。
Beta
Beta1版本于2018年2月27日在2018 世界移动大会公布 [5] 。
Beta2版本2018年3月6日发布 [6] 。

Windows

1. 下载安装包

因为下载安装包需要一定的时间,所以先把进行安装包的下载。可以去官网下载:Download Flutter download_sdk 可以去 Flutter github 下载安装包:Download Flutter Zip

2. 配置环境变量

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

等待下载 过程中配置一下环境变量

  1. 右键我的电脑(此电脑) > 属性 > 高级系统保护设置 > 高级 > 环境变量 computer env_src

  2. 在 系统变量 下点击新建(可以将上面代码复制): pub_host_url base_url

下载完安装包 后,

  1. 把它解压到你想安装 Flutter SDK 的路径(我是在 C:\src\flutterdeco_file
  2. 在 系统变量 下检查是否有名为“Path(PATH)”的条目: a. 如果该条目存在,左键双击击进入该项 编辑 > 新增 b. 如果条目不存在, 点击下面 新建, 变量名为 Path ,变量值为 C:\src\flutter\bin env_var

3. 运行 Flutter doctor

  1. 打开 Flutter console open_flutter_console flutter_console

  2. 输入 flutter doctor, 检查还需要安装的项目 flutter doctor 如上图,显示 [X] 的为没有安装的项目

    • 如果是前端仔,建议用 VScode,跳到 VSCode Flutter 配置
    • 如果是安卓仔,那就直接可以用 Android Studio

4. 配置 VSCode

  1. 打开命令面板(快捷键:Ctrl + Shift + P)
  2. 安装扩展,搜索 flutter点击安装,发现 Dart 也一起安装好了
  3. 验证
    • 打开命令面板
    • 输入 'doctor',选择 'Flutter: Run Flutter Doctor'
    • 查看 “OUTPUT” 窗口中的输出是否有问题
  4. 创建项目
    • 打开命令面板
    • 选择 'Flutter: New Project'
    • 项目命名,遵循谷歌下划线命名,使用驼峰命名会报错

5. 配置移动设备

  1. 将自己的手机连接到电脑,打开发者模式(连续点击版本号) mode
  2. 进入开发者选项,打开 USB 调试(不同手机'开发者选项'在不同位置,自行百度)
  3. 检查是否连接成功
  4. 按 F5 键或点击 调试>启动调试(Debug>Start Debugging),等待手机出现画面 demo
  5. 体验热重载
    • 打开 main.dart文件
    • 找到 home: new MyHomePage(title: 'Flutter Demo Home Page'),
    • title 里的内容改为 VSCode Flutter Demo
    • 保存(ctrl-s), 就可以在手机上看到更改了 demo_vsc
更多精彩内容其他人还在看

Unity3D摄像机跟随小球移动而不旋转的设置方法

Unity3D中怎样让摄像机跟随小球移动而不旋转?Unity3D中使用摄像机拍小球,它在移动的过程中,自身是不断旋转的,所以,摄像机也会跟着一起旋转,怎么让摄像机不转呢?请看下文详细介绍
收藏 0 赞 0 分享

Myeclipse断点不起作用出现斜线该怎么办呢?

Myeclipse断点不起作用出现斜线该怎么办呢?Myeclipse断点处如果出现斜线,那就说明断点不起作用了,该怎么处理这种情况呢?下面我们一起来看看详细的解决办法,需要的朋友可以参考下
收藏 0 赞 0 分享

Visual Studio中无法查找或打开PDB文件怎么办?

Visual Studio中无法查找或打开PDB文件怎么办?在VS底部的“输出”框中提示“无法查找或打开 PDB 文件”,出现这个问题该怎么解决呢?下面我们来看看详细的解决办法,需要的朋友可以参考下
收藏 0 赞 0 分享

VS2013调试代码时怎么避免加载符号?

VS2013调试代码时怎么避免加载符号?VS2013调试代码时候,当电脑接入网络后系统会自动从Microsoft 符号服务器加载PDB符号文件,一旦加载符号就会变得很慢,下面我们来看看详细的解决办法
收藏 0 赞 0 分享

eclipse怎么更换工作空间?eclipse更换工作区的方法

eclipse怎么更换工作空间?eclipse经常编辑代码,eclipse默认的的工作区在C盘,经常使用eclipse写代码会导致C盘空间缩小,该怎么更换工作区呢?下面我们来看看eclipse更换工作区的方法
收藏 0 赞 0 分享

vs2010怎么更换默认的起始页?vs2010起始页添加命令按钮的方法

vs2010怎么更换默认的起始页?vs2010起始页就是vs启动的时候默认打开的页面,当然我们可以根据自己的需要来设置起始页,下面我们来看看vs2010起始页添加命令按钮的方法
收藏 0 赞 0 分享

eclipse中sdk与adt版本不兼容该怎么解决? 三种方法帮你搞定

eclipse中sdk与adt版本不兼容该怎么解决?出现这种问题基本上是因为sdk版本过高,今天我们来看看三种比较简单的解决办法,图文教程很简单,需要的朋友可以参考下
收藏 0 赞 0 分享

vb怎么输出菱形图案?vb绘制菱形的教程

vb怎么输出菱形图案?vb编辑的代码可以实现很多功能,今天我们就来看看怎么使用vb绘制菱形图案,这篇教程很简单,适合新手学习,需要的朋友可以参考下
收藏 0 赞 0 分享

Android Studio怎么导出设置?

Android Studio怎么导出设置?Android Studio中设置了很多符合自己习惯的东西,但是如果重新安装软件,之前设置的东西都会消失,该怎么将这些设置导出来呢?下面我们一起来看看详细教程
收藏 0 赞 0 分享

怎么使用arcgis对进行地图投影?

怎么使用arcgis对进行地图投影?没有投影过的地图该怎么投影?我们想将是西安80的shp数据,但是一般的搜不带号,想转换成带号的,就需要使用arcgis对进行地图投影,详细教程请看下文
收藏 0 赞 0 分享
查看更多