初识Flutter——谷歌的移动UI框架

第一次接触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并创建项目.

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

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

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

在真机上运行一下，看看效果。这里我遇到一个问题，就是新建项目直接运行没有效果，真机上安装不了，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居然报错。暂时说项目跑起来了，那我们先看看跑出来的效果，然后看看热重载。

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

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