如何开始使用您的第一个Flutter应用程序

介绍

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

注意： Flutter 应用是使用 Dart 编程语言构建的。如果您是 Dart 的新手，您可能希望首先获得该语言的一般概述。

在本文中，您将创建您的第一个 Flutter 应用程序并探索生成的代码。

先决条件

要完成本教程，您需要：

下载并安装 Flutter。
下载并安装Android Studio 或 Visual Studio Code。 Android Studio 提供了一个集成的、功能丰富的 IDE，并支持 Flutter。 Visual Studio Code 提供更轻量级但功能更强大的支持。
建议为您的代码编辑器安装插件：为 Android Studio 安装了 Flutter 和 Dart 插件。为 Visual Studio Code 安装了 Flutter 扩展。

本文最初使用 Flutter 1.2.x 编写。它已更新为支持 Flutter 1.22.2。

第 1 步——创建一个新的 Flutter 项目

一旦你安装了 Flutter 并安装了适当的依赖项（Android SDK 或 XCode，取决于你的机器），你现在可以创建一个新的 Flutter 项目。

首先，打开终端窗口，导航到要启动项目的目录，然后运行以下命令：

flutter create hello_flutter

接下来，切换到项目目录：

cd hello_flutter

然后，使用您选择的代码编辑器打开此项目。

第 2 步——启动项目

请参阅在 Visual Studio Code 或 Android Studio 中运行代码的文档。

例如，使用 Visual Studio Code，打开 Run and Debug：

然后，选择飞镖和颤振从下拉列表中，然后选择hello_flutter配置。在状态栏中指定模拟器（Web、iOS 或 Android）。然后按 Start Debugging（类似于“播放按钮”）运行应用程序。

然后，您将在模拟器或浏览器中观察演示应用程序：

Android Studio 将要求您指定 Device 并选择配置。

第三步——探索代码

你已经创建了你的第一个 Flutter 应用程序！并在模拟器中运行它！在本节中，您将阅读一些代码。

注意： flutter 生成的起始代码是 Flutter 官方代码库的一部分，可在以下许可证下使用。

现在，在您的代码编辑器中打开 lib/main.dart。

`MyApp`

文件的第一部分定义 MyApp。此类扩展 StatelessWidget：

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'),
    );
  }
}

// ...

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

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

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

注意： 这里我们不必使用 MaterialApp，我们也可以使用 iOS 风格的 CupertinoApp 或带有 WidgetsApp 的自定义样式.

`MyHomePage`

文件的下一部分定义 MyHomePage。此类扩展 StatefulWidget：

lib/main.dart

// ...

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

  final String title;

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

// ...

该文件的最后一部分定义了 _MyHomePageState。此类扩展了该小部件的 State 和 build 方法。如果你以前使用过 React，这类似于 JSX 的 render 方法。

在上面的例子中要考虑的更重要的事情之一是我们重写了 createState 方法来提供我们自己的状态管理方式：

lib/main.dart

// ...

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.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

因此，_counter 状态可以通过 setState() 进行更改。接下来，我们定义 build 方法，它为我们的应用程序创建一个 Scaffold，其中包含一个 appBar 和一个 body。

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

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

结论

在本文中，您创建了第一个 Flutter 应用程序并探索了生成的代码。

借此机会试验应用程序并更改计数器和文本的值。

继续学习，请查看我们的 Flutter 主题页面以获取练习和编程项目。