flutter hello_您的第一个Flutter应用：Hello World

flutter hello

Flutter is a new Open Source framework created by Google that focuses on the creation of cross platform applications. Flutter primarily targets iOS and Android, but is increasingly adding support for desktop platforms too.

Flutter是Google创建的一个新的开源框架，专注于跨平台应用程序的创建。 Flutter主要针对iOS和Android，但也越来越多地支持桌面平台。

In this article, we’re going to investigate Flutter and create our first application.

在本文中，我们将研究Flutter，并创建我们的第一个应用程序。

Flutter apps are built using the Dart programming language. If you’re new to Dart, you may want to start by getting a general overview of the language first.

Flutter应用是使用Dart编程语言构建的。 如果您是Dart的新手，则可能首先要先获得该语言的概述 。

安装Flutter (Installing Flutter)

We can install Flutter on our machine in a variety of ways. The easiest way to get started is to download the installer from the Flutter website.

我们可以通过多种方式在计算机上安装Flutter。 最简单的入门方法是从Flutter网站下载安装程序。

Here’s the setup instructions for:

以下是安装说明：

• macOS

  苹果系统

• Windows

  视窗

• Linux

  的Linux

This article has been written using Flutter 1.2.x.

本文是使用Flutter 1.2.x编写的。

外挂程式 (Plugins)

I’d recommend that you either use Android Studio / IntelliJ or Visual Studio Code for your Flutter development. Android Studio offers an integrated, feature-rich IDE with support for Flutter, whereas VSCode offers more lightweight, but functional support.

我建议您在Flutter开发中使用Android Studio / IntelliJ或Visual Studio Code。 Android Studio提供了一个集成的，功能丰富的IDE，支持Flutter，而VSCode提供了更轻巧但功能强大的支持。

Android Studio (Android Studio)

To install the Flutter plugin for Android Studio, open up the plugin preferences using Preferences > Plugins (macOS) or File > Settings > Plugins (Windows/Linux). From there, search for the Flutter plugin within the repository list and hit install.

要安装适用于Android Studio的Flutter插件，请使用“偏好设置”>“插件(macOS)”或“文件”>“设置”>“插件”(Windows / Linux)打开插件偏好设置。 从那里，在存储库列表中搜索Flutter插件，然后点击安装。

You can find the plugin here.

您可以在此处找到插件 。

---

---

Visual Studio程式码 (Visual Studio Code)

To install the Flutter plugin for Visual Studio Code, search the store for “Flutter” or click Install from the following page.

要为Visual Studio Code安装Flutter插件，请在商店中搜索“ Flutter”，或从下一页单击Install。

创建一个新的Flutter项目 (Creating a new Flutter project)

Assuming that you’ve installed Flutter and have the appropriate dependencies (Android Studio/XCode) installed, we can go ahead and create a new Flutter project.

假设您已经安装Flutter并安装了适当的依赖项(Android Studio / XCode)，我们可以继续创建一个新的Flutter项目。

Once again, this can be done in numerous ways, but I find the easiest ways are to do it via the Terminal or VS Code. Let’s use the terminal in this circumstance:

再一次，这可以通过多种方式来完成，但是我发现最简单的方法是通过终端或VS代码来完成。 在这种情况下，让我们使用终端：

$ flutter create hello_flutter
$ cd hello_flutter
$ code .

启动项目 (Launching the project)

As anticipated, this will go ahead and create a new Flutter project for us and open it up inside of Visual Studio Code. We can then open this using the Flutter plugin for VS Code.

如预期的那样，将继续为我们创建一个新的Flutter项目，并在Visual Studio Code中打开它。 然后我们可以使用Flutter VS Code插件打开它。

Hit the “Debug” section of the editor and click “Play” to add a new configuration.

点击编辑器的“调试”部分，然后单击“播放”以添加新配置。

Select “Dart & Flutter” from the dropdown and then choose the editor you’d like to use. I’ve selected the iOS Simulator for this. We should then see our demo application:

从下拉菜单中选择“ Dart＆Flutter”，然后选择您要使用的编辑器。 我为此选择了iOS模拟器。 然后，我们应该看到我们的演示应用程序：

材料 (Material)

We’ve created our first Flutter application and we have it running on an emulator. Let’s take a look at the code that makes this all work. Head to lib/main.dart and you should see the following starter code:

我们创建了第一个Flutter应用程序，并使其在模拟器上运行。 让我们看一下使所有这些工作正常工作的代码。 转到lib/main.dart ，您应该看到以下启动代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

The above code snippet is part of the official Flutter codebase, and available under the following license.

上面的代码段是Flutter官方代码库的一部分，并且可以通过以下许可获得 。

---

---

This may seem a little intimidating at first. There’s lots going on. Let’s start with the MyApp widget:

起初，这似乎有些令人生畏。 有很多事情发生。 让我们从MyApp小部件开始：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MyApp (MyApp)

We’re firstly importing the Material package from Flutter. This is what gives our application the Material Design look and subsequent access to Material style widgets and functionality.

我们首先要从Flutter导入Material包 。 这就是使我们的应用程序具有Material Design外观以及随后访问Material样式小部件和功能的原因。

Then, we’re registering the MyApp widget as the main widget for our application using the runApp method.

然后，我们使用runApp方法将MyApp小部件注册为应用程序的主要小部件。

Inside of MyApp, we’re returning a build method of type Widget which returns a MaterialApp. The MaterialApp holds metadata such as current ThemeData, the application title, the current home route, and so on.

在MyApp内部，我们将返回Widget类型的build方法，该方法将返回MaterialApp 。 MaterialApp包含元数据，例如当前的ThemeData ，应用程序title ，当前的home路线等。

We don’t have to use MaterialApp here, we could also use the iOS styled CupertinoApp or a custom style with WidgetsApp.

我们不必在这里使用MaterialApp，也可以使用iOS风格的CupertinoApp或WidgetsApp的自定义样式。

---

---

主页 (HomePage)

Moving on to the HomePage, we can firstly start with the StatefulWidget. This is implemented with the use of two classes, firstly one that defines the widget:

转到HomePage ，我们首先可以从StatefulWidget开始。 这是通过使用两个类来实现的，首先是一个定义小部件的类：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Then, another which contains the State for that widget and the build method. If you’ve ever used React before, this is similar to the render method of JSX.

然后，另一个包含了State对于配件和 build方法。 如果您曾经使用过React，则类似于JSX的render方法。

One of the more important things to consider with the above example is the fact that we’re overriding the createState method to provide our own way of managing state:

上面的示例要考虑的更重要的事情之一是，我们正在重写createState方法以提供我们自己的状态管理方式：

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
 }
}

The _counter state can therefore be changed with setState(). Next, we define the build method which creates a Scaffold for our application that contains an appBar and a body.

因此，可以使用setState()更改_counter状态。 接下来，我们定义build方法，该方法将为包含appBar和body应用程序创建一个Scaffold 。

The Scaffold class can be thought of as a top level container when using MaterialApp. This allows us to easily add navigation bars, floating action buttons, drawers, avoid notches, and much more.

使用MaterialApp时，可以将Scaffold类视为顶级容器。 这使我们可以轻松添加导航栏，浮动操作按钮，抽屉，避免出现缺口等。

Whenever we call setState(), the widget’s build method is also called, thus, updating the view/redrawing with new state. In our example, you can see that we’re making this call to setState within the FloatingActionButton via the onPressed: _incrementCounter function.

每当我们调用setState() ，也会调用小部件的build方法，从而以新状态更新视图/重绘。 在我们的示例中，您可以看到我们正在通过onPressed: _incrementCounter函数在FloatingActionButton对setState进行调用。

摘要 (Summary)

I’d now suggest that you play around with Flutter using this example application. Change the text, do some funky things with the calculations, add a new function, go wild!

我现在建议您使用此示例应用程序来玩Flutter。 更改文本，使用计算做一些时髦的事情，添加一个新函数，变得疯狂！

Now that we’ve got our environment set up, we can start venturing further into other Flutter topics. I’d be interested in hearing what you’d like to read about!

现在我们已经建立了环境，我们可以开始进一步探索Flutter的其他主题。 我想听听您想读的内容！

翻译自: https://www.digitalocean.com/community/tutorials/flutter-your-first-flutter-app

flutter hello