Google Flutter From Scratch：使用小部件构建应用程序

flutter正迅速成为开发跨平台移动应用程序最流行的框架之一。如今，大多数 android 和ios开发人员开始同意，它是比其他跨平台框架（如 react Native 和 nativescript）更快、更面向未来的替代方案。

谷歌本身正在不遗余力地吸引更多的开发者加入它。例如，今年的 Google I/O 举办了几次深入的会议，重点关注使用它开发符合 Material Design 的应用程序。在其中一次会议上，Google 还宣布Flutter将成为 Material Design 的一流平台。

在本系列教程中，我将帮助您掌握使用 Flutter 开发 Android 应用程序的基础知识。在本系列教程的开头，我将重点关注 Flutter 小部件，它是所有 Flutter 应用程序的构建块。

先决条件

要充分利用本系列，您需要：

• 最新版本的Android Studio

• 运行 Android api级别 21 或更高版本的设备或模拟器

1.配置Android Studio

安装几个轻量级插件后，就可以使用开发者最习惯的IDE原生Android应用Android Studio来开发Flutter应用了。

首先启动 Android Studio 并 在欢迎屏幕中选择配置 > 插件选项。

在弹出的对话框中，按下Browse Repositories 按钮并搜索 Flutter 插件。

找到插件后，按其安装 按钮。此时，系统会询问您是否也要安装 Dart 插件。按是 继续。

两个插件都安装好后，按下rest art Android Studio 按钮完成配置。

2.创建一个新项目

重启后，您将能够在 Android Studio 欢迎屏幕上看到Start a new Flutter project 按钮。按下它开始创建你的第一个 Flutter 项目。

在下一个屏幕上，选择Flutter Application 选项并按Next。

您现在将看到一个表单，询问有关您的 Flutter 应用程序的各种详细信息，例如它的名称和位置。确保在所有字段中键入有效值。

Flutter 插件不与 Flutter SDK 捆绑在一起。因此，您必须单独安装 SDK。您现在可以按Install SDK 按钮来执行此操作。

根据您的 Internet 连接速度，安装可能需要相当长的时间才能完成。成功后，您将能够按下一步 按钮完成项目设置。

3.添加入口点

在本教程中，您将在lib/main.dart 文件中编写代码。默认情况下，它将包含一些您不需要的示例代码。因此，在继续之前删除其所有内容。

Flutter 框架使用Dart编程语言，这是一种易于学习的语言，其语法与 java 和 C 非常相似。因此，与大多数独立的 Java 和 C 程序一样，Flutter 应用程序也需要一个main() 函数，一个特殊的函数作为应用程序的入口点。

因此，将以下代码添加到main.dart 文件：

void main() {
    // TO DO
}

此时，您可以按 Shift-F10 来构建和运行应用程序。如果您在前面的步骤中没有遇到任何错误，您应该会看到应用程序在您的设备上显示一个空白的白色画布。

4.使用无状态小部件

所有 Flutter 应用程序都由一个或多个小部件组成，这些小部件是允许您在屏幕上绘制文本和图像的类的实例。通常，您不必从头开始编写任何低级小部件，因为该框架带有各种预制的、漂亮的小部件，它们符合 Android 和 ios 平台的设计语言。

为了能够在您的应用程序中使用基本小部件，请通过在main.dart 文件widgets 的开头添加以下代码来导入库：

import 'package:flutter/widgets.dart';

您可以创建的最简单的小部件是无状态小部件。正如您可能已经猜到的那样，它们没有与之关联的状态，因此是静态的。它们非常适合显示标签、标题和其他在应用程序运行时内容不太可能发生变化的 UI 元素。要创建无状态小部件，您必须扩展StatelessWidget 该类并覆盖其build() 方法。以下示例代码向您展示了如何：

class MyFirstWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // More code here
  }
}

正如您在上面的代码中看到的，该build() 方法必须返回一个Widget 对象。您可以自由选择和返回 Flutter 提供的数十个预制小部件中的任何一个。例如，如果要显示一行文本，可以创建并返回一个Text 小部件，如下所示：

return Text("This is nice!",
        textDirection: TextDirection.ltr);

请注意，您必须始终记住在使用 Text 小部件时指定文本的方向。

但是，如果您立即运行该应用程序，您将无法看到文本。那是因为你还没有实例化你的无状态小部件。所以转到main() 方法，实例化其中的小部件，并将其传递给runApp() 方法。就是这样：

runApp(new MyFirstWidget());

在您添加上述代码并保存项目的那一刻，Android Studio 应该会自动在您的设备上热重新加载应用程序，让您可以看到文本。

如果您想显示图像而不是文本，您可以简单地将Text 小部件替换为Image 类build() 方法中的小部件。以下代码向您展示了如何创建一个Image 下载并显示远程图像的小部件：

return Image.network(
    "https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");

再次保存项目时，您应该会在设备上看到如下内容：

5.创建小部件树

所有 Flutter 应用程序都可以被视为小部件树。您在上一步中创建的应用程序是一个只有一个小部件的小部件树。但是，使用Text orImage 小部件作为小部件树的顶部元素并不是一个好主意，因为您将无法向它们添加任何子小部件。

Flutter 提供了几个小部件，它们可以充当其他小部件的容器。最常用的是Row 和Column 小部件。正如他们的名字所暗示的那样， Row 小部件允许您将多个小部件并排放置， Column 小部件可帮助您将小部件放置在另一个下方。在创建更深的小部件树时，它们是必不可少的。

以下代码向您展示了如何使用Column 小部件来创建具有两个子级的小部件树：一个Text 小部件和一个Image 小部件。

Text myText = Text("This is a nice photo!",
    textDirection: TextDirection.ltr);

Image myImage = Image.network(
    "https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");

return Column(
  children: <Widget>[myText, myImage]
);

该应用程序现在应该如下所示：

此外，还有一些小部件可以帮助您更好地定位单个小部件。例如，Center 小部件可帮助您将小部件居中。同样，Container 小部件允许您为小部件添加填充和边距。

以下代码向您展示了如何Column通过将刚刚创建的小部件嵌入到小部件中来使其居中Center：

return Center(child: Column(
    children: <Widget>[myText, myImage],
    mainAxisSize: MainAxisSize.min
  )
);

在上面的代码中，请注意Column 小部件使用了一个名为 的附加属性 mainAxisSize，其值设置为min。这是必要的，因为在使列居中之前，您必须使其高度等于其所有子项的高度之和。如果没有该属性，Column 小部件将与设备的屏幕一样大，Center 小部件对其没有任何影响。

6.使用 Material Design 小部件

一直以来，您一直在使用作为widgets 库一部分的基本小部件。Flutter 有一个名为 的替代库material，它提供了 Material Design 小部件。要在您的应用程序中使用它，请将导入widgets 库的语句替换为以下内容：

import 'package:flutter/material.dart';

接下来，要将 Material Design 样式应用于您的小部件，您必须在 MaterialApp 小部件树的顶部有一个小部件。您还必须将之前创建的所有小部件嵌入到小Scaffold 部件中，该小部件可以用作小部件的主屏幕 MaterialApp 。

此外，由于大多数 Material Design 应用程序都有一个应用程序栏，您可以选择将Scaffold 小部件的appBar 属性设置为新AppBar 小部件。

以下代码向您展示了如何简洁地完成所有这些操作：

return MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("My App")),
        body: Center(
          child: Column(
            children: <Widget>[myText, myImage],
            mainAxisSize: MainAxisSize.min
          ),
        )
    )
);

该应用程序现在应该看起来好多了。

7.使用有状态的小部件

无状态小部件是不可变的。使用您在前面步骤中编写的代码，没有简单的方法可以修改Text 小部件或Image 小部件的内容。为什么？因为 Flutter 框架更喜欢响应式编程而不是命令式编程。因此，它的大多数小部件都没有可以在运行时更新其内容的 setter 方法。例如，Text 小部件没有setText() 允许您更改其显示的文本的方法。

另一方面，有状态的小部件是可变的，尽管不是直接的。他们依靠 State 对象来决定在任何给定实例中应该显示什么。因此，每当State 对象发生变化时，框架都会自动更新与其连接的任何有状态小部件的内容。

要创建有状态小部件，您必须扩展StatefulWidget 该类并覆盖其 createState() 方法。

class MySecondWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TO DO
  }
}

接下来，您必须创建一个新的自定义State 类，其中包含形成有状态小部件状态的变量。此外，在类内部，您必须重写该 build() 方法以返回您的小部件树。

以下代码向您展示了如何创建一个State 包含名为 的单个变量的类url：

class MyState extends State<MySecondWidget> {

  String url = "https://source.unsplash.com/random/800x600";
              // A random image from Unsplash

  @override
  Widget build(BuildContext context) {
    // More code here
  }
}

为了一个具体的例子，现在让我们创建一个 Material Design 小部件树Image ，其中包含一个显示随机图像的RaisedButton 小部件和一个用户可以按下以加载新的随机图像的小部件。以下代码向您展示了如何：

return MaterialApp(
  home: Scaffold(
    body: Center(
      child:Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          RaisedButton(
            child: Text("Press Me"),
            onPressed: changeURL,
          ),
          Image.network(url)
        ]
      )
    )
  )
);

请注意，Image 小部件的构造函数现在将url 变量作为其输入，而不是字符串文字。这允许框架在Image 绘制小部件时使用变量的最新值。

另请注意，RaisedButton 小部件有一个onPressed 属性指向名为 的事件***器changeURL()。该方法尚不存在，因此请创建它。

void changeURL() {
    // More code here
}

当然，在方法内部，您必须更改url 变量的值。但是，您不应该直接更改它。如果这样做，Flutter 框架将不会收到更改通知。要正确更新有状态小部件的状态，您必须始终在方法内进行所有更改setState() 。

目前，要显示随机图像，我建议您使用Unsplash Source 服务。从中下载随机图像所需要做的就是向其 URL 发出 HTTP 请求并将唯一的查询字符串传递给它。

以下代码向您展示了如何使用时间戳来构造唯一查询字符串：

setState(() {
  url = "https://source.unsplash.com/random/800x600/?" +
      "q=${new DateTime.now().millisecondsSinceEpoch}";
});

至此，您的自定义State 类已准备就绪。接下来您需要做的就是实例化它并从createState() 有状态小部件的方法中返回它。

return MyState();

如果您将有状态小部件的实例传递给该runApp()方法，重新加载应用程序，然后按几次按钮，您应该会看到它每次都显示一张新照片。

结论

您现在知道如何在 Flutter 应用程序中使用无状态和有状态小部件。您还学习了如何将 Material Design 主题应用于它们，动态更改它们的内容，并使它们具有交互性。

值得注意的是，Flutter 不使用任何移动平台的原生小部件。它使用称为 Skia 的高性能 2D 图形引擎自己绘制所有小部件，该引擎广泛使用 GPU。因此，Flutter 应用程序通常以接近 60 fps 的速度运行，并且感觉非常流畅且响应迅速。