flutter dart
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来指责它了。
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),然后上传到应用程序商店。
Like most ALGOL languages (like C# or Java):
像大多数ALGOL语言(例如C#或Java)一样:
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应用程序的起点。
The default value of most data types is null
.
大多数数据类型的默认值为null
。
Unlike them (and sometimes a bit like JavaScript):
与它们不同(有时有点像JavaScript):
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;
。 代码根据变量包含的内容(数字,字符串,布尔值或对象)来对待变量。
The type num
declares any numeric element, both real and integer.
num
类型声明任何数字元素,包括实数和整数。
The super()
method call is only at the end of a subclass’s constructor.
super()
方法调用仅在子类的构造函数的末尾。
The keyword new
used before the constructor for object creation is optional.
在创建对象的构造函数之前使用的关键字new
是可选的。
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中还安装了内置库,最常用的是:
You can find more information on Dart libraries here.
您可以在此处找到有关Dart库的更多信息。
Flutter has more app-specific libraries, more often on user interface elements like:
Flutter具有更多特定于应用程序的库,而更多地出现在用户界面元素上,例如:
You can find Flutter specific libraries here.
您可以在这里找到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_na
me> 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。
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
变量的增量。
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”。
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组件。
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.
该组件将是一个无状态窗口小部件,并且仅在“文本”窗口小部件中显示我们发送给它的值。
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的简单示例。
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.
在此处找到此帖子的提交。
flutter dart