flutter dart_Dart和Flutter的简化介绍

flutter dart

有点背景 (A bit of background)

It all began in 2011: Xamarin, now a Microsoft-owned company, came up with a solution for hybrid mobile apps through its signature product, Xamarin SDK with C#. And thus began the revolution of hybrid mobile applications, the ease in writing one code base for many platforms.

一切始于2011年：Xamarin，现在是微软所有的公司，通过其签名产品Xamarin SDK和C＃提出了针对混合移动应用程序的解决方案。 从而开始了混合移动应用程序的革命，轻松地为多个平台编写一个代码库。

Ionic sprung up in 2013 with its first release by Drifty Co. Ionic helped web developers use their existing skills in the growing mobile app industry. In 2015, Facebook used React.js to reinvent it for mobile app developers. They gave us React Native, a completely JavaScript code base relying on native SDK’s.

Ionic于2013年由Drifty Co.发行了第一版。Ionic帮助Web开发人员在不断发展的移动应用程序行业中使用其现有技能。 2015年，Facebook使用React.js为移动应用程序开发人员重塑了它。 他们给了我们React Native，一个完全依赖JavaScript的SDK代码库。

And these aren’t the only ones, but a few of many hybrid mobile frameworks. More info can be found here.

这些并不是唯一的，而是许多混合移动框架中的一些。 更多信息可以在这里找到。

Now we can watch Google’s turn at putting its fingers in the pie with Flutter.

现在我们可以看到Google转向Flutter来指责它了。

什么是Dart？ (What is Dart?)

Google had its first ever release of Flutter 1.0 last December, after having it in beta mode for over 18 months. Dart is the programming language used to code Flutter apps. Dart is another product by Google and released version 2.1, before Flutter, in November. As it is starting out, the Flutter community is not as extensive as ReactNative, Ionic, or Xamarin.

Google在Beta模式下运行了18个月以上之后，于去年12月首次发布了Flutter 1.0。 Dart是用于对Flutter应用进行编码的编程语言。 Dart是Google的另一项产品，于11月在Flutter之前发布了2.1版。 刚开始时，Flutter社区并不像ReactNative，Ionic或Xamarin那样广泛。

A while back, I discovered a liking for JavaScript. I was ecstatic to be working on a ReactNative mobile app for my internship. I enjoy coding hybrid mobile apps too, so wanted to give Flutter a try, as I had done Xamarin sometime last year.

前一段时间，我发现了对JavaScript的喜好。 我很高兴能为实习生使用ReactNative移动应用程序。 我也喜欢编写混合移动应用程序的代码，因此想尝试一下Flutter，就像我去年某个时候做过Xamarin一样。

At my first glance of Flutter (and Dart), I felt befuddled and couldn’t seem to understand anything. They even had a section on their docs for developers moving from React Native. So, I took to digging deeper on all things Dart.

乍一看Flutter(和Dart)时，我感到困惑，似乎什么也听不懂。 他们甚至在文档中为从React Native迁移过来的开发人员提供了一节。 因此，我开始更深入地研究Dart。

Dart looks a bit like C and is an object-oriented programming language. So, if you prefer the C languages or Java, Dart is the one for you, and you’ll likely be proficient in it.

Dart有点像C，是一种面向对象的编程语言。 因此，如果您喜欢C语言或Java，则Dart是您的理想选择，并且您可能会精通它。

Dart is not only used for mobile app development but is a programming language. Approved as a standard by Ecma (ECMA-408), it’s used to build just about anything on the web, servers, desktop and of course, mobile applications (Yes, the same people who standardized our favorites ES5 and ES6.)

Dart不仅用于移动应用程序开发，而且是一种编程语言。 它已由Ecma(ECMA-408)批准为标准，可用于在Web，服务器，台式机以及移动应用程序上几乎构建任何东西(是的，对我们最喜欢的ES5和ES6进行标准化的人)。

Dart, when used in web applications, is transpiled to JavaScript so it runs on all web browsers. The Dart installation comes with a VM as well to run the .dart files from a command-line interface. The Dart files used in Flutter apps are compiled and packaged into a binary file (.apk or .ipa) and uploaded to app stores.

Dart在Web应用程序中使用时，会被转换为JavaScript，因此可以在所有Web浏览器上运行。 Dart安装还随附VM，以从命令行界面运行.dart文件。 Flutter应用程序中使用的Dart文件被编译并打包为二进制文件(.apk或.ipa)，然后上传到应用程序商店。

Dart中的编码是什么样的？ (What does coding in Dart look like?)

Like most ALGOL languages (like C# or Java):

像大多数ALGOL语言(例如C＃或Java)一样：

1. The entry point of a Dart class is the main() method. This method acts as a starting point for Flutter apps as well.

   Dart类的入口点是main()方法。 此方法也是Flutter应用程序的起点。

2. The default value of most data types is null.

   大多数数据类型的默认值为null 。

3. Dart classes only support single inheritance. There can be only one superclass for a particular class but it can have many implementations of Interfaces.
   Dart类仅支持单一继承。 特定类只能有一个超类，但是它可以具有许多Interfaces实现。
4. The flow control of certain statements, like if conditions, loops (for, while and do-while), switch-case, break and continue statements are the same.
   某些语句的流控制，例如条件，循环(for，while和do-while)，case-case，break和Continue语句是相同的。
5. Abstraction works in a similar manner, allowing abstract classes and interfaces.
   抽象以相似的方式工作，允许抽象类和接口。

Unlike them (and sometimes a bit like JavaScript):

与它们不同(有时有点像JavaScript)：

1. Dart has type inference. The data type of a variable need not be explicitly declared, as Dart will “infer ”what it is. In Java, a variable needs to have its type explicitly given during declaration. For example, String something;. But in Dart, the keyword is used instead like so, var something;. The code treats the variable according to whatever it contains, be it a number, string, bool or object.

   Dart具有类型推断。 变量的数据类型不需要明确声明，因为Dart会“推断”它是什么。 在Java中，变量需要在声明期间明确给出其类型。 例如，将String something; 。 但是在Dart中，像这样使用关键字来代替var something; 。 代码根据变量包含的内容(数字，字符串，布尔值或对象)来对待变量。

2. All data types are objects, including numbers. So, if left uninitialized, their default value is not a 0 but is instead null.
   所有数据类型都是对象，包括数字。 因此，如果不进行初始化，则其默认值不是0，而是空值。
3. A return type of a method is not required in the method signature.
   方法签名中不需要方法的返回类型。

4. The type num declares any numeric element, both real and integer.

   num类型声明任何数字元素，包括实数和整数。

5. The super() method call is only at the end of a subclass’s constructor.

   super()方法调用仅在子类的构造函数的末尾。

6. The keyword new used before the constructor for object creation is optional.

   在创建对象的构造函数之前使用的关键字new是可选的。

7. Method signatures can include a default value to the parameters passed. So, if one is not included in the method call, the method uses the default values instead.
   方法签名可以包括所传递参数的默认值。 因此，如果方法调用中未包括一个，则该方法将使用默认值。
8. It has a new inbuilt data type called Runes, that deal with UTF-32 code points in a string. For a simple example, see emojis and similar icons.
   它具有一个称为Runes的新的内置数据类型，该数据类型处理字符串中的UTF-32代码点。 有关简单的示例，请参见表情符号和类似图标。

And all these differences are just a few in the many that you can find in the Dart Language tour, which you can check out here.

所有这些差异只是Dart Language导览中可以找到的众多差异中的一部分，您可以在此处查看 。

Dart also has inbuilt libraries installed in the Dart SDK, the most commonly used being:

Dart在Dart SDK中还安装了内置库，最常用的是：

1. dart:core for core functionality; it is imported in all dart files.
   dart：core用于核心功能； 它已导入所有dart文件中。
2. dart:async for asynchronous programming.
   dart：async用于异步编程。
3. dart:math for mathematical functions and constants.
   dart：math用于数学函数和常量。
4. dart:convert for converting between different data representations, like JSON to UTF-8.
   dart：convert可在不同的数据表示形式(例如JSON到UTF-8)之间进行转换。

You can find more information on Dart libraries here.

您可以在此处找到有关Dart库的更多信息。

在Flutter中使用Dart (Using Dart in Flutter)

Flutter has more app-specific libraries, more often on user interface elements like:

Flutter具有更多特定于应用程序的库，而更多地出现在用户界面元素上，例如：

1. Widget: common app elements, like the Text or ListView.
   窗口小部件：常见的应用程序元素，例如Text或ListView。
2. Material: containing elements following Material design, like FloatingActionButton.
   材料：包含遵循材料设计的元素，例如FloatingActionButton。
3. Cupertino: containing elements following current iOS designs, like CupertinoButton.
   Cupertino：包含遵循当前iOS设计的元素，例如CupertinoButton。

You can find Flutter specific libraries here.

您可以在这里找到Flutter特定的库。

设置颤振 (Setting up Flutter)

So, to get this thing into gear, follow the Flutter docs. It gives details on installing the Flutter SDK and setting up your preferred IDE; mine would be VS code. Setting up VS code with the Flutter extension is helpful. It comes with inbuilt commands, as opposed to using the terminal.

因此， 要使此工具投入使用，请遵循Flutter文档。 它提供了有关安装Flutter SDK和设置首选IDE的详细信息。 我的将是VS代码。 使用Flutter扩展程序设置VS代码很有帮助。 它带有内置命令，而不是使用终端。

Follow the docs again to create your first app. In my case, run the extension command Flutter: New Project. Afterward, type the project name and pick the destination folder.

再次按照文档创建您的第一个应用程序。 就我而言，运行扩展命令Flutter：New Project。 然后，键入项目名称并选择目标文件夹。

If you prefer using the terminal, move to the destination folder of the app. Then use the command flutter create <app_name> to create the app folder. This generates the entire app folder, including the Android and iOS project folder. To open these folders, use Android Studio and XCode, for building the app.

如果您更喜欢使用终端，请移至应用程序的目标文件夹。 然后使用flutter create <app_na me>命令创建应用程序文件夹。 这将生成整个应用程序文件夹，包括Android和iOS项目文件夹。 要打开这些文件夹，请使用Android Studio和XCode来构建应用程序。

In the root of the project, you find pubspec.yaml. This file contains the app's dependencies. This includes both external libraries/modules and assets like images and config files. It works like a package.json, containing all external modules of the app. To install these packages, enter the package name and version under the dependencies: section of the pubspec.yaml. Run the command flutter packages get. Include the assets of the app inside the flutter: section of the same file.

在项目的根目录中，找到pubspec.yaml 。 该文件包含应用程序的依赖项。 这包括外部库/模块和资产，例如图像和配置文件。 它的工作方式类似于package.json ，其中包含应用程序的所有外部模块。 要安装这些软件包，请在pubspec.yaml的dependencies:部分下输入软件包名称和版本。 运行命令flutter packages get 。 将应用程序的资产包括在同一文件的flutter:部分中。

The entry point of the app is main.dart, found inside the lib folder. This folder also contains all Dart classes (app pages or reusable components). On creation of the app, the main.dart file comes with a simple pre-written code. Before running this code, a device is either connected to the PC, with USB debugging enabled. Afterward, run the command flutter run on the terminal.

该应用程序的入口是main.dart ，位于lib文件夹中。 此文件夹还包含所有Dart类(应用程序页面或可重用组件)。 创建应用程序时， main.dart文件附带一个简单的预编写代码。 在运行此代码之前，设备已连接到PC，并且已启用USB调试。 然后，在终端上运行命令flutter run。

初步了解Flutter应用 (A First Look at the Flutter App)

The app currently looks like this now:

该应用程序当前如下所示：

Building the user interface of a Flutter app makes use of Widgets.

构建Flutter应用程序的用户界面将使用小部件。

Widgets work in a similar way to React. A widget uses different components to describe what the UI should look like. They can be either Stateful or Stateless. In Stateful components, the widget rebuilds due to state changes, to accommodate the new state.

小部件的工作方式与React类似。 小部件使用不同的组件来描述UI的外观。 它们可以是有状态的或无状态的。 在有状态组件中，小部件会因状态更改而重建，以适应新状态。

When we look at the current code for the Home page, we see that it’s a Stateful page. If the counter variable increases, the framework tries to find the least expensive way to re-render the page. In this case, find the minimal difference between the current widget description and the future one. It takes into account the changed state.

当我们查看主页的当前代码时，我们看到它是一个有状态页面。 如果counter变量增加，则框架会尝试寻找最便宜的方式来重新呈现页面。 在这种情况下，找到当前小部件描述和将来的小部件描述之间的最小差异。 它考虑了已更改的状态。

The Scaffold class is a material design layout structure and is the main container for the Home page. The AppBar, also a material design element is the title bar found at the top of the page. All other components, like the floating button and two text tags, fall under the body of the page. The Center class is a layout class that centers its child components vertically and horizontally.

Scaffold类是一种材料设计布局结构，并且是主页的主要容器。 AppBar也是一种材料设计元素，是页面顶部的标题栏。 所有其他组件(例如浮动按钮和两个文本标签)都属于页面的主体。 Center类是一个布局类，它将其子组件垂直和水平居中。

The Column class, another layout widget, lists each child element vertically. Each of its child elements is added to an array and put underneath the children: section.

Column类是另一个布局小部件，它垂直列出每个子元素。 它的每个子元素都添加到数组中，并放在children：节的下面。

The two texts speak for themselves. The first displays the text ‘You have pushed.’ The second one displays the current value in the _counter variable.

这两个文本不言自明。 第一个显示文本“您已推送”。 第二个在_counter变量中显示当前值。

The FloatingActionButton is part of the Material design widgets. It displays a + icon and triggers the increment of the _counter variable.

FloatingActionButton是“材质”设计小部件的一部分。 它显示一个+图标，并触发_counter变量的增量。

热装 (Hot Reloading)

Another plus point of using Flutter is the hot reloading feature. It lets you see changes made to the code in real time, without restarting the build process. Type ‘r’ on the same console that you ran the flutter run command.

使用Flutter的另一个好处是热重装功能。 它使您可以实时查看对代码所做的更改，而无需重新启动构建过程。 在运行flutter run命令的同一控制台上键入“ r”。

更改当前代码 (Altering the current code)

As we can see, when you click the button, the _counter variable value increases. This re-renders the page and the new value is displayed on the body of the page.

如我们所见，单击按钮时，_counter变量值增加。 这将重新呈现页面，并且新值将显示在页面主体上。

I’m going to change that up a bit. For every button click, we will display a custom Card component with the item number.

我要稍微改变一下。 对于每次单击按钮，我们将显示带有项目编号的自定义Card组件。

创建自定义卡组件 (Creating the Custom Card Component)

So, to start off, we make a new .dart file inside the lib folder. I created mine in a subfolder commonComponents and named it customCard.dart.

因此，首先，我们在lib文件夹中创建一个新的.dart文件。 我在子文件夹commonComponents创建了我的文件夹，并将其命名为customCard.dart 。

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {  CustomCard({@required this.index});
	final index;
    
    @override  
    Widget build(BuildContext context) {    
    	return Card(      
        	child: Column(        
            	children: <Widget>[Text('Card $index')],      
            )    
        );  
    }
}

This component will be a stateless widget and will only display the value that we send to it, in the Text widget.

该组件将是一个无状态窗口小部件，并且仅在“文本”窗口小部件中显示我们发送给它的值。

显示自定义卡列表 (Displaying a List of Custom Cards)

Import the above component to the main.dart like so:

将上述组件导入到main.dart如下所示：

import 'commonComponents/customCard.dart';

I then replace the code of the home page body, from the one above to this:

然后，从上面的代码替换到此代码：

body: Center(  
	child: Container(    
    	child: ListView.builder(      
        	itemCount: _counter,      
            itemBuilder: (context, int index) {        
            	return CustomCard(          
                	index: ++index,        
                );      
            },    
        )  
    ),
),

It now displays a List of CustomCard elements, up to the number of times the button is clicked. The itemCount is used to define the number of elements the ListView must display. The itemBuilder returns the actual item that is displayed.

现在，它显示一个CustomCard元素列表，最多单击该按钮的次数。 itemCount用于定义ListView必须显示的元素数。 itemBuilder返回显示的实际项目。

And that’s a simple example of using Flutter.

这是使用Flutter的简单示例。

结论… (In conclusion…)

Before my interest turned to JavaScript, I worked with Java. If I had encountered Dart around that time, I might have been able to understand it easier than I did now. All in all, It wasn’t too difficult but took a bit of time to get the hang of it. I could see myself using it in time.

在我对JavaScript感兴趣之前，我就使用Java。 如果我在那段时间遇到了Dart，那么我可能比现在更容易理解它。 总而言之，这并不是很困难，但是花了一些时间来掌握它。 我可以看到自己及时使用它。

Find the code repo, here.

在此处找到代码仓库。

Find the commit for this post, here.

在此处找到此帖子的提交。

翻译自: https://www.freecodecamp.org/news/https-medium-com-rahman-sameeha-whats-flutter-an-intro-to-dart-6fc42ba7c4a3/

flutter dart