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

時間 2019-11-06

原文原文鏈接

原文：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這讓咱們的節目繼續執行，同時等待這些較長的操做完成的關鍵字。讓咱們看看幾個例子：一個沒有異步操做，一個是有。json

// 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關鍵字canvas

// 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.
複製代碼

因爲異步操做，咱們可以執行須要一段時間才能完成的代碼，而不會阻止其他代碼的執行。bash

一次編寫，在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，它容許咱們爲顏色，字體，輸入字段等設置值。此功能很是適合保持應用外觀的一致性。

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，咱們設置應用程序顏色，字體系列和一些文本樣式。除文本樣式以外的全部內容都將自動應用於應用程序範圍。必須爲每一個文本小部件手動設置文本樣式，但它仍然很簡單：async

child: Text(
    'Some text',
    style: Theme.of(context).primaryTextTheme.display4,
),
複製代碼

爲了提升效率，Flutter能夠熱從新加載應用程序，所以您無需在每次更改UI時從新啓動它。您如今能夠進行更改，保存，而後在一秒左右內查看更改。

庫

Flutter提供了許多開箱即用的強大功能，但有時您須要的功能比它提供的要多一些。考慮到可用於Dart和Flutter的大量庫，這根本不是問題。是否有興趣在您的應用中投放廣告？有一個庫。想要新的小部件嗎？有庫。若是您更喜歡本身動手，請當即建立本身的庫並與社區其餘人共享。向項目添加庫很簡單，能夠經過在pubspec.yaml文件中添加一行來完成。例如，若是要添加sqflite庫：ide

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。