面向 Android 开发者的 Flutter

本文档旨在帮助 Android 开发者将其现有的 Android 知识应用于使用 Flutter 构建移动应用。如果您了解 Android 框架的基础知识，那么您可以将本文档作为 Flutter 开发的入门指南。

在 Flutter 中构建时，您的 Android 知识和技能非常有价值，因为 Flutter 依赖于移动操作系统来实现许多功能和配置。Flutter 是一种构建移动 UI 的新方式，但它有一个插件系统可以与 Android (和 iOS) 进行非 UI 任务的通信。如果您是 Android 专家，则无需重新学习所有内容即可使用 Flutter。

本文档可以像菜谱一样使用，您可以随意跳转并查找与您的需求最相关的问题。

在 Android 中，View 是屏幕上显示的一切的基础。按钮、工具栏和输入，一切都是 View。在 Flutter 中，与 View 大致等价的是 Widget。Widget 不完全等同于 Android View，但在您熟悉 Flutter 的工作方式时，您可以将它们视为“声明和构建 UI 的方式”。

然而，这些与 View 有一些区别。首先，Widget 的生命周期不同：它们是不可变的，只有在需要更改时才存在。每当 Widget 或其状态更改时，Flutter 框架都会创建一个新的 Widget 实例树。相比之下，Android View 只绘制一次，直到调用 invalidate 才重新绘制。

Flutter 的 Widget 轻量级，部分原因是它们的不可变性。因为它们本身不是 View，也不是直接绘制任何东西，而是一种 UI 及其语义的描述，在底层被“膨胀”成实际的 View 对象。

Flutter 包含 Material Components 库。这些是实现 Material Design 指南的 Widget。Material Design 是一个灵活的设计系统，针对所有平台进行了优化，包括 iOS。

但 Flutter 足够灵活和富有表现力，可以实现任何设计语言。例如，在 iOS 上，您可以使用 Cupertino Widget 来生成类似 Apple 的 iOS 设计语言的界面。

在 Android 中，您通过直接改变视图来更新视图。然而，在 Flutter 中，Widget 是不可变的，不能直接更新，而是必须使用 Widget 的状态。

这就是 Stateful 和 Stateless Widget 概念的来源。StatelessWidget 顾名思义，是一个没有状态信息的 Widget。

当您描述的用户界面部分除了对象中的配置信息之外不依赖于任何其他内容时，StatelessWidget 非常有用。

例如，在 Android 中，这类似于放置带有您徽标的 ImageView。徽标在运行时不会改变，因此在 Flutter 中使用 StatelessWidget。

如果您想根据 HTTP 调用或用户交互后收到的数据动态更改 UI，那么您必须使用 StatefulWidget 并告诉 Flutter 框架 Widget 的 State 已更新，以便它可以更新该 Widget。

这里需要注意的重要一点是，无状态和有状态小部件的核心行为相同。它们每帧都会重建，不同之处在于 StatefulWidget 有一个 State 对象，它在帧之间存储状态数据并恢复它。

如果您有疑问，请始终记住这条规则：如果小部件发生变化（例如，由于用户交互），则它是有状态的。但是，如果小部件对变化做出反应，那么如果它本身不响应变化，则包含它的父小部件仍然可以是无状态的。

以下示例展示了如何使用 StatelessWidget。一个常见的 StatelessWidget 是 Text 小部件。如果您查看 Text 小部件的实现，您会发现它继承自 StatelessWidget。

dartText(
  'I like Flutter!',
  style: TextStyle(fontWeight: FontWeight.bold),
);

如您所见，Text 小部件没有任何与之关联的状态信息，它只渲染在其构造函数中传递的内容，别无其他。

但是，如果您想让“我喜欢 Flutter”动态变化，例如在点击 FloatingActionButton 时呢？

要实现这一点，将 Text 小部件包装在一个 StatefulWidget 中，并在用户单击按钮时更新它。

例如

dartimport 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default placeholder text.
  String textToShow = 'I Like Flutter';

  void _updateText() {
    setState(() {
      // Update the text.
      textToShow = 'Flutter is Awesome!';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(child: Text(textToShow)),
      floatingActionButton: FloatingActionButton(
        onPressed: _updateText,
        tooltip: 'Update Text',
        child: const Icon(Icons.update),
      ),
    );
  }
}

在 Android 中，您用 XML 编写布局，但在 Flutter 中，您用小部件树编写布局。

以下示例展示了如何显示一个带填充的简单 Widget

dart@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Sample App')),
    body: Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.only(left: 20, right: 30),
        ),
        onPressed: () {},
        child: const Text('Hello'),
      ),
    ),
  );
}

您可以在小部件目录中查看 Flutter 提供的一些布局。

在 Android 中，您在父视图上调用 addChild() 或 removeChild() 来动态添加或移除子视图。在 Flutter 中，由于小部件是不可变的，因此没有直接等同于 addChild() 的方法。相反，您可以向父视图传递一个返回小部件的函数，并使用布尔标志控制该子视图的创建。

例如，下面是如何在单击 FloatingActionButton 时在两个小部件之间切换

dartimport 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  // Default value for toggle.
  bool toggle = true;
  void _toggle() {
    setState(() {
      toggle = !toggle;
    });
  }

  Widget _getToggleChild() {
    if (toggle) {
      return const Text('Toggle One');
    } else {
      return ElevatedButton(onPressed: () {}, child: const Text('Toggle Two'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(child: _getToggleChild()),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        tooltip: 'Update Text',
        child: const Icon(Icons.update),
      ),
    );
  }
}

在 Android 中，您可以使用 XML 创建动画，或者在视图上调用 animate() 方法。在 Flutter 中，可以使用动画库通过将小部件包装在动画小部件中来为小部件制作动画。

在 Flutter 中，使用 AnimationController，它是一个 Animation<double>，可以暂停、查找、停止和反转动画。它需要一个 Ticker，用于在 vsync 发生时发出信号，并在运行时在每帧上生成 0 到 1 之间的线性插值。然后创建或多个 Animation 并将它们附加到控制器。

例如，您可以使用 CurvedAnimation 实现沿插值曲线的动画。从这个意义上说，控制器是动画进度的“主”源，而 CurvedAnimation 计算替换控制器默认线性运动的曲线。与小部件一样，Flutter 中的动画通过组合工作。

在构建小部件树时，您将 Animation 分配给小部件的动画属性，例如 FadeTransition 的不透明度，并告诉控制器开始动画。

以下示例展示了如何编写一个 FadeTransition，当您按下 FloatingActionButton 时，该转换会将 Widget 淡入为徽标

dartimport 'package:flutter/material.dart';

void main() {
  runApp(const FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  const FadeAppTest({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fade Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyFadeTest(title: 'Fade Demo'),
    );
  }
}

class MyFadeTest extends StatefulWidget {
  const MyFadeTest({super.key, required this.title});

  final String title;
  @override
  State<MyFadeTest> createState() => _MyFadeTest();
}

class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin {
  late AnimationController controller;
  late CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this,
    );
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: FadeTransition(
          opacity: curve,
          child: const FlutterLogo(size: 100),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Fade',
        onPressed: () {
          controller.forward();
        },
        child: const Icon(Icons.brush),
      ),
    );
  }
}

有关更多信息，请参阅动画与动作 Widgets、动画教程和动画概述。

在 Android 中，您可以使用 Canvas 和 Drawable 在屏幕上绘制图像和形状。Flutter 也有类似的 Canvas API，因为它基于相同的低级渲染引擎 Skia。因此，在 Flutter 中绘制到画布对于 Android 开发者来说是一项非常熟悉的任务。

Flutter 有两个类可以帮助您绘制到画布：CustomPaint 和 CustomPainter，后者实现您的算法以绘制到画布。

要了解如何在 Flutter 中实现签名画家，请参阅 Collin 在自定义绘制上的回答。

dartimport 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: DemoApp()));

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) => const Scaffold(body: Signature());
}

class Signature extends StatefulWidget {
  const Signature({super.key});

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

class SignatureState extends State<Signature> {
  List<Offset?> _points = <Offset>[];
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          RenderBox? referenceBox = context.findRenderObject() as RenderBox;
          Offset localPosition = referenceBox.globalToLocal(
            details.globalPosition,
          );
          _points = List.from(_points)..add(localPosition);
        });
      },
      onPanEnd: (details) => _points.add(null),
      child: CustomPaint(
        painter: SignaturePainter(_points),
        size: Size.infinite,
      ),
    );
  }
}

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);
  final List<Offset?> points;
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null) {
        canvas.drawLine(points[i]!, points[i + 1]!, paint);
      }
    }
  }

  @override
  bool shouldRepaint(SignaturePainter oldDelegate) =>
      oldDelegate.points != points;
}

在 Android 中，您通常子类化 View，或使用预先存在的视图，以覆盖和实现方法以实现所需的行为。

在 Flutter 中，通过组合较小的小部件（而不是扩展它们）来构建自定义小部件。这有点类似于在 Android 中实现自定义 ViewGroup，其中所有构建块都已存在，但您提供不同的行为——例如，自定义布局逻辑。

例如，如何构建一个在构造函数中接受标签的 CustomButton？通过组合带标签的 ElevatedButton 来创建 CustomButton，而不是通过扩展 ElevatedButton

dartclass CustomButton extends StatelessWidget {
  final String label;

  const CustomButton(this.label, {super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: () {}, child: Text(label));
  }
}

然后像使用任何其他 Flutter Widget 一样使用 CustomButton

dart@override
Widget build(BuildContext context) {
  return const Center(child: CustomButton('Hello'));
}

在 Android 中，Intent 主要有两个用例：在 Activity 之间导航，以及与组件通信。另一方面，Flutter 没有 Intent 的概念，尽管您仍然可以通过原生集成（使用插件）启动 Intent。

Flutter 并没有真正直接等同于 activity 和 fragment 的概念；相反，在 Flutter 中，您可以使用 Navigator 和 Route 在屏幕之间导航，所有这些都在同一个 Activity 中。

Route 是应用程序的“屏幕”或“页面”的抽象，而 Navigator 是管理路由的小部件。路由大致映射到 Activity，但它不具有相同的含义。导航器可以推送和弹出路由以在屏幕之间移动。导航器像堆栈一样工作，您可以在其中 push() 要导航到的新路由，并从中 pop() 路由以“返回”。

在 Android 中，您在应用程序的 AndroidManifest.xml 中声明您的活动。

在 Flutter 中，您有几个选项可以在页面之间导航

指定路由名称的 Map。（使用 MaterialApp）
直接导航到路由。（使用 WidgetsApp）

以下示例构建一个 Map。

dartvoid main() {
  runApp(
    MaterialApp(
      home: const MyAppHome(), // Becomes the route named '/'.
      routes: <String, WidgetBuilder>{
        '/a': (context) => const MyPage(title: 'page A'),
        '/b': (context) => const MyPage(title: 'page B'),
        '/c': (context) => const MyPage(title: 'page C'),
      },
    ),
  );
}

通过将其名称 push 到 Navigator 来导航到路由。

dart

Navigator.of(context).pushNamed('/b');

Intent 的另一个常用用例是调用外部组件，例如相机或文件选择器。为此，您需要创建原生平台集成（或使用现有插件）。

要了解如何构建原生平台集成，请参阅开发包和插件。

Flutter 可以通过直接与 Android 层通信并请求共享数据来处理来自 Android 的传入意图。

以下示例在运行我们的 Flutter 代码的原生 Activity 上注册了一个文本共享意图过滤器，以便其他应用可以与我们的 Flutter 应用共享文本。

基本流程意味着我们首先在 Android 原生端（在我们的 Activity 中）处理共享文本数据，然后等待 Flutter 请求数据，然后使用 MethodChannel 提供数据。

首先，在 AndroidManifest.xml 中注册所有意图的意图过滤器

xml<activity
  android:name=".MainActivity"
  android:launchMode="singleTop"
  android:theme="@style/LaunchTheme"
  android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection"
  android:hardwareAccelerated="true"
  android:windowSoftInputMode="adjustResize">
  <!-- ... -->
  <intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="text/plain" />
  </intent-filter>
</activity>

然后在 MainActivity 中，处理意图，从意图中提取共享的文本，并保存它。当 Flutter 准备好处理时，它使用平台通道请求数据，并从原生端发送过来。

javapackage com.example.shared;

import android.content.Intent;
import android.os.Bundle;

import androidx.annotation.NonNull;

import io.flutter.plugin.common.MethodChannel;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.GeneratedPluginRegistrant;

public class MainActivity extends FlutterActivity {

  private String sharedText;
  private static final String CHANNEL = "app.channel.shared.data";

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Intent intent = getIntent();
    String action = intent.getAction();
    String type = intent.getType();

    if (Intent.ACTION_SEND.equals(action) && type != null) {
      if ("text/plain".equals(type)) {
        handleSendText(intent); // Handle text being sent
      }
    }
  }

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
      GeneratedPluginRegistrant.registerWith(flutterEngine);

      new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
              .setMethodCallHandler(
                      (call, result) -> {
                          if (call.method.contentEquals("getSharedText")) {
                              result.success(sharedText);
                              sharedText = null;
                          }
                      }
              );
  }

  void handleSendText(Intent intent) {
    sharedText = intent.getStringExtra(Intent.EXTRA_TEXT);
  }
}

最后，当小部件渲染时，从 Flutter 端请求数据

dartimport 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample Shared App Handler',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  static const platform = MethodChannel('app.channel.shared.data');
  String dataShared = 'No data';

  @override
  void initState() {
    super.initState();
    getSharedText();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text(dataShared)));
  }

  Future<void> getSharedText() async {
    var sharedData = await platform.invokeMethod('getSharedText');
    if (sharedData != null) {
      setState(() {
        dataShared = sharedData as String;
      });
    }
  }
}

Navigator 类处理 Flutter 中的路由，并用于从已推送到堆栈的路由获取结果。这通过 await push() 返回的 Future 来完成。

例如，要启动一个允许用户选择其位置的位置路由，您可以执行以下操作

dart

Object? coordinates = await Navigator.of(context).pushNamed('/location');

然后，在您的位置路由中，一旦用户选择了他们的位置，您就可以通过结果 pop 堆栈

dart

Navigator.of(context).pop({'lat': 43.821757, 'long': -79.226392});

Dart 具有单线程执行模型，支持 Isolate（在另一个线程上运行 Dart 代码的方式）、事件循环和异步编程。除非您生成一个 Isolate，否则您的 Dart 代码在主 UI 线程中运行，并由事件循环驱动。Flutter 的事件循环等同于 Android 的主 Looper，即附加到主线程的 Looper。

Dart 的单线程模型并不意味着您需要将所有内容都作为阻塞操作运行，导致 UI 冻结。与 Android 不同，Android 要求您始终保持主线程空闲，在 Flutter 中，可以使用 Dart 语言提供的异步设施，例如 async/await，来执行异步工作。如果您在 C#、Javascript 中使用过 async/await 范式，或者使用过 Kotlin 的协程，那么您可能对此很熟悉。

例如，您可以使用 async/await 运行网络代码，而不会导致 UI 卡顿，让 Dart 完成繁重的工作

dartFuture<void> loadData() async {
  final dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final response = await http.get(dataURL);
  setState(() {
    widgets = (jsonDecode(response.body) as List)
        .cast<Map<String, Object?>>();
  });
}

一旦 await 的网络调用完成，通过调用 setState() 更新 UI，这将触发小部件子树的重建并更新数据。

以下示例异步加载数据并将其显示在 ListView 中

dartimport 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List<Map<String, Object?>> widgets = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView.builder(
        itemCount: widgets.length,
        itemBuilder: (context, position) {
          return getRow(position);
        },
      ),
    );
  }

  Widget getRow(int i) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Row ${widgets[i]["title"]}"),
    );
  }

  Future<void> loadData() async {
    final dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    final response = await http.get(dataURL);
    setState(() {
      widgets = (jsonDecode(response.body) as List)
          .cast<Map<String, Object?>>();
    });
  }

}

有关在后台执行工作以及 Flutter 与 Android 的不同之处的更多信息，请参阅下一节。

在 Android 中，当您想要访问网络资源时，通常会转到后台线程并执行工作，以免阻塞主线程并避免 ANR。例如，您可能正在使用 AsyncTask、LiveData、IntentService、JobScheduler 作业或带有在后台线程上工作的调度器的 RxJava 管道。

由于 Flutter 是单线程并运行事件循环（类似于 Node.js），因此您不必担心线程管理或生成后台线程。如果您正在执行 I/O 密集型工作，例如磁盘访问或网络调用，那么您可以安全地使用 async/await，并且一切就绪。另一方面，如果您需要执行 CPU 密集型工作，使 CPU 保持忙碌，那么您需要将其移动到 Isolate 以避免阻塞事件循环，就像您在 Android 中将任何类型的工作从主线程中移开一样。

对于 I/O 密集型工作，将函数声明为 async 函数，并在函数内部 await 长时间运行的任务

dartFuture<void> loadData() async {
  final dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  final response = await http.get(dataURL);
  setState(() {
    widgets = (jsonDecode(response.body) as List)
        .cast<Map<String, Object?>>();
  });
}

这就是您通常进行网络或数据库调用的方式，它们都是 I/O 操作。

在 Android 上，当您扩展 AsyncTask 时，您通常会覆盖 3 个方法：onPreExecute()、doInBackground() 和 onPostExecute()。Flutter 中没有等价物，因为您 await 一个长时间运行的函数，而 Dart 的事件循环会处理其余部分。

但是，有时您可能会处理大量数据并且 UI 挂起。在 Flutter 中，使用 Isolate 来利用多个 CPU 核心来执行长时间运行或计算密集型任务。

Isolate 是独立的执行线程，不与主执行内存堆共享任何内存。这意味着您无法从主线程访问变量，也无法通过调用 setState() 更新 UI。与 Android 线程不同，Isolate 忠于其名称，不能共享内存（例如，以静态字段的形式）。

以下示例以一个简单的 isolate 形式展示了如何将数据共享回主线程以更新 UI。

dartFuture<void> loadData() async {
  ReceivePort receivePort = ReceivePort();
  await Isolate.spawn(dataLoader, receivePort.sendPort);

  // The 'echo' isolate sends its SendPort as the first message.
  SendPort sendPort = await receivePort.first as SendPort;

  final msg =
      await sendReceive(
            sendPort,
            'https://jsonplaceholder.typicode.com/posts',
          )
          as List<Object?>;
  final posts = msg.cast<Map<String, Object?>>();

  setState(() {
    widgets = posts;
  });
}

// The entry point for the isolate.
static Future<void> dataLoader(SendPort sendPort) async {
  // Open the ReceivePort for incoming messages.
  ReceivePort port = ReceivePort();

  // Notify any other isolates what port this isolate listens to.
  sendPort.send(port.sendPort);

  await for (var msg in port) {
    String dataUrl = msg[0] as String;
    SendPort replyTo = msg[1] as SendPort;

    http.Response response = await http.get(Uri.parse(dataUrl));
    // Lots of JSON to parse
    replyTo.send(jsonDecode(response.body));
  }
}

Future<Object?> sendReceive(SendPort port, Object? msg) {
  ReceivePort response = ReceivePort();
  port.send([msg, response.sendPort]);
  return response.first;
}

这里，dataLoader() 是运行在自己的独立执行线程中的 Isolate。在 isolate 中，您可以执行更多 CPU 密集型处理（例如，解析一个大型 JSON），或执行计算密集型数学运算，例如加密或信号处理。

您可以在下面运行完整示例

dartimport 'dart:async';
import 'dart:convert';
import 'dart:isolate';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List<Map<String, Object?>> widgets = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  Widget getBody() {
    bool showLoadingDialog = widgets.isEmpty;
    if (showLoadingDialog) {
      return getProgressDialog();
    } else {
      return getListView();
    }
  }

  Widget getProgressDialog() {
    return const Center(child: CircularProgressIndicator());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: getBody(),
    );
  }

  ListView getListView() {
    return ListView.builder(
      itemCount: widgets.length,
      itemBuilder: (context, position) {
        return getRow(position);
      },
    );
  }

  Widget getRow(int i) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Row ${widgets[i]["title"]}"),
    );
  }

  Future<void> loadData() async {
    ReceivePort receivePort = ReceivePort();
    await Isolate.spawn(dataLoader, receivePort.sendPort);

    // The 'echo' isolate sends its SendPort as the first message.
    SendPort sendPort = await receivePort.first as SendPort;

    final msg =
        await sendReceive(
              sendPort,
              'https://jsonplaceholder.typicode.com/posts',
            )
            as List<Object?>;
    final posts = msg.cast<Map<String, Object?>>();

    setState(() {
      widgets = posts;
    });
  }

  // The entry point for the isolate.
  static Future<void> dataLoader(SendPort sendPort) async {
    // Open the ReceivePort for incoming messages.
    ReceivePort port = ReceivePort();

    // Notify any other isolates what port this isolate listens to.
    sendPort.send(port.sendPort);

    await for (var msg in port) {
      String dataUrl = msg[0] as String;
      SendPort replyTo = msg[1] as SendPort;

      http.Response response = await http.get(Uri.parse(dataUrl));
      // Lots of JSON to parse
      replyTo.send(jsonDecode(response.body));
    }
  }

  Future<Object?> sendReceive(SendPort port, Object? msg) {
    ReceivePort response = ReceivePort();
    port.send([msg, response.sendPort]);
    return response.first;
  }

}

使用流行的http 包在 Flutter 中进行网络调用非常容易。

虽然 http 包没有 OkHttp 中的所有功能，但它抽象掉了您通常自己实现的许多网络功能，使其成为进行网络调用的简单方法。

要将 http 包添加为依赖项，请运行 flutter pub add。

flutter pub add http

要进行网络调用，请在 async 函数 http.get() 上调用 await

dartimport 'dart:developer' as developer;
import 'package:http/http.dart' as http;

Future<void> loadData() async {
  var dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  http.Response response = await http.get(dataURL);
  developer.log(response.body);
}

在 Android 中，您通常会在后台线程上执行长时间运行的任务时在 UI 中显示 ProgressBar 视图。

在 Flutter 中，使用 ProgressIndicator Widget。通过布尔标志控制何时渲染它来以编程方式显示进度。在长时间运行的任务开始之前通知 Flutter 更新其状态，并在任务结束后将其隐藏。

在以下示例中，构建函数分为三个不同的函数。如果 showLoadingDialog 为 true（当 widgets.isEmpty 为真时），则渲染 ProgressIndicator。否则，渲染从网络调用返回数据的 ListView。

dartimport 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List<Map<String, Object?>> widgets = [];

  @override
  void initState() {
    super.initState();
    loadData();
  }

  Widget getBody() {
    bool showLoadingDialog = widgets.isEmpty;
    if (showLoadingDialog) {
      return getProgressDialog();
    } else {
      return getListView();
    }
  }

  Widget getProgressDialog() {
    return const Center(child: CircularProgressIndicator());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: getBody(),
    );
  }

  ListView getListView() {
    return ListView.builder(
      itemCount: widgets.length,
      itemBuilder: (context, position) {
        return getRow(position);
      },
    );
  }

  Widget getRow(int i) {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Row ${widgets[i]["title"]}"),
    );
  }

  Future<void> loadData() async {
    final dataURL = Uri.parse('https://jsonplaceholder.typicode.com/posts');
    final response = await http.get(dataURL);
    setState(() {
      widgets = (jsonDecode(response.body) as List)
          .cast<Map<String, Object?>>();
    });
  }
}

虽然 Android 将资源和资产视为不同的项，但 Flutter 应用只有资产。所有本应位于 Android 上的 res/drawable-* 文件夹中的资源，都放在 Flutter 的资产文件夹中。

Flutter 遵循与 iOS 类似的简单基于密度的格式。资产可以是 1.0x、2.0x、3.0x 或任何其他乘数。Flutter 没有 dp，但有逻辑像素，这基本上与设备无关的像素相同。Flutter 的 devicePixelRatio 表示单个逻辑像素中物理像素的比率。

与 Android 密度桶等效的如下：

Android 密度限定符	Flutter 像素比率
`ldpi`	`0.75x`
`mdpi`	`1.0x`
`hdpi`	`1.5x`
`xhdpi`	`2.0x`
`xxhdpi`	`3.0x`
`xxxhdpi`	`4.0x`

资产位于任意文件夹中——Flutter 没有预定义的文件夹结构。您在 pubspec.yaml 文件中声明资产（带位置），Flutter 会将其拾取。

存储在原生资产文件夹中的资产可以使用 Android 的 AssetManager 在原生侧访问

kotlinval flutterAssetStream = assetManager.open("flutter_assets/assets/my_flutter_asset.png")

Flutter 无法访问原生资源或资产。

例如，要将名为 my_icon.png 的新图像资产添加到我们的 Flutter 项目中，并决定将其放在我们随意命名的 images 文件夹中，您会将基本图像 (1.0x) 放在 images 文件夹中，所有其他变体放在带有相应比率乘数的子文件夹中

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

接下来，您需要在 pubspec.yaml 文件中声明这些图像

yamlassets:
 - images/my_icon.png

然后您可以使用 AssetImage 访问您的图像

dart

AssetImage('images/my_icon.png'),

或直接在 Image 小部件中

dart@override
Widget build(BuildContext context) {
  return Image.asset('images/my_image.png');
}

Flutter 目前没有专门的字符串资源系统。最佳和推荐的做法是将字符串作为键值对保存在 .arb 文件中。例如

json{
   "@@locale": "en",
   "hello":"Hello {userName}",
   "@hello":{
      "description":"A message with a single parameter",
      "placeholders":{
         "userName":{
            "type":"String",
            "example":"Bob"
         }
      }
   }
}

然后在您的代码中，您可以像这样访问您的字符串

dart

Text(AppLocalizations.of(context)!.hello('John'));

Flutter 对 Android 上的辅助功能提供基本支持，尽管此功能仍在开发中。

有关更多信息，请参阅Flutter 应用国际化。

在 Android 中，您通过添加到 Gradle 构建脚本来添加依赖项。Flutter 使用 Dart 自己的构建系统和 Pub 包管理器。这些工具将原生 Android 和 iOS 包装器应用程序的构建委托给各自的构建系统。

虽然 Flutter 项目的 android 文件夹下有 Gradle 文件，但只有在添加平台集成所需的原生依赖项时才使用它们。通常，使用 pubspec.yaml 声明要在 Flutter 中使用的外部依赖项。查找 Flutter 包的好地方是 pub.dev。

在 Android 中，Activity 表示用户可以执行的单个重点任务。Fragment 表示一种行为或用户界面的一部分。Fragment 是一种模块化代码、为更大屏幕组合复杂用户界面并帮助扩展应用程序 UI 的方式。在 Flutter 中，这两个概念都属于 Widget 的范畴。

要了解有关构建 Activity 和 Fragment UI 的更多信息，请参阅社区贡献的 Medium 文章面向 Android 开发者的 Flutter：如何在 Flutter 中设计 Activity UI。

如意图部分所述，Flutter 中的屏幕由 Widget 表示，因为 Flutter 中一切都是小部件。使用 Navigator 在代表不同屏幕或页面，或者可能是相同数据的不同状态或渲染的不同 Route 之间移动。

在 Android 中，您可以覆盖 Activity 中的方法以捕获 Activity 本身的生命周期方法，或者在 Application 上注册 ActivityLifecycleCallbacks。在 Flutter 中，您没有这些概念，但可以通过连接到 WidgetsBinding 观察者并监听 didChangeAppLifecycleState() 更改事件来监听生命周期事件。

可观察的生命周期事件有

detached — 应用程序仍然托管在 Flutter 引擎上，但与任何宿主视图分离。
inactive — 应用程序处于非活动状态，不接收用户输入。
paused — 应用程序当前对用户不可见，不响应用户输入，并在后台运行。这等同于 Android 中的 onPause()。
resumed — 应用程序可见并响应用户输入。这等同于 Android 中的 onPostResume()。

有关这些状态含义的更多详细信息，请参阅AppLifecycleStatus 文档。

正如您可能已经注意到的那样，只有一小部分 Activity 生命周期事件可用；虽然 FlutterActivity 确实在内部捕获了几乎所有 Activity 生命周期事件并将其发送到 Flutter 引擎，但它们大多被屏蔽。Flutter 会为您处理引擎的启动和停止，在大多数情况下，几乎没有理由需要在 Flutter 侧观察 Activity 生命周期。如果您需要观察生命周期以获取或释放任何原生资源，那么无论如何，您都应该从原生侧进行。

以下是观察包含 Activity 生命周期状态的示例

dartimport 'package:flutter/widgets.dart';

class LifecycleWatcher extends StatefulWidget {
  const LifecycleWatcher({super.key});

  @override
  State<LifecycleWatcher> createState() => _LifecycleWatcherState();
}

class _LifecycleWatcherState extends State<LifecycleWatcher>
    with WidgetsBindingObserver {
  AppLifecycleState? _lastLifecycleState;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      _lastLifecycleState = state;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_lastLifecycleState == null) {
      return const Text(
        'This widget has not observed any lifecycle changes.',
        textDirection: TextDirection.ltr,
      );
    }

    return Text(
      'The most recent lifecycle state this widget observed was: $_lastLifecycleState.',
      textDirection: TextDirection.ltr,
    );
  }
}

void main() {
  runApp(const Center(child: LifecycleWatcher()));
}

在 Android 中，LinearLayout 用于线性布局您的小部件——无论是水平还是垂直。在 Flutter 中，使用 Row 或 Column 小部件来实现相同的结果。

如果您注意到两个代码示例除了“Row”和“Column”小部件外是相同的。子级是相同的，并且可以利用此功能来开发可以随着时间变化且具有相同子级的丰富布局。

dart@override
Widget build(BuildContext context) {
  return const Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
}

dart@override
Widget build(BuildContext context) {
  return const Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Column One'),
      Text('Column Two'),
      Text('Column Three'),
      Text('Column Four'),
    ],
  );
}

要了解有关构建线性布局的更多信息，请参阅社区贡献的 Medium 文章面向 Android 开发者的 Flutter：如何在 Flutter 中设计 LinearLayout。

RelativeLayout 将您的小部件相互关联地布局。在 Flutter 中，有几种方法可以实现相同的结果。

您可以通过组合使用 Column、Row 和 Stack 小部件来实现 RelativeLayout 的结果。您可以为小部件构造函数指定规则，说明子小部件如何相对于父小部件进行布局。

有关在 Flutter 中构建 RelativeLayout 的一个很好的示例，请参阅 Collin 在 StackOverflow 上的回答。

在 Android 中，如果用户的设备屏幕小于您的内容，请使用 ScrollView 布局您的小部件，它会滚动。

在 Flutter 中，最简单的方法是使用 ListView 小部件。这对于来自 Android 的人来说可能看起来有点过头，但在 Flutter 中，ListView 小部件既是 ScrollView 又是 Android ListView。

dart@override
Widget build(BuildContext context) {
  return ListView(
    children: const <Widget>[
      Text('Row One'),
      Text('Row Two'),
      Text('Row Three'),
      Text('Row Four'),
    ],
  );
}

如果 AndroidManifest.xml 包含以下内容，FlutterView 将处理配置更改

yaml

android:configChanges="orientation|screenSize"

在 Android 中，您可以通过调用“setOnClickListener”方法将 onClick 附加到按钮等视图。

在 Flutter 中，有两种添加触摸监听器的方法

如果小部件支持事件检测，则将函数传递给它并在函数中处理它。例如，ElevatedButton 有一个 onPressed 参数。

dart@override
Widget build(BuildContext context) {
  return ElevatedButton(
    onPressed: () {
      developer.log('click');
    },
    child: const Text('Button'),
  );
}

如果 Widget 不支持事件检测，则将 Widget 包装在 GestureDetector 中，并将函数传递给 onTap 参数。

dartclass SampleTapApp extends StatelessWidget {
  const SampleTapApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            developer.log('tap');
          },
          child: const FlutterLogo(size: 200),
        ),
      ),
    );
  }
}

使用 GestureDetector，您可以监听各种手势，例如

点击
- onTapDown - 可能导致点击的指针已在特定位置接触屏幕。
- onTapUp - 触发点击的指针已停止在特定位置接触屏幕。
- onTap - 发生了一次点击。
- onTapCancel - 之前触发 onTapDown 的指针不会导致点击。
双击
- onDoubleTap - 用户在短时间内连续两次点击屏幕的同一位置。
长按
- onLongPress - 指针在屏幕的同一位置长时间保持接触。
垂直拖动
- onVerticalDragStart - 指针已接触屏幕并可能开始垂直移动。
- onVerticalDragUpdate - 接触屏幕的指针已在垂直方向上进一步移动。
- onVerticalDragEnd - 之前与屏幕接触并垂直移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移动。
水平拖动
- onHorizontalDragStart - 指针已接触屏幕并可能开始水平移动。
- onHorizontalDragUpdate - 接触屏幕的指针已在水平方向上进一步移动。
- onHorizontalDragEnd - 之前与屏幕接触并水平移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移动。

以下示例展示了一个 GestureDetector，它在双击时旋转 Flutter 徽标

dartclass SampleApp extends StatefulWidget {
  const SampleApp({super.key});

  @override
  State<SampleApp> createState() => _SampleAppState();
}

class _SampleAppState extends State<SampleApp>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late CurvedAnimation curve;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 2000),
    );
    curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onDoubleTap: () {
            if (controller.isCompleted) {
              controller.reverse();
            } else {
              controller.forward();
            }
          },
          child: RotationTransition(
            turns: curve,
            child: const FlutterLogo(size: 200),
          ),
        ),
      ),
    );
  }
}

Flutter 中 ListView 的等价物是……ListView！

在 Android ListView 中，您创建一个适配器并将其传递给 ListView，ListView 会使用适配器返回的内容渲染每一行。但是，您必须确保回收您的行，否则，您会遇到各种疯狂的视觉故障和内存问题。

由于 Flutter 的不可变小部件模式，您将小部件列表传递给 ListView，Flutter 会确保滚动快速流畅。

dartimport 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView(children: _getListData()),
    );
  }

  List<Widget> _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(
        Padding(padding: const EdgeInsets.all(10), child: Text('Row $i')),
      );
    }
    return widgets;
  }
}

在 Android 中，ListView 有一个方法可以找出哪个项目被点击了，即 'onItemClickListener'。在 Flutter 中，使用传入的小部件提供的触摸处理。

dartimport 'dart:developer' as developer;

import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView(children: _getListData()),
    );
  }

  List<Widget> _getListData() {
    List<Widget> widgets = [];
    for (int i = 0; i < 100; i++) {
      widgets.add(
        GestureDetector(
          onTap: () {
            developer.log('row tapped');
          },
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Text('Row $i'),
          ),
        ),
      );
    }
    return widgets;
  }
}

在 Android 上，您更新适配器并调用 notifyDataSetChanged。

在 Flutter 中，如果您在 setState() 中更新小部件列表，您很快就会发现您的数据在视觉上没有变化。这是因为当调用 setState() 时，Flutter 渲染引擎会查看小部件树以查看是否有任何更改。当它到达您的 ListView 时，它会执行 == 检查，并确定两个 ListView 是相同的。没有任何更改，因此不需要更新。

要简单地更新您的 ListView，请在 setState() 中创建一个新的 List，并将旧列表中的数据复制到新列表中。虽然这种方法很简单，但对于大型数据集不建议使用，如下一个示例所示。

dartimport 'dart:developer' as developer;

import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List<Widget> widgets = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 100; i++) {
      widgets.add(getRow(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView(children: widgets),
    );
  }

  Widget getRow(int i) {
    return GestureDetector(
      onTap: () {
        setState(() {
          widgets = List.from(widgets);
          widgets.add(getRow(widgets.length));
          developer.log('row $i');
        });
      },
      child: Padding(padding: const EdgeInsets.all(10), child: Text('Row $i')),
    );
  }
}

构建列表的推荐、高效和有效的方法是使用 ListView.Builder。当您拥有动态 List 或具有大量数据的 List 时，此方法非常有用。这实质上相当于 Android 上的 RecyclerView，它会自动为您回收列表元素

dartimport 'dart:developer' as developer;

import 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  List<Widget> widgets = [];

  @override
  void initState() {
    super.initState();
    for (int i = 0; i < 100; i++) {
      widgets.add(getRow(i));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: ListView.builder(
        itemCount: widgets.length,
        itemBuilder: (context, position) {
          return getRow(position);
        },
      ),
    );
  }

  Widget getRow(int i) {
    return GestureDetector(
      onTap: () {
        setState(() {
          widgets.add(getRow(widgets.length));
          developer.log('row $i');
        });
      },
      child: Padding(padding: const EdgeInsets.all(10), child: Text('Row $i')),
    );
  }
}

不是创建“ListView”，而是创建一个 ListView.builder，它接受两个关键参数：列表的初始长度和 ItemBuilder 函数。

ItemBuilder 函数类似于 Android 适配器中的 getView 函数；它接受一个位置，并返回您想要在该位置渲染的行。

最后，但最重要的是，请注意 onTap() 函数不再重新创建列表，而是 .add 到列表中。

在 Android SDK（截至 Android O）中，您创建一个字体资源文件并将其传递给 TextView 的 FontFamily 参数。

在 Flutter 中，将字体文件放在一个文件夹中，并在 pubspec.yaml 文件中引用它，类似于导入图像的方式。

yamlfonts:
   - family: MyCustomFont
     fonts:
       - asset: fonts/MyCustomFont.ttf
       - style: italic

然后将字体分配给您的 Text Widget

dart@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Sample App')),
    body: const Center(
      child: Text(
        'This is a custom font text',
        style: TextStyle(fontFamily: 'MyCustomFont'),
      ),
    ),
  );
}

除了字体之外，您还可以在 Text Widget 上自定义其他样式元素。Text Widget 的 style 参数接受一个 TextStyle 对象，您可以在其中自定义许多参数，例如

color
decoration
decorationColor
decorationStyle
fontFamily
fontSize
fontStyle
fontWeight
hashCode
height
inherit
letterSpacing
textBaseline
wordSpacing

有关使用表单的更多信息，请参阅检索文本字段的值。

在 Flutter 中，您可以通过为 Text Widget 的装饰构造函数参数添加 InputDecoration 对象，轻松地为您的输入显示“提示”或占位符文本。

dartCenter(
  child: TextField(decoration: InputDecoration(hintText: 'This is a hint')),
)

就像您使用“提示”一样，将 InputDecoration 对象传递给文本小部件的装饰构造函数。

但是，您不希望一开始就显示错误。相反，当用户输入无效数据时，更新状态，并传递一个新的 InputDecoration 对象。

dartimport 'package:flutter/material.dart';

void main() {
  runApp(const SampleApp());
}

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const SampleAppPage(),
    );
  }
}

class SampleAppPage extends StatefulWidget {
  const SampleAppPage({super.key});

  @override
  State<SampleAppPage> createState() => _SampleAppPageState();
}

class _SampleAppPageState extends State<SampleAppPage> {
  String? _errorText;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sample App')),
      body: Center(
        child: TextField(
          onSubmitted: (text) {
            setState(() {
              if (!isEmail(text)) {
                _errorText = 'Error: This is not an email';
              } else {
                _errorText = null;
              }
            });
          },
          decoration: InputDecoration(
            hintText: 'This is a hint',
            errorText: _getErrorText(),
          ),
        ),
      ),
    );
  }

  String? _getErrorText() {
    return _errorText;
  }

  bool isEmail(String em) {
    String emailRegexp =
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|'
        r'(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|'
        r'(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';

    RegExp regExp = RegExp(emailRegexp);

    return regExp.hasMatch(em);
  }
}

使用geolocator社区插件。

image_picker 插件是访问相机的常用插件。

要使用 Facebook 登录，请使用 flutter_facebook_login 社区插件。

大多数 Firebase 功能都由第一方插件覆盖。这些插件是第一方集成，由 Flutter 团队维护

google_mobile_ads 用于 Flutter 的 Google 移动广告
firebase_analytics 用于 Firebase 分析
firebase_auth 用于 Firebase 身份验证
firebase_database 用于 Firebase RTDB
firebase_storage 用于 Firebase 云存储
firebase_messaging 用于 Firebase Messaging (FCM)
flutter_firebase_ui 用于快速 Firebase 身份验证集成（Facebook、Google、Twitter 和电子邮件）
cloud_firestore 用于 Firebase 云 Firestore

您还可以在 pub.dev 上找到一些第三方 Firebase 插件，它们涵盖了第一方插件未直接涵盖的领域。

如果 Flutter 或其社区插件缺少平台特定功能，您可以按照开发包和插件页面构建自己的功能。

简而言之，Flutter 的插件架构与 Android 中使用事件总线非常相似：您触发一条消息，然后让接收者处理并向您发出结果。在这种情况下，接收者是在 Android 或 iOS 上的原生端运行的代码。

如果您在当前的 Android 应用程序中使用 NDK，并且希望您的 Flutter 应用程序利用您的原生库，那么可以通过构建自定义插件来实现。

您的自定义插件首先与您的 Android 应用程序通信，您通过 JNI 调用您的 native 函数。一旦响应准备就绪，将消息发送回 Flutter 并渲染结果。

目前不支持直接从 Flutter 调用原生代码。

开箱即用，Flutter 提供了 Material Design 的精美实现，它处理了您通常会做的许多样式和主题需求。与 Android 中您在 XML 中声明主题然后使用 AndroidManifest.xml 将其分配给您的应用程序不同，在 Flutter 中，您在顶层小部件中声明主题。

为了充分利用应用中的 Material Components，您可以将顶层小部件 MaterialApp 声明为应用的入口点。MaterialApp 是一个便捷小部件，它封装了 Material Design 应用通常需要的一些小部件。它通过添加 Material 特定的功能来扩展 WidgetsApp。

您还可以使用 WidgetsApp 作为您的应用 Widget，它提供了一些相同的功能，但不如 MaterialApp 丰富。

要自定义任何子组件的颜色和样式，请将 ThemeData 对象传递给 MaterialApp 小部件。例如，在下面的代码中，种子颜色方案设置为深紫色，文本选择颜色设置为红色。

dartimport 'package:flutter/material.dart';

class SampleApp extends StatelessWidget {
  const SampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        textSelectionTheme: const TextSelectionThemeData(
          selectionColor: Colors.red,
        ),
      ),
      home: const SampleAppPage(),
    );
  }
}

Android 主屏幕小部件不能完全使用 Flutter 创建。它们必须使用 Jetpack Glance（首选方法）或 XML 布局代码。使用第三方包 home_widget，您可以将主屏幕小部件连接到 Dart 代码，在宿主小部件中嵌入 Flutter 组件（作为图像），并与主屏幕小部件共享数据（从 Flutter 或到 Flutter）。

在 Android 中，您可以使用 SharedPreferences API 存储一小部分键值对。

在 Flutter 中，使用 Shared_Preferences 插件访问此功能。此插件封装了 Shared Preferences 和 NSUserDefaults（iOS 等效项）的功能。

dartimport 'dart:async';
import 'package:flutter/material.dart';

import 'package:shared_preferences/shared_preferences.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: _incrementCounter,
            child: Text('Increment Counter'),
          ),
        ),
      ),
    ),
  );
}

Future<void> _incrementCounter() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  await prefs.setInt('counter', counter);
}

在 Android 中，您使用 SQLite 存储结构化数据，您可以使用 SQL 进行查询。

在 Flutter 中，对于 macOS、Android 或 iOS，使用 SQFlite 插件访问此功能。

使用 DevTools 套件调试 Flutter 或 Dart 应用。

DevTools 支持性能分析、检查堆、检查 widget 树、日志诊断、调试、观察已执行代码行、调试内存泄漏和内存碎片。有关更多信息，请查看 DevTools 文档。

在 Android 中，您使用 Firebase Cloud Messaging 为您的应用设置推送通知。

在 Flutter 中，使用 Firebase Messaging 插件访问此功能。有关使用 Firebase Cloud Messaging API 的更多信息，请参阅 firebase_messaging 插件文档。

此页面内容有帮助吗？

感谢你的反馈！

提供详情

感谢你的反馈！请告诉我们如何改进。

提供详情

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面最后更新于 2025-09-02。查看源代码或报告问题。

视图

Flutter 中 View 的等价物是什么？

如何更新小部件？

如何布局我的小部件？我的 XML 布局文件在哪里？

如何从布局中添加或删除组件？

如何对小部件进行动画处理？

如何使用 Canvas 进行绘图/绘制？

如何构建自定义小部件？

意图

Flutter 中 Intent 的等价物是什么？

如何在 Flutter 中处理来自外部应用程序的传入意图？

startActivityForResult() 的等价物是什么？

异步 UI

Flutter 中 runOnUiThread() 的等价物是什么？

如何将工作转移到后台线程？

Flutter 中 OkHttp 的等价物是什么？

如何显示长时间运行任务的进度？

项目结构 & 资源

我应该将与分辨率相关的图像文件存储在哪里？

我应该将字符串存储在哪里？如何处理本地化？

Gradle 文件的等价物是什么？如何添加依赖项？

Activity 和 Fragment

Flutter 中 Activity 和 Fragment 的等价物是什么？

如何监听 Android Activity 生命周期事件？

布局

LinearLayout 的等价物是什么？

RelativeLayout 的等价物是什么？

ScrollView 的等价物是什么？

如何在 Flutter 中处理横向切换？

手势检测和触摸事件处理

如何在 Flutter 中为小部件添加 onClick 监听器？

如何处理小部件上的其他手势？

ListView 和 Adapter

Flutter 中 ListView 的替代方案是什么？

如何知道哪个列表项被点击了？

如何动态更新 ListView？

处理文本

如何为我的文本小部件设置自定义字体？

如何设置我的文本小部件的样式？

表单输入

Input 中“提示”的等价物是什么？

如何显示验证错误？

Flutter 插件

如何访问 GPS 传感器？

如何访问相机？

如何使用 Facebook 登录？

如何使用 Firebase 功能？

如何构建我自己的自定义原生集成？

如何在 Flutter 应用程序中使用 NDK？

主题

如何为我的应用设置主题？

主屏幕小部件

如何创建主屏幕小部件？

数据库和本地存储

如何访问 Shared Preferences？

如何在 Flutter 中访问 SQLite？

调试

在 Flutter 中，我可以使用哪些工具来调试我的应用？

通知

如何设置推送通知？