我为什么认为Flutter是移动应用程序开发的未来

jiezi

5 年前

原文：https://medium.com/free-code-camp/why-i….
译者：前端技术小哥

几年前，我使用 Java 和 Objective- C 在 Android 和 iOS 开发中有一些涉足。在实际工作中我花了将近一个月时间，我决定继续学习深挖。但是我发现很难深入。
在最近，我了解到 Flutter，并决定再为移动应用程序开发提供支持。我立刻爱上了它，因为它使开发多平台应用程序变得非常有趣。自从了解它以来，我已经使用它创建了一个应用程序和一个库。Flutter 似乎是一个非常有前途的一步，我想解释为什么我相信这一点有一下几个不同的原因。

Flutter 使用谷歌开发的 Dart 语言。如果您之前使用过 Java，那么您将非常熟悉 Dart 的语法，因为它们非常相似。除了语法之外，Dart 是一种完全不同的语言。
我不打算深入讨论 Dart，因为它有点超出范围，但我想讨论一下我认为最有用的功能。此功能支持异步操作。Dart 不仅支持它，而且非常容易。
如果您正在进行 IO 或其他耗时的操作（例如查询数据库），那么您最有可能在所有 Flutter 应用程序中使用这些内容。如果没有异步操作，任何耗时的操作都会导致程序冻结直到完成。为了防止这种情况，Dart 为我们提供了 async 和 await 这让我们的节目继续执行，同时等待这些较长的操作完成的关键字。
让我们看看几个例子：一个没有异步操作，一个是有。

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

并输出：
Waited 3 seconds to print this and blocked execution.
That sure took a while!
这不太理想。没有人想要使用在执行长时间操作时冻结的应用程序。所以让我们稍微修改一下并使用 async 和 await 关键字

// 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 使用不同的代码库，开发移动应用程序可能需要花费大量时间。除非您使用像 Flutter 这样的 SDK，否则您将拥有一个允许您为两个操作系统构建应用程序的代码库。不仅如此，您还可以完全本地运行它们。这意味着诸如滚动和导航之类的东西，就像他们应该使用的操作系统一样。
为了保持简洁的主题，只要您运行设备或模拟器，Flutter 就可以构建和运行您的应用程序以进行测试，就像单击按钮一样简单。

UI 开发是我几乎从不期待的事情之一。我更像是一个后端开发人员，所以当涉及到严重依赖它的东西时，我想要一些简单的东西。这就是 Flutter 在我眼中突出的地方。
通过将不同的组件组合在一起并修改它们以适合您的应用程序外观来创建 UI。您几乎可以完全控制这些小部件的显示方式，因此您最终会得到您正在寻找的内容。对于布局的 UI，你有小部件，如 Row，Column 和 Container。对于内容，你有像 Text 和的小部件 RaisedButton。这只是 Flutter 提供的一些小部件，还有很多。使用这些小部件，我们可以构建一个非常简单的 UI：


@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 get，你很高兴。库使开发 Flutter 应用程序变得轻而易举，并在开发过程中节省了大量时间。

现在大多数应用依赖于某种数据，并且数据需要存储在某个地方，以便以后可以显示和使用。因此，在寻找使用新 SDK（例如 Flutter）创建应用时，请牢记这一点非常重要。
再一次，Flutter 应用程序是使用 Dart 制作的，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。

使用 Flutter，可能性几乎无穷无尽，因此即使是超级广泛的应用程序也可以轻松创建。如果您开发移动应用程序并且尚未尝试 Flutter，我强烈建议您这样做，因为我相信您也会爱上它。使用 Flutter 几个月之后，我认为可以说这是移动开发的未来。这绝对是朝着正确的方向迈出的一步。

点赞，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓 -_-）
关注公众号「新前端社区」，号享受文章首发体验！每周重点攻克一个前端技术难点。

我为什么认为Flutter是移动应用程序开发的未来

由 Dart 提供技术支持

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

UI 开发

库

后端开发

最后的想法

❤️ 看之后