我為什麼認為Flutter是移動應用程式開發的未來？

前端技術小哥發表於2019-08-07
Flutter

原文：medium.com/free-code-c…
譯者：前端技術小哥

幾年前，我使用Java和Objective-C在Android和iOS開發中有一些涉足。在實際工作中我花了將近一個月時間，我決定繼續學習深挖。但是我發現很難深入。
在最近，我瞭解到Flutter，並決定再為移動應用程式開發提供支援。我立刻愛上了它，因為它使開發多平臺應用程式變得非常有趣。自從瞭解它以來，我已經使用它建立了一個應用程式和一個庫。Flutter似乎是一個非常有前途的一步，我想解釋為什麼我相信這一點有一下幾個不同的原因。

由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關鍵字

// 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，你有小部件，如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是移動應用程式開發的未來？
還有更多的技巧，使你開發的應用程式變得輕而易舉。您可以通過並手動更改字型，顏色，並逐個查詢所有內容，但這需要太長時間。相反，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是移動應用程式開發的未來？
為了提高效率，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是移動應用程式開發的未來？

相關文章