Last weekend, I decided to re-structure my depth year and go on a learning adventure. I asked myself, how long will it take me to learn Flutter?

上周末，我决定重新组织深度学习并继续学习。 我问自己， 学习Flutter需要多长时间？

The answer to that is — not very long at all.

答案是—不会很长。

So why Flutter?

那为什么要颤振呢？

I’ve heard and seen it around a lot lately, with other devs asking when I’ll get my hands dirty in it and start writing about the framework. I’m going to keep it real — I’m a complete Flutter noob and this is what I’ve learned about it over the past 24 hours.

最近，我听到并看到了很多内容，其他开发人员则问我什么时候可以开始研究它，并开始撰写有关该框架的文章。 我将保持真实—我是一个完整的Flutter新手，这是我在过去24小时内学到的内容。

All in all, I’ve probably only spent about 3 hours on it so far, split over a 24 hour period. Most of it was spent playing around with everything and seeing how the pieces fit together — or should we say, widgets.

总的来说，到目前为止，我大概只花了3个小时，就花了24个小时。 其中的大部分时间都花在玩弄所有东西上，以及看各部分如何组合在一起-或者我们应该说小部件。

颤振如何工作 (How does Flutter work)

According to the official tagline, Flutter is:

根据官方口号，Flutter是：

Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Google的UI工具包，可通过单个代码库为移动 ， 网络和桌面构建漂亮的，本机编译的应用程序。

But what exactly does this mean?

但是，这到底是什么意思？

From a developer learning perspective, it’s like the guys at Google sat down, picked out the best bits of web development, decided that JavaScript and CSS should have a child together, and didn’t invite HTML or any kind of XML structuring to the party.

从开发人员的学习角度来看，这就像Google的工作人员坐下来，挑选了Web开发的最佳方式，决定JavaScript和CSS应该在一起生个孩子，并且不邀请HTML或任何XML结构参加聚会。

A lot of it just works, in part, it’s because it comes out of the box pre-configured. This makes it highly accessible to developers and learning developers. You don’t have to construct everything from scratch, not really, because there’s already a pre-coded widget shipped with Flutter.

许多功能只是起作用，部分是因为它是预先配置好的。 这使得开发人员和学习型开发人员都可以轻松访问它。 您不必从头开始构建所有内容，不是真正地构建所有内容，因为Flutter已经提供了预编码的小部件。

It works with a design-first approach, meaning that you’ll need a clear visual outline of what you want to achieve. It’s not like your traditional JavaScript, HTML, and CSS combination where you can just make it up as you go along. Sure, you can technically do that in Flutter too, but it’s easier to get lost in the tree if you’re not strategic in your approach.

它采用“设计优先”的方法工作，这意味着您将需要清晰的视觉轮廓以了解要实现的目标。 这与传统JavaScript，HTML和CSS组合不同，您可以随时进行组合。 当然，从技术上讲，您也可以在Flutter中执行此操作，但是如果您的方法不明智，则更容易迷失在树上。

So how does Flutter work? Well, everything is a widget.

那么Flutter如何工作？ 好吧，一切都是小部件。

一切都是小部件 (Everything is a widget)

The idea behind Flutter works like this: everything is a widget until you can’t abstract any further. A widget is basically a class object that’s instantiated and can be reused across your application.

Flutter背后的想法是这样的：一切都是小部件，直到您无法进一步抽象为止。 小部件基本上是实例化的类对象，可以在整个应用程序中重用。

What does it look like?

它是什么样子的？

When you use the default Google Material widget that’s shipped with Flutter, it gives you access to all the pre-configured Material design visual assets and possible settings such as colors and icons.

当您使用Flutter随附的默认Google Material小部件时，它使您可以访问所有预配置的Material设计视觉资源以及可能的设置，例如颜色和图标。

In a simple starter Flutter app, you have the main() class that Flutter looks for as the entryway into your app. It’s got void declared because there’s nothing to return.

在一个简单的入门Flutter应用程序中，您拥有Flutter查找作为进入应用程序的入口的main()类。 它已声明为void因为没有返回值。

A simple view can look something like this:

一个简单的视图可能看起来像这样：

import 'package:flutter/material.dart'; void main() => runApp(MaterialApp(     home: Text('heeeeey')  ));

The MaterialApp() class is a wrapper widget that applies Google Material design principles on your app. It’s a bootstrap wrapper that makes your app uniform with user expectations and the general design ecosystem of apps currently available. While it does create a level of generic feel for your app, it’s a trade-off for rapid prototyping out a working solution.

MaterialApp()类是包装小部件，可将Google Material设计原则应用于您的应用。 这是一个引导程序包装程序，可让您的应用符合用户的期望以及当前可用应用的一般设计生态系统。 虽然确实为您的应用程序创造了某种程度的通用感，但是这是快速原型化可行解决方案的折衷方案。

To create something more useful than just printing text onto the screen, using Scaffold() widget lets you draw on specific and commonly used visual features such as the app bar, the body area, bottom bars, and navigation areas. And because everything is nested, it means that your view can be broken down into its smallest sub-set piece. So within the Scaffold(), you can have another Scaffold().

为了创建比仅在屏幕上打印文本更有用的功能，使用Scaffold()小部件可让您绘制特定且常用的视觉功能，例如应用程序栏，主体区域，底部栏和导航区域。 而且由于所有内容都是嵌套的，这意味着您可以将视图分解为最小的子集。 因此，在Scaffold() ，您可以拥有另一个Scaffold().

While it may sound counter-intuitive in code and almost akin to an impending pyramid of doom, it’s not. How so? Because each code block represents a widget, a widget within a widget is based on how well you can coordinate your design.

虽然这听起来可能与代码背道而驰，并且几乎类似于即将到来的厄运金字塔，但事实并非如此。 为何如此？ 因为每个代码块都表示一个小部件，所以小部件中的小部件取决于您协调设计的程度。

If you really look at it, the nesting idea is similar to a DOM tree. But Flutter takes it one step further by keeping your separation of concerns based on grouped values rather than language type.

如果您真的看过它，则嵌套的想法类似于DOM树。 但是Flutter通过根据分组的值而不是语言类型来保持关注点的分离，进一步迈出了一步。

In a traditional setup, the view and logic would be separated from one another. However, the integrated nature of view, data, and layout in Flutter makes it easier to manage. With Flutter, you get to focus on the object itself and how it visually renders. You get to think from a design first perspective rather than jumping around between different files. It’s self-contained within the widget (aka class).

在传统设置中，视图和逻辑将彼此分离。 但是，Flutter中视图，数据和布局的集成特性使其更易于管理。 使用Flutter，您可以专注于对象本身及其视觉呈现方式。 您可以从设计优先的角度进行思考，而不是在不同文件之间四处寻找。 它在小部件(aka类)中是自包含的。

If we were to compare it to something we already know, a widget is almost like a module. The only main difference is how it’s written, the general size and the name. Modules tend to be bigger, while widgets in Flutter are advocated to be as small as possible, allowing you to compose your views with your personalized set of building blocks.

如果我们将其与我们已经知道的东西进行比较，则小部件几乎就像一个模块。 唯一的主要区别是它的写法，一般大小和名称。 模块往往会更大，而Flutter中的小部件则被提倡尽可能的小，从而使您可以使用个性化的构建基块来组合视图。

Flutter的小部件目录包含您可能需要的大部分内容 (Flutter’s widget catalog has most of what you’ll probably need)

Flutter’s widget catalog contains everything that comes pre-built with Flutter. The extensive list includes a majority of what most information-based applications need.

Flutter的小部件目录包含Flutter预先构建的所有内容。 详尽的清单包括大多数基于信息的应用程序所需的大多数。

You can potentially look at an app and re-created it fairly quickly by just using the pre-built widgets that are available. It’s almost the coded version of a WYSIWYG. While this may sound like a bad thing, the major difference between WYSIWYGs and Flutter is that the latter is extensible and highly customizable.

您可以潜在地查看一个应用程序，然后仅使用可用的预构建小部件即可相当快地重新创建它。 它几乎是所见即所得的编码版本。 虽然这听起来似乎是一件坏事，但是所见即所得和Flutter之间的主要区别在于后者是可扩展的并且可以高度自定义。

You can probably make games with it too, but that’s not the kind of target market the official Flutter documentation leans into.

您也许也可以用它来制作游戏，但这并不是Flutter官方文档所针对的目标市场。

会成为下一件大事吗？ (Is it going to be the next big thing?)

This is probably the multi-million dollar question that every company and developer asks before they jump into new technology. Unlike web to mobile frameworks and libraries like React Native, NativeScript, and Ionic, Flutter runs on Dart.

这可能是每个公司和开发人员在进入新技术之前都会提出的数百万美元的问题。 与Web到移动框架和React Native，NativeScript和Ionic等库不同，Flutter在Dart上运行。

Dart is one of the youngest kid on the block and looks a bit like JavaScript, but more grownup from the pains that JavaScript sometimes exhibit. It’s a standalone language that’s being used to translate into JavaScript, Java, and even Swift for iOS devices.

Dart是这个领域中年龄最小的孩子之一，看上去有点像JavaScript，但由于JavaScript有时会表现出的痛苦而变得更加成熟。 它是一种独立的语言，可用于翻译为iOS设备JavaScript，Java甚至Swift。

Dart also solves the disconnect between large HTML, CSS, and JavaScript, where the relationships between them can fall apart over time. Someone, somewhere, is going to be tempted to use !important to override your overrides.

Dart还解决了大型HTML，CSS和JavaScript之间的脱节，后者之间的关系会随着时间的流逝而瓦解。 某个地方的某人将很想使用!important来覆盖您的覆盖。

In the age where UI is a make or break situation for applications and businesses, Dart makes it easier for developers who aren’t necessarily designers. It gives power to the people who understand how to code but not necessarily the finer points of how to design.

在UI成为应用程序和企业成败局面的时代，Dart使不一定是设计师的开发人员可以更轻松地进行开发。 它为了解如何编写代码的人提供了力量，但不一定知道如何设计的精妙之处。

最终初裁 (Final initial verdict)

I’m going to be honest — it’s only been 24 hours of playing with Flutter, so this might just be the code honeymoon phase. Most of has just been playing with the UI and building views with the different widgets available. The next step is figuring out how to connect and manage data within Flutter.

我要说实话-与Flutter玩了24小时，所以这可能只是代码蜜月阶段。 大多数功能只是在玩UI并使用可用的小部件来构建视图。 下一步是弄清楚Flutter中如何连接和管理数据。

After that, it’ll probably be time to build something and release it into the wild to see how it will perform.

在那之后，可能是时候构建一些东西并将其发布给野人，以查看它的性能了。

So what’s my final initial verdict on Flutter?

那么，我对Flutter的最终初步判决是什么？

I like it.

我喜欢。

For anyone that already knows a programming language and understand the basic concepts of OOP like classes, methods, functions, and inheritance, picking up Dart is sort of like writing in JavaScript with a dash of Java - but not at the same time. No. It’s much more simplified with the option to be both statically typed and dynamic, based on whatever you want it to be.

对于已经了解编程语言并了解OOP基本概念(例如类，方法，函数和继承)的任何人，拿起Dart就像是用少量Java用JavaScript编写-但不是同时进行。 不会。它可以根据您的需要而设置为静态类型和动态类型，从而更加简化。

Dart is easy. Making something in Flutter with minimal or no knowledge of the framework is a matter of figuring out what you need from the widgets catalog.

Dart很容易。 在Flutter中几乎不了解框架，甚至根本不了解框架，这都是从小部件目录中找出所需内容的问题。

I’m sure there’s probably more it. Whether I encounter them or not is something I’ll find out soon.

我敢肯定还有更多。 我是否会遇到它们，很快就会发现。