原文：https://medium.com/free-code-camp/why-i…
譯者：前端技術小哥
幾年前，我使用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爲我們提供了一些東西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幾個月之後，我認爲可以說這是移動開發的未來。這絕對是朝着正確的方向邁出的一步。
❤️ 看之後
- 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
- 關注公衆號「新前端社區」，號享受文章首發體驗！每週重點攻克一個前端技術難點。
