1、Flutter誕生的原因
跨平臺工具包歷來采用以下兩種方法之一：
將 Web 視圖包裝在本機應用程序中，并將應用程序構建為網頁。
包裝原生平臺控件并提供對它們的一些跨平臺抽象。
Flutter 采取不同的方法，試圖使移動開發更好。 它提供了一個開發人員使用的應用程序框架和一個可移植的運行時引擎。該框架建立在 Skia 圖形庫上，提供實際呈現的部件，而不僅僅是原生控件的包裝。
Flutter 做跨平臺開發能夠像 web 一樣靈活，但同時提供流暢的性能。
Flutter 附帶的部件庫以及開源部件使其成為一個功能豐富的平臺。簡單地說，Flutter 是最接近移動開發人員用于跨平臺開發的理想平臺，靈活性、性能幾乎毫無妥協。
Flutter 使用谷歌開發的 Dart 語言進行開發。 Dart 是一種面向對象的語言，同時支持提前編譯和即時編譯，非常適合用于構建本地應用程序，同時 Flutter 的熱加載有效的提高了開發效率。 Flutter 最近也轉向了 Dart 2.0 版本。
Dart 提供了許多其他語言中的功能，包括垃圾回收，異步，強類型，泛型以及豐富的標準庫。
2、跨平臺框架的發展史1、使用WebApp的一些框架1、Ruby on Rails
2、AngularJS
3、JQuery Mobile
4、Cordova
5、PWA
6、Instant App
優勢：
一套HTML5APP 即可同時適用iOS、Android平臺，適配性和體驗較好。
版本服務器更新，用戶永遠看到的是最新APP端的信息。
技術難度較低，開發工作量小，開發成本低。
劣勢：
用戶體驗大幅落后于原生APP，操作的流暢度，程序的執行效率，與原生APP都有較大差距；
HTML5 APP 受網速的影響較大，在網絡情況較差的情況下，HTML5 APP 往往連打開都困難，而原生程序，基本都能順利打開運行（只是速度較慢）。
2、 適合移動端App的一些框架1、React Native
特點：Facebook 出品的一個移動端開發框架，可以最大限度的接近原生框架，就能夠在Javascript和React的基礎上獲得完全一致的開發體驗，構建原生App，僅需學習一次，編寫任何平臺。（Learn once， write anywhere）
缺點：初次學習成本高，必須不同平臺寫兩套代碼，依賴暴露的接口
2、Weex
特點：weex 能夠完美兼顧性能與動態性，讓移動開發者通過簡捷的前端語法寫出Native級別的性能體驗，并支持iOS、Android、YunOS及web等多端部署。
缺點：控件太少，基本只能實現最基本的效果；上手難度打，如果是前段和移動端都懂的話上手很快；隨著項目變大，編譯速度會呈指數型上升。
3、Flutter
1、免費開源；
2、利用保持狀態的熱重載（hot reload）、全新的響應式框架、豐富的控件以及集成的開發工具，這些特點進行快速開發；
3、通過可組合的控件集合、豐富的動畫庫以及可擴展的框架來實現富有感染力的靈活界面設計；
4、借助可移植的GPU加速的渲染引擎以及高性能本地ARM代碼運行時以達到跨設備的高品質用戶體驗；
5、提高開發效率：使用一套代碼同時開發iOS和Android；
6、可擴展性強：Flutter框架本身提供了豐富的Material Design和Cupertino(iOS-flavor)風格的控件，可自由擴展控件，不受手機平臺控件的限制。
Flutter框架Flutter框架是一個分層的結構，每個層都建立在前一層之上。
image.png
Flutter跨平臺最核心的部分，是它的高性能渲染引擎（Flutter Engine）。Flutter不使用瀏覽器技術，也不使用Native的原生控件，它使用自己的渲染引擎來繪制widget。
說到widget，就要說一句Flutter的一切皆為widget理念。widget是Flutter應用程序用戶界面的基本構建塊。每個widget都是用戶界面一部分的不可變聲明。與其他將視圖、控制器、布局和其他屬性分離的框架不同，Flutter具有一致的統一對象模型：widget。在更新widget的時候，框架能夠更加的高效。
對于Android平臺，Flutter引擎的C/C++代碼是由NDK編譯，在iOS平臺，則是由LLVM編譯，兩個平臺的Dart代碼都是AOT編譯為本地代碼，Flutter應用程序使用本機指令集運行。Flutter正是是通過使用相同的渲染器、框架和一組widget，來同時構建iOS和Android應用，而無需維護兩套獨立的代碼庫。
image.png
Flutter將UI組件和渲染器從平臺移動到應用程序中，這使得它們可以自定義和可擴展。Flutter唯一要求系統提供的是canvas，以便定制的UI組件可以出現在設備的屏幕上。
Flutter安裝 -- #官網鏈接>>> --**
image.png
image.png
image.png
image.png
3、開發工具Flutter 在開發工具的選擇上很靈活。 應用程序可以通過命令行以及任何編輯器輕松開發，這些編輯器來自受支持的 IDE，如 VS Code，Android Studio 或 IntelliJ。 使用哪種 IDE 取決于用戶的偏好。
Android Studio 提供了最多的功能，例如 Flutter Inspector 來分析正在運行的應用程序的窗口部件以及監視應用程序性能。 還提供了開發部件層次結構時很方便的幾個重構。
VS Code 提供了更輕松的開發體驗，因此它的啟動速度往往比 Android Studio / IntelliJ 更快。 每個 IDE 都提供內置的編輯助手，如代碼補全，接口定義跳轉以及良好的調試支持。
Flutter 也很好的支持命令行，這使得創建，更新和啟動應用程序變得容易，除了編輯器之外沒有任何其他工具依賴性。
4、熱加載無論采用何種工具，Flutter 都能為應用程序的熱加載提供出色的支持。 這允許在許多情況下修改正在運行的應用程序，維護狀態，而不必停止應用程序，重新構建和重新部署。
5、測試Flutter 包含一個 WidgetTester 實用程序，用于與測試中的部件進行交互。 新的應用程序模板包含一個示例測試，用于演示在創建測試時如何使用它。
6、包管理和插件 pub鏈接Flutter 已經有了一個豐富的開發者生態系統：開發人員已有大量可以使用的包和插件。
要添加包或插件，只需在應用程序的根目錄下的 pubspec.yaml 文件中包含依賴項即可。 然后從命令行或 IDE 運行 flutter packages get，Flutter 的工具將引入所有必需的依賴關系。
要將流行的圖像選擇器插件用于 Flutter，只需在 pubspec.yaml 中將其列為依賴項
然后運行 flutter packages get 拉取所有依耐項，然后可以在 Dart 中導入和使用它
image.png
6、部件Flutter 里的所有東西都是一個一個的部件。 這包括用戶界面元素，例如 ListView，TextBox 和 Image，以及框架的其他部分，包括布局，動畫，手勢識別和主題等。
通過將所有內容都設置為窗口部件，整個應用程序可以在窗口部件層次結構中表示。 擁有一個所有內容都是部件的架構，可以清楚地了解作用于某一部分的屬性和行為的來源。 這與大多數其他應用程序框架不同，它們將屬性和行為不一致地關聯起來，有時將屬性和行為從層次結構中的其他組件附加到控件本身，有時自身控制屬性和行為。
7、運行第一個Flutter應用
image.png
image.png
部件示例Flutter 應用程序的入口點是 main 函數。 要在屏幕上放置用戶界面元素的部件，在 main（）中調用 runApp（）并將部件層次結構根部的部件作為參數傳遞。
image.png
無狀態 VS 有狀態部件有兩種形式：無狀態和有狀態。 無狀態部件在創建和初始化后不會更改它們的內容，而有狀態部件維護一些程序運行時可變的狀態，例如，響應用戶交互。
image.png
在實例中無狀態的Widget繼承自StatelessWidget，其初始化之后，不會更改內部內容。
有狀態的Widget繼承自StatefulWidge,有狀態的部件返回一個負責為給定狀態構建部件樹的 State 類。 狀態更改時，將重建窗口部件樹的關聯部分。通過setState（）方法改變部件狀態。狀態在傳遞給 setState（）的函數中更新。 當調用 setState（）時，該函數可以設置任何內部狀態。
|
QQ好友和群
QQ空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
