文章譯自：
Flutter之所以變得流行，是因為它具有快速構建應用程式的靈活性以及易於學習語言的靈活性。不管您是經驗豐富的開發人員還是新手，觀看一些有用的視訊，收集一些線上和離線學習資源以及經過大量練習後，就可以熟練使用Flutter。在這篇文章中，我們將引導您獲取所有資源，但在此之前-你應該瞭解所有關於Flutter你應該瞭解的知識！
Flutter由Google開發，是一個開放原始碼框架（而不是SDK），主要用於開發手機APP。我們還可以使用單個程式碼庫為同一APP開發Web和桌面版本。Flutter由許多設計精美的小部件，一組豐富的motion API以及可跨平臺使用的滾動，導航，字型和圖示組成。這樣可確保在Android和iOS手機上均具有流暢的效能。Flutter應用程式是原生編譯的，因此具有高效能和快速性。
手機APP的開發是2021年的趨勢。在移動裝置上檢視和執行操作最方便，因為我們可以隨時隨地進行操作。Flutter是一個完全可自定義的框架，可讓您構建高度表達且靈活的UI，它易於學習，可加快開發速度。如果這些還不夠，那麼這裡有一些您應該學習Flutter的原因：
- 沒有跨平臺問題：Flutter遵循了一次寫入的方法，因為它是提前編譯的，因此提供了原生程式碼體驗。
- 無需重新構建：“熱過載”使開發人員可以在儲存程式碼更改後立即檢視帶來的改變。
- 強大的社群和支援：Flutter的團隊非常樂於助人，社群為新手提供了充分的支援。
- 使用2Dimension Flare建立無盡的動畫。
- 支援許多IDE，例如VS Code，Android Studio 等。
- 使用Dart語言保證前端和後端程式碼的一致性。
Flutter的一些獨特功能是：
- 專注於可定製的小部件，可以使用Material Design和Cupertino包（而不是android XML）中的所有小部件集來輕鬆開發UI。
- 熱過載可幫助開發人員立即檢視其更改。這減少了開發時間以及錯誤修復時間。一次寫入，可以在任何平臺上執行的任何程式碼，無需更改即可執行。
- Flutter使用Dart程式語言，該語言既可以提前使用，也可以及時進行編譯，從而提供高效能和更快的啟動時間。
- 原生ARM機器碼可在Android和iOS上實現原生效能。
學習Flutter的預備知識
要開始學習Flutter，對以下內容的熟悉是非常必要的。如果您不瞭解以下內容，最好先掌握這些概念，然後繼續進行Flutter之旅：
- 原生Android開發知識–如果您要開發非常精細的應用程式 。
- OOPS概念：由於Java，C ++等語言都是基於OOPS概念的，因此必須對它們進行深入的研究。這是一個很好的視訊，可以輕鬆地解釋OOPS。
- 在學習Flutter之前，您應該瞭解Dart程式設計：但這也很容易。Dart是Google的通用程式語言。Hackr.io列出了一些很好的課程，可以幫助您快速輕鬆地上Dart。
- 知道C++/Java是一項額外的優勢，但不是必需的！
現在是開始學習Flutter的好時機。網際網路上的資源林林總總，眼花繚亂。這就是為什麼我們會提供最好的資源來幫助您以正確的方式學習Flutter的原因。官方Flutter網站上有很多文件，但是您應該參考其他資源以便對於Flutter有一個更深層次和更多維度的理解。
線上視訊和文件
官方網站上提供了許多示例視訊和文件。您還應該在YouTube上檢視本週的視窗小部件，其中涵蓋了SDK中的視窗小部件。如果您需要快速瞭解有關小部件的知識，那麼這是一個好地方。
線上教程
Hackr的Flutter教程連結列出了一些最佳的免費和付費課程。Flutter＆Dart是一門很好的課程，您可以同時學習Dart和Flutter。同樣，Flutter入門是一個很好的初學者課程，您可以免費學習。
書籍
書籍是獲取有關任何技術和參考資料的深入知識的好方法。目前學習Flutter的最好的書是：
-
作為一個初學者，您應該能夠從這兩本書中學到很多東西。
來自GitHub的示例
您可以使用Flutter社群在GitHub上建立的示例，Demo來開始或強化Flutter的技能。首先嚐試UI示例，其中一些可以在應用商店中找到-這將幫助您實時檢視應用程式的工作方式。
好了，我們現在獲取到了資源，但是我應該如何開始呢？
讓我們快速設定 Flutter 環境並構建一個簡單的APP以幫助您入門。
您應該做的第一件事是獲取SDK –軟體開發工具包–它是一組軟體工具，這些工具打包在一個軟體包中，並且可以在您的開發環境中使用。 對於開發，我們使用整合開發環境（IDE）–使您的開發和測試變得輕鬆快捷。如我們之前所學，有2種流行的IDE –
VS Code –它輕便，快速，你想要IDE擁有的功能它全都有 ！
Android Studio –使用裝置上的Android Studio，您只需安裝Flutter和Dart的外掛，設定SDK，就可以了。
設定很容易，您可以按照官方文件中的說明進行操作。
使用Flutter構建一個簡單的應用程式
讓我們構建一個簡單的Hello World程式。通過此程式，我們將瞭解Flutter的結構以及使用的主要方法。儘管它很簡單，但仍然是一個良好的開端。
要想建立一個新的Flutter專案，只需要鍵入：
$ flutter create flutter_appFlutter 新專案主要包含以下幾個目錄：
flutter_appandroid –生成Android應用。任何關於Android的實現都將放在此資料夾中。
資產–用於儲存資料檔案，影像等…
ios -生成的iOS應用。任何關於iOS的實現都將放在此資料夾中。
lib-主要程式碼檔案都在這裡建立，main.dart -主檔案
test–用於單元測試
對於我們這個比較簡單的App，我們僅需要“ main.dart”。檔案。該檔案自帶一些程式碼，開發人員通常將其刪除以從頭開始編寫程式碼。這正是我們也將要做的！
首先重要的是匯入“ material ”包。它用於引入UI元件。
import 'package:flutter/material.dart';就像許多其他語言一樣，執行從main方法開始。main方法應包括runApp()方法，該方法呼叫要執行的程式碼。
void main() => runApp(new HelloWorldApp());要執行的程式碼不過是一個小部件。請記住，Flutter 是完全基於 widget(小部件)的。
那麼，什麼是 widget(小部件)？
如果您還不知道，那麼 widget(小部件)可以是檢視內的任何東西- button(按鈕)，list(列表)，table(表格)，input box(輸入框)，card view(卡片檢視)，等等。因此，您的整個 Flutter 應用都是一個個小部件的集合，這些小部件巢狀組合在一起，從而構建一個漂亮的 UI 。這就是為什麼您建立的每個類都應擴充套件小部件類的原因。
由於我們的應用程式只需要列印 Hello World，所以我們只需要一個不需要儲存任何狀態的小部件-StatelessWidget(無狀態小部件)。StatelessWidget(無狀態小部件)具有構造方法。
class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Now comes the main magic –
return new MaterialApp(
home: new Material(
child: new Center(
child: new Text("Hello world!"),MaterialApp 是小部件的封裝，Material 是 materials 中的一種，Center 是將元素居中的小部件。Text 將新增文字欄位小部件。除了您看到的屬性（home，child）外，還有許多其他屬性（例如 style(樣式)，position(位置)， decoration(裝飾)，等等）可以完善整個UI。
然後，現在讓我們將所有程式碼放在一起
import 'package:flutter/material.dart';
void main() => runApp(new HelloWorldApp());
class extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Material(
child: new Center(
child: new Text("Hello world!"),
),),);}} 
…並使用命令執行它
$ flutter run恭喜你！您剛剛構建了第一個手機APP。從這裡開始，您的 Flutter 旅程將變得簡單而有趣。
Udemy 和其他線上資源設計了許多很好的課程來學習 Flutter。如果您已經從事手機APP的開發，那麼一門好的課程將幫助您快速學習。但是，如果您的專案時間緊迫，則應進行更多的實踐；如果你想通過設定本地環境來構建小部件，應當閱讀一兩本書以瞭解更加複雜的設計。書籍將幫助您填補已經知道的知識和需要學習的知識之間的空白。
本作品採用《CC 協議》，轉載必須註明作者和本文連結