我为何认为Flutter是移动应用程序开发的将来？

时间  2020-09-14 标签 为何 认为 flutter 移动 应用 程序 开发 将来

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

在这里插入图片描述
几年前，我使用Java和Objective-C在Android和iOS开发中有一些涉足。在实际工做中我花了将近一个月时间，我决定继续学习深挖。可是我发现很难深刻。
在最近，我了解到Flutter，并决定再为移动应用程序开发提供支持。我马上爱上了它，由于它使开发多平台应用程序变得很是有趣。自从了解它以来，我已经使用它建立了一个应用程序和一个库。Flutter彷佛是一个很是有前途的一步，我想解释为何我相信这一点有一下几个不一样的缘由。web

由Dart提供技术支持

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关键字json

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

并再次输出：canvas

I printed right away!
Waited 3 seconds to return this without blocking execution.

因为异步操做，咱们可以执行须要一段时间才能完成的代码，而不会阻止其他代码的执行。后端

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

考虑到您须要为Android和iOS使用不一样的代码库，开发移动应用程序可能须要花费大量时间。除非您使用像Flutter这样的SDK，不然您将拥有一个容许您为两个操做系统构建应用程序的代码库。不只如此，您还能够彻底本地运行它们。这意味着诸如滚动和导航之类的东西，就像他们应该使用的操做系统同样。
为了保持简洁的主题，只要您运行设备或模拟器，Flutter就能够构建和运行您的应用程序以进行测试，就像单击按钮同样简单。app

UI开发

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，它容许咱们为颜色，字体，输入字段等设置值。此功能很是适合保持应用外观的一致性。async

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，咱们设置应用程序颜色，字体系列和一些文本样式。除文本样式以外的全部内容都将自动应用于应用程序范围。必须为每一个文本小部件手动设置文本样式，但它仍然很简单：ide

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几个月以后，我认为能够说这是移动开发的将来。这绝对是朝着正确的方向迈出的一步。

❤️ 看以后

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

联系我们 沪ICP备13005482号-10