当前位置: 移动技术网 > 科技>软件教程>编程开发 > Flutter 下载安装教程

Flutter 下载安装教程

2018年10月23日  | 移动技术网科技  | 我要评论
Flutter 下载安装教程

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

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网