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

介绍

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

注意： Flutter 应用程序是使用 Dart 编程语言构建的。如果您是 Dart 新手，您可能希望首先了解该语言的总体概述。

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

先决条件

要完成本教程，您需要：

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

    • Flutter和Dart为 Android Studio 安装的插件。
    • Flutter 为 Visual Studio Code 安装的扩展。

本文最初使用 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：

在 Visual Studio Code 中运行应用程序的屏幕截图。

然后，从下拉列表中选择Dart & Flutter，然后选择hello_flutter配置。在状态栏中指定模拟器（Web、iOS 或 Android）。然后按开始调试（类似于“播放按钮”）运行应用程序。

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

iOS 模拟器中应用程序的屏幕截图。

Android Studio 将要求您指定一个设备并选择一个配置。

第 3 步 – 探索代码

你已经创建了你的第一个 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 样式小部件和功能的原因。

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

在 内部MyApp，我们返回一个build类型的方法，Widget该方法返回一个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，这个render和 JSX的方法类似。

在上面的例子中需要考虑的更重要的事情之一是我们正在覆盖该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()。接下来，我们定义为包含 an和 a 的应用程序build创建 a的方法。ScaffoldappBarbody

的Scaffold类可以使用时被认为是一个顶层容器MaterialApp。这使我们可以轻松添加导航栏、浮动操作按钮、抽屉、避免缺口等等。

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

结论

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

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

通过查看我们的 Flutter 主题页面了解练习和编程项目，继续您的学习。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁