Flutter入门（框架对比、生态环境、安装、hello world）

服部
1,366 阅读5分钟

Flutter发展历史

Flutter官方介绍

Flutter 是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

Fluttlr可以与现有的代码一起工作。

在全世界，Flutter正在被越来越多的开发者组织者使用，

并且Flutter是完全免费、开源的。

1. 学习Flutter需掌握的基础

  • Dart基础
  • Android Studio/VS Code
  • 一定的Android/iOS 基础

2. 解读Flutte重要三点

  • 跨平台：Linux Android iOS Fuchsia
  • 原生用户界面：原生的，让我们体验更好，性能更好
  • 开源免费：完全开源，可进行商用

2.1 前端开发者如何快速上手Flutter开发

  • 语言基础

    • 在开发语言上Flutter采用的是Google的Dart语言，从Dart2开始Dart便是强类型语言，而且是静态类型的，这和前端同学熟知的JavaScript语言是有很大不同的，对于前端开发的同学，接触到比较多的编程语言通常是JavaScript，JavaScript是弱类型，动态类型语言，所以在前端同学在学习Dart的时候一定要分清这两个概念。

  • 另外还有很重要的一点是Dart是面向对象的，如果你有OOP也就是面向对象编程的经验，那么学习Dart会很轻松。

  • 对于前端同学来说，JavaScript不是面向对象的，所以学习Dart会有一定的适应过程，可以将Dart作为你的第一个面向对象的编程语言进行学习。

  • 开发

    • 开发系统WindowsMac
      价格价格亲民价格较高
      可开发无法开发iOS能同时开发iOS 和 Android
    • 开发工具Visual Studio CodeAndroid Studio
      前端开发利器Android开发利器
      无法调试AndroidGoogle 亲儿子

    • 在开发工具上Flutter的官方支持的开发工具是Android Studio，它是一个用来开发Android APP的IDE，那么除了Android Studio之外，对于熟悉VS Code的同学来说，我们还可以用VS Code来开发Flutter，我们只需要在现有的Android Studio与VS Code的基础上安装Flutter和Dart插件即可让我们手中的手头的工具拥有开发Flutter的能力

  • 布局

    • 在布局方面，Flutter采用的是声明式UI布局方式这和前端通常采用的css的布局方式有很大的不同。

  • 为了减轻开发人员在各种UI状态之间转换的编程负担，Flutter让开发人员描述当前的UI状态，并切不需要关系它是如何过渡到框架的。

  • 虽然声明式UI能帮我们减轻很多负担，但大家要将布局的思维方式要转变过来。

  • 接下来，我们来体验一下Flutter声明式UI布局方式的效果：

Container(
    decoration: BoxDecoration(color: Colors.grey),
    child: Text(
    '声明式布局',
    style: TextStyle(
        fontSize: 20, fontWeight: FontWeight.w600, color: Colors.red),
    ),
)

从上面Flutter代码可以看出，Flutter的布局方式和我们前端布局常用的css有所不同，从前端布局方式到Flutter的布局方式的转变需要一段时间进行适应，我们需要做的就是多画界面从中找到感觉

  • 第三方库
    • pub.dev

3. Flutter与主力框架对比

  1. Cordover: 混合式开发框架（Hybrid App)
  2. RN(React Native): 生成原生App,但以View为基础嵌入
  3. Flutter: 在渲染技术上，选择了自己实现(GDI)

4. Flutter 120Fps超高性能（符合游戏标准）

  • fps: 每秒传输帧数，可以简单理解为每秒画面数
    • 电影电视：24fps
    • 液晶电视：60HZ
    • 游戏：80fps

5. 生态环境介绍

6. Dart 编程语言 (flutte 基于 Dart 编写的)

7. Flutter开发环境的安装

7.1 Flutter 开发环境的搭建

系统的基本要求

    - 操作系统：window7以上64位操作系统
    - 磁盘空间： 大于3G,最好可以达到5G

JAVA环境的环境安装

Flutter SDK的安装

  • flutter.dev/docs/develo…
  • 配置环境变量
  • flutter doctor 命令做什么用的？（检验哪些安装好了，哪些没有安装好）
    1. 检查flutter版本
    2. 检查android studio是否安装
    3. 检查虚拟设备或手机设备是否开启或链接
    4. 检查vscode是否也安装了flutter/dart插件

7.2 Flutter开发环境的安装

  • Android Studio 的介绍和安装
  • Dart 和 Flutter开发插件的安装
    • 打开Android Studio,找到Plugin 进行安装
    • 出现Search in repositories 时点击进入
    • 安装Flutter 会自动安装Dart插件
  • Android 证书的安装

8. AVD虚拟机的建立

  • 新建一个Flutter 项目
    • 打开Android Studio,选择新建Flutter Project
    • 再次选择Flutter Application,需要等待一会
  • AVD虚拟机的安装

9. VSCode 中搭建开发环境

  • 安装Flutter插件
  • flutter create 项目名 创建项目
  • cd ./项目名
  • flutter run 运行flutter
  • 选择移动设备 或者虚拟机

10. 写Hello world 程序

10.1 升级FlutterSDK

  • 在终端中使用flutter upgrade
  • 删除SDK包重新下载

10.2 VSCode 中常用快捷键

  • R键：点击后热加载，直接查看预览效果
  • P键：在虚拟机显示网格，工作中经常使用
  • O键：切换Android和iOS的预览模式
  • Q键：退出调试

Flutter不同版本的特点？

  • Stable：稳定分支，可用于生产环境的版本。
  • Beta：由上个月最佳的Dev分支推送而来。
  • Master：主分支,相比于Dev更加稳定。
  • Dev：最新开发分支，包含Flutter最新的变更。

你觉得Flutter开发工具都有哪些吐槽点？

  • 由于出自谷歌，一些开发环境的配置，有一定的门槛，网络原因容易被卡住。
  • 国内地图好像没有Flutter的sdk,如何开发地图类？
  • 异常错误提示不是很友好，解决起来不是很方便。
  • 与现有App集成起来坑不少。
avatar
文章
阅读
粉丝