欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

Flutter学习笔记01

发表日期:2018-11 文章编辑:小灯 浏览次数:3639

Flutter学习笔记01

[TOC]

1. 跨平台技术的发展历史

1.1 跨平台技术

跨平台技术是软件工程发展到一定阶段的产物,即一个操作系统下开发的应用,放到另一个操作系统下依然可以运行,即不依赖于操作系统,也不依赖硬件环境。典型的跨平台编程语言有java和python,它们依赖于底层的虚拟机(或解释器)得以在多种系统下开发,运行和维护。

尽管java和python语言编写的前端UI应用程序一般也能跨平台运行,但它们更多地被用于后端业务软件系统开发的应用场景。随着移动互联网大潮的兴起,ios、android等移动操作系统在移动客户端被大量使用,2013年移动设备的装机量首次超越PC,行业需求催生了跨平台前端技术的发展。

1.2 跨平台前端框架

目前,前端狂平台框架分为两类,一类是以WebApp框架,另一类是移动App框架。

目前主流的WebApp框架包括Cordova、Inonic、Dcloud、小程序等几种,移动App由Facebook公司推出的React native、阿里推出的Weex以及本文要重点介绍的谷歌公司推出的Flutter。

2.FLutter简介

在 2017年的谷歌 I/O大会上,Google推出了Flutter —— 一款新的用于创建移动应用的开源库。在2018年初世界移动大会上发布了 Flutter的第一个Beta版本,2018年5月的 I/O大会上更新到了Beta3版本,向正式版又迈进了一步。一时间业内对这个框架的关注度越来越高。

Flutter可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia应用的主要方式。

Flutter组件采用现代响应式框架构建,这是从React中获得的灵感,中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变,组件会重构它的描述(description),Flutter会对比之前的描述, 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

3.Windows系统下Flutter开发环境的安装部署

3.1 下载Flutter SDK

  1. 在Flutter官网下载最新可用的安装包,有Beta、Dev和Master几个版本可以选择,一般Beta是比较稳定的版本,这里选择Beta版本。
1541216591797.png
  1. 将安装包zip解压到你想安装Flutter SDK的路径(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)。
  2. 在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,接下来,你就可以在Flutter命令行运行flutter命令了。

3.2更新环境变量

要在终端运行 flutter 命令, 你需要添加以下环境变量到系统PATH:

  • 转到 “控制面板>用户帐户>用户帐户>更改我的环境变量”
  • 在“用户变量”下检查是否有名为“Path”的条目:
    • 如果该条目存在, 追加 flutter\bin的全路径,使用 ; 作为分隔符.
    • 如果条目不存在, 创建一个新用户变量 Path ,然后将 flutter\bin的全路径作为它的值.
  • 在“用户变量”下检查是否有名为”PUB_HOSTED_URL”和”FLUTTER_STORAGE_BASE_URL”的条目,如果没有,也添加它们。

重启Windows以应用此更改。

1541217219951.png

3.3 运行 flutter doctor

  • 打开一个新的命令提示符或PowerShell窗口并运行以下命令以查看是否需要安装任何依赖项来完成安装:
1541224320721.png

3.4 安装Flutter、Dart插件

3.4.1 Android Studio 安装

Android Studio: 为Flutter提供完整的IDE体验

  1. 安装Android Studio
  • Android Studio, 3.0或更高版本.

或者,您也可以使用IntelliJ:

  • IntelliJ IDEA Community, version 2018.2或更高版本.
  • IntelliJ IDEA Ultimate, version 2018.2 或更高版本.

3.4.2 安装Flutter和Dart插件

需要安装两个插件:

  • Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等).
  • Dart插件: 提供代码分析 (输入代码时进行验证、代码补全等).

要安装这些:

  1. 启动Android Studio.

  2. 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).

  3. 选择 Browse repositories…, 选择 Flutter 插件并点击 install.

  4. 重启Android Studio后插件生效.

1541225383155.png 1541225697811.png

4. 第一个Flutter应用

  1. 打开idea新建一个工程,选择Flutter,点击Next


    [图片上传中...(1541226214925.png-d7e2c9-1541238672272-0)]
  1. 点击Finish


    1541226214925.png
  1. 修改\flutter\packages\flutter_tools\gradle\flutter.gradle
1541238006495.png
  1. 编译运行
1541238183265.png
本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:https://dengtar.com/18394.html
上一篇:党建APP开发 下一篇:Flutter初体验
相关APP开发
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.