了解flatter——谷歌的移动用户界面框架

第一次接触Flutter的时候,官方有个这样的说明—一切皆为widget,这句话真的特别以意思,我在平常工作中,每次跟其他语言开发者交流的时候,我们经常说Android就是java的可视化UI。就是说Android最大的特性就是UI,做一套界面出来把数据展示出来。说的感觉很简单,其实很难。HenCoder大神出过一版系统自定义View教学,说的是《给高级 Android 工程师的进阶手册》(附上网站链接:https://hencoder.com/ui-1-1/)。可见,一个高级的Android工程师必须掌握复杂界面的搭建以及自定义来实现。而Google在2018年移动大会发布的Flutter也说明了这一点。一切皆为控件的思想。

现在讲下Flutter的核心原则:Flutter包括一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具。这些组件可以帮助您快速地设计、构建、测试和调试应用程序。

Flutter的优势有哪些:

  • 提高开发效率
  • 同一份代码开发iOS和Android
  • 用更少的代码做更多的事情
  • 轻松迭代
  • 在应用程序运行时更改代码并重新加载(通过热重载)
  • 修复崩溃并继续从应用程序停止的地方进行调试
  • 创建美观,高度定制的用户体验
  • 受益于使用Flutter框架提供的丰富的Material Design和Cupertino(iOS风格)的widget
  • 实现定制、美观、品牌驱动的设计,而不受原生控件的限制

这些都是贴的官方文档,我觉得不必要解释,毕竟还是很好懂得,下面我们就按照文档来撸一下,认识一下这项新技术。

(中文网站:https://flutterchina.club/get-started/install/)我们主张自己看英文文档,毕竟还是希望大家提高阅读能力。

第一:安装并运行Flutter,您的开发环境必须满足以下最低要求:

  • 操作系统: macOS (64-bit)
  • 磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间).
  • 工具: Flutter 依赖下面这些命令行工具.
  • bash, mkdir, rm, git, curl, unzip, which

这个安装和配置,请自己看官方文档,如果你使用AndroidStudio的话,直接看编辑器配置来进行安装。(ps:这里总是有人下载不成功,请看一下设置—updates—use secure connection这个不要勾选)

  1. 启动Android Studio.
  2. 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
  3. 选择 Browse repositories…, 选择 Flutter 插件并点击 install.
  4. 重启Android Studio后插件生效.

然后我们可以创建第一个应用了。热重载是我最想要体验的,所以一起来看看,如下图。

  1. 选择 File>New Flutter Project
  2. 选择 Flutter application 作为 project 类型, 然后点击 Next
  3. 输入项目名称 (如 myapp), 然后点击 Next
  4. 点击 Finish
  5. 等待Android Studio安装SDK并创建项目.

创建Flutter项目

创建

有人在这一步卡住了,选择SDK这个,因为缺少SDK,所以我们去下载这个地址:https://flutter.io/docs/development/tools/sdk/archive#macos我这个是mac端的,如果是Windows的去下载windows端。

下载flutter配置SDK

然后下载完,解压,这个时候解压文件放在你一个熟知上午位置,因为我们等下要用,然后在回到Android Studio中打开设置–》》》语言与框架—》》》Flutter,设置红色部分,就是你刚刚下载解压下来的那个东西,选择上,然后点击应用,系统会提示你,同步Drat,点同意,然后你在看看Dart的SDK配置完成了没有。如下图:

配置Flutter-SDK

配置Dart-SDK

好了,现在我们继续创建项目,有没有发现创建项目studio特别容易卡死,皮一下,我也是,不知道为什么,没时间研究,卡死我们重启一下就好了,然后我们继续创建项目。好了请看下图:

Flutter项目

在真机上运行一下,看看效果。这里我遇到一个问题,就是新建项目直接运行没有效果,真机上安装不了,run上也看不出来什么错误,在网上各种找答案,都没有效果,我就想着是不是代码的错误,直接删除了main.dart(lib文件下文件)所有代码只写了

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: ‘Welcome to Flutter’,
home: new Scaffold(
appBar: new AppBar(
title: new Text(‘Welcome to Flutter’),
),
body: new Center(
child: new Text(‘Hello World’),
),
),
);
}
}

然后就跑起来了,很奇怪哈哈,而且你们可以看看manifest里面icon居然报错。暂时说项目跑起来了,那我们先看看跑出来的效果,然后看看热重载。

这是刚运行的demo

更改代码body部分,点击studio上面的闪电标示。我们看看热重载。

热重载

即时生效,突然发现对于项目简直是简单很多,优化了开发进度。好了,初识算是介绍完了,下一篇写一个小app试试看。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据