爲何我認爲Flutter是移動應用程序開發的將來

時間 2020-07-06

原文原文鏈接

老孟導讀：這是老孟翻譯的精品文章，此篇文章共有 3.6K的贊。加入老孟Flutter交流羣（wx：laomengit），精彩文章不容錯誤。android

原文地址：medium.com/free-code-c…ios

幾年前，我使用Java和Objective-C涉足了Android和iOS開發，使用它們嘗試了大約1個月後，我決定繼續前進。git

可是最近，我瞭解了Flutter，並決定再次開發移動應用程序。我當即愛上了它，由於它使開發多平臺應用程序變得很是有趣。自了解以來，我已經建立了一個應用程序和一個使用它的庫。 Flutter彷佛是向前邁出的很是有但願的一步，我想解釋一些我爲何會相信的不一樣緣由。sql

由Dart提供支持

Flutter使用Google開發的Dart語言。若是您之前使用過Java，那麼您將很是熟悉Dart的語法，由於它們很是類似。除了語法外，Dart是一種徹底不一樣的語言。數據庫

我不會深刻討論Dart，由於它有點超出範圍，但我想討論一下我認爲最有用的功能之一。此功能支持異步操做。 Dart不只支持它，並且使其異常容易。json

若是您要執行IO或其餘耗時的操做（例如查詢數據庫），那麼極可能會在全部Flutter應用程序中使用此功能。沒有異步操做，任何耗時的操做都會致使程序凍結直到完成。爲防止這種狀況，Dart爲咱們提供了async 和 await 關鍵字，這些關鍵字使咱們的程序能夠在等待這些較長的操做完成時繼續執行。canvas

讓咱們看幾個例子：一個沒有異步操做，一個有異步操做。後端

// 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!');
}複製代碼

輸出t:微信

Waited 3 seconds to print this and blocked execution.
That sure took a while!複製代碼

這不理想。沒有人願意使用在執行長時間操做時凍結的應用程序。所以，讓咱們對其進行一些修改，並使用 async 和 await 關鍵字。app

// 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。您幾乎徹底能夠控制這些小部件的顯示方式，所以始終能夠獲得所需的確切信息。爲了佈置UI，您須要使用小部件，例如行，列和容器。對於內容，您具備諸如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可輕鬆設置主題主題。您能夠手動更改字體，顏色，而後逐一查找全部內容，但這花費的時間太長。相反，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軟件包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，SQLite和其餘技術來建立數據驅動的應用程序，建議您閱讀我寫的文章：

如何在Flutter中使用Streams，BLoC和SQLite