为什么 Flutter 是移动应用开发的未来？

terry 2年前 (2023-09-23) 阅读数 66 #移动小程序

我拥有一些使用 Java 和 Objective-C 进行 Android 和 iOS 开发的能力。我花了将近一个月的时间来工作，我决定继续学习和深入挖掘。但我很难融入其中。
最近了解了 Flutter，决定再次支持移动应用开发。我立即爱上了它，因为它使开发多平台应用程序变得如此有趣。自从了解它以来，我已经使用它创建了一个程序和一个库。 Flutter 看起来是一个非常有希望的进步，我想解释一下我相信这一点的几个不同原因。

由 Dart 提供支持

Flutter 使用 Google 开发的 Dart 语言。如果您以前使用过 Java，您会对 Dart 的语法非常熟悉，因为它们非常相似。撇开语法不谈，Dart 是一种完全不同的语言。我不会深入讨论 Dart，因为它有点超出范围，但我想讨论我认为最有用的功能。该函数支持异步操作。 Dart 不仅支持它，而且非常简单。如果您执行 IO 或其他耗时的操作（例如查询数据库），您很可能会在所有 Flutter 应用程序中使用这些操作。如果没有异步操作，任何耗时的操作都会导致程序冻结直到完成。为了防止这种情况，Dart 为我们提供了 async 和 wait 关键字，它们允许我们的程序在等待这些较长操作完成时继续运行。让我们看几个示例：一个没有异步操作，一个有异步操作。

// Without asynchronous operations
import 'dart:async';

main() {
    longOperation();
    printSomething();
}

longOperation() {
    Duration delay = Duration(seconds: 3);
    Future.delayed(delay);
    print('Waited 3 seconds to print this and blocked execution.');
}

printSomething() {
    print('That sure took a while!');
}
复制代码

并输出：
等待 3 秒打印此内容并阻止执行。这当然花了一些时间！
这不太理想。没有人愿意使用在执行长时间操作时冻结的程序。因此，让我们稍微改变一下，使用 async 和 wait 关键字

// With asynchronous operations
import 'dart:async';

main() {
    longOperation();
    printSomething();
}

Future<void> longOperation() async {
    var retVal = await runLongOperation();

    print(retVal);
}

const retString = 'Waited 3 seconds to return this without blocking execution.';
Duration delay = Duration(seconds: 3);

Future<String> runLongOperation() => Future.delayed(delay, () => retString);

printSomething() {
    print('I printed right away!');
}
复制代码

并再次输出：

I printed right away!
Waited 3 seconds to return this without blocking execution.
复制代码

感谢异步操作，我们能够执行需要一段时间才能完成的代码，而不会阻塞其余部分的执行代码。

编写一次，在 Android 和 iOS 上运行

当您考虑到需要为 Android 和 iOS 使用不同的代码库时，开发移动应用程序可能会花费大量时间。除非您使用 Flutter 这样的 SDK，否则您将拥有一个代码库，可让您为两种操作系统构建应用程序。不仅如此，您还可以完全在本地运行它们。这意味着滚动和导航等内容，以及他们将使用的操作系统。
为了与简洁的主题保持一致，只要您正在运行设备或模拟器，Flutter 就可以轻松构建和运行您的应用程序以进行测试，只需单击按钮即可。

UI 开发

UI 开发是我几乎从不期待的事情之一。我更多的是后端开发人员，所以当涉及到严重依赖后端的事情时，我想要一些简单的东西。这就是 Flutter 在我眼中脱颖而出的地方。通过组合不同的组件并修改它们以匹配应用程序的外观和感觉来创建用户界面。您几乎可以完全控制这些小部件的显示方式，因此您最终会得到您想要的东西。对于布局 UI，您可以使用行、列和容器等小部件。对于内容，您可以使用 Text 和 RaisingButton 等小部件。这些只是 Flutter 提供的一些小部件，还有更多。使用这些小部件，我们可以构建一个非常简单的用户界面：


@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text('Flutter App'),
            centerTitle: true,
            elevation: 0,
        ),
        body: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                        Container(
                            child: Text('Some text'),
                        ),
                        Container(
                            child: RaisedButton(
                                onPressed: () {
                                    // Do something on press
                                },
                                child: Text('PRESS ME'),
                            ),
                        ),
                    ],
                ),
            ],
        ),
    );
}
复制代码

还有更多技巧可以让您轻松开发应用程序。您可以手动更改字体、颜色并一一查找所有内容，但这会花费太长时间。相反，Flutter 为我们提供了名为 ThemeData 的东西，它允许我们设置颜色、字体、输入字段等的值。此功能非常适合保持应用程序的一致外观和感觉。

theme: ThemeData(
    brightness: Brightness.dark,
    canvasColor: Colors.grey[900],
    primarySwatch: Colors.teal,
    primaryColor: Colors.teal[500],
    fontFamily: 'Helvetica',
    primaryTextTheme: Typography.whiteCupertino.copyWith(
        display4: TextStyle(
            color: Colors.white,
            fontSize: 36,
        ),
    ),
),
复制代码

通过这个 ThemeData，我们设置应用程序颜色、字体系列和一些文本样式。除文本样式外的所有内容都将自动应用到应用程序范围。需要为每个文本小部件手动设置文本样式，但这仍然很简单：

child: Text(
    'Some text',
    style: Theme.of(context).primaryTextTheme.display4,
),
复制代码

为了提高效率，Flutter 可以重新加载应用程序，这样您就不必每次更改 UI 时都重新启动它。您现在可以进行更改、保存，然后在一秒钟左右即可看到您的更改。

库

Flutter 提供了许多开箱即用的出色功能，但有时您需要的比它提供的更多一些。鉴于 Dart 和 Flutter 有大量可用的库，这根本不是问题。对在您的应用程序中投放广告感兴趣吗？有一个图书馆。想要新的小部件吗？有一个图书馆。如果您喜欢自己动手，请立即创建自己的库并与社区其他人分享。向项目添加库很简单，可以通过向 pubspec.yaml 文件添加一行来完成。例如，如果您想添加 sqflite 库：

dependencies:
  flutter:
    sdk: flutter
  sqflite: ^1.0.0
复制代码

将其添加到文件后，运行 flutter packages 就可以了。该库使开发 Flutter 应用程序变得轻而易举，并在开发过程中节省了大量时间。

后端开发

当今的大多数应用程序都依赖于某种形式的数据，并且数据需要存储在某个地方，以便以后可以显示和使用。因此，当您想要使用新的 SDK（例如 Flutter）创建应用程序时，请务必牢记这一点。
Flutter 应用程序再次使用 Dart 制作，这对于后端开发非常有用。我在本文中谈论了很多关于简单性的内容，Dart 和 Flutter 的后端开发也不例外。创建数据驱动的应用程序对于初学者和专家来说都很简单，但这种简单并不等于缺乏质量。
为了将其与上一节结合起来，可以使用库，以便您可以使用您选择的数据库。通过使用 sqflite 库，我们可以非常快速地启动并运行 SQLite 数据库。得益于单例模式，我们几乎可以从任何地方访问数据库并查询它，而不必每次都重新创建对象。


class DBProvider {
    // Singleton
    DBProvider._();

    // Static object to provide us access from practically anywhere
    static final DBProvider db = DBProvider._();
    Database _database;

    Future<Database> get database async {
        if (_database != null) {
            return _database;
        }

        _database = await initDB();
        return _database;
    }

    initDB() async {
        // Retrieve your app's directory, then create a path to a database for your app.
        Directory documentsDir = await getApplicationDocumentsDirectory();
        String path = join(documentsDir.path, 'money_clip.db');

        return await openDatabase(path, version: 1, onOpen: (db) async {
            // Do something when the database is opened
        }, onCreate: (Database db, int version) async {
            // Do something, such as creating tables, when the database is first created.
            // If the database already exists, this will not be called.
        }
    }
}
复制代码

从数据库中检索数据后，可以使用模型将其转换为对象。或者，如果要将对象存储在数据库中，可以使用相同的模型将其转换为 JSON。

class User {
    int id;
    String name;

    User({
        this.id,
        this.name,
    });

    factory User.fromJson(Map<String, dynamic> json) => new User(
        id: json['id'],
        name: json['name'],
    );

    Map<String, dynamic> toJson() => {
        'id': id,
        'name': name,
    };
}
复制代码

如果无法向用户显示该数据，那么它就没那么有用。这就是 Flutter 与 FutureBuilder 或 StreamBuilder 等小部件的用武之地。