为什么我选择认识 Flutter ?

1_uq4-35mu2_32qvpnyqyt9q

Flutter 是什么

Flutter 移动应用程序 SDK 是为开发人员提供一种创建快捷、美观的应用程序的新方式,从而摆脱过去那种千篇一律的 app,尝试过 Flutter 的人都会真的爱上它。

与任何新系统一样,用户想知道 Flutter 有什么与众不同之处,“Flutter 有什么新的或者令人兴奋的东西吗?”,这是一个合理的问题,本文将从技术的角度回答 Flutter 有什么东西让人兴奋,而且给出它为什么让人兴奋的原因。

Flutter 的优势

  • 响应式视图的优点,不需要 JavaScript 的桥接器
  • 快速,流畅,可预测 ; 代码将 AOT 编译为本机(ARM)代码
  • 开发人员完全控制 UI 组件和布局
  • 配有美观,可定制的 UI 组件
  • 强大的开发者工具,惊人的热重新加载
  • 性能更好,兼容性更好,开发起来更有乐趣

系统要求

目前Flutter只能在Mac和Linux(64位)上工作,使用windows的同学可能要借助虚拟机来进行学习。

演示

androidiOS
screenshot_1524033161simulator screen shot - iphone x - 2018-04-18 at 14 32 39

安装

安装Flutter SDK

这一步其实很简单,就是将Flutter在github上的源码整个clone下来,在适当的目录执行👇命令:

1
2
$ git clone https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH

接着运行:

1
$ flutter doctor

👆这个命令会告诉你你的flutter还缺少什么依赖,输出如下:

接着运行:

1
$ flutter

第一次运行flutter它会自动下载一些依赖,并且进行自动编译。随后再次运行flutter就会跳过这些步骤

安装 Android studio

官方指引完成即可

安装Flutter

偏好设置中安装插件

安装Dart

偏好设置中安装插件

初始化

创建工程

1
flutter create {projectName}

安装依赖

1
2
//工程根目录下执行
flutter packages get

实例

Hello world

1
2
3
4
5
6
7
8
9
10
11
12
import 'package:flutter/material.dart';

void main() {
runApp(
new Center(
child: new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}

main.dart 同样作为程序的入口文件,需要实现main 函数

文档

问题

  • Android license status unknown.
1
2
3
4
5
6
7
8
9
10
Hi everyone,
type $flutter upgrade
type $flutter doctor --android-licenses
It might say some licenses are not accepted(something like that)
you will be asked 'Do you want to review the licenses'?
typey<press enter>

accept all the licenses review.

now check flutter again with $flutter doctor
请我喝杯咖啡吧~