flutter 是什么

flutter是Google基于Dart語言開發的移動應用開發框架，在保持原生性能的條件下實現了跨端編程。

官方定義【 Flutter是一款移動應用程序SDK，一份代碼可以同時生成iOS和Android兩個高性能、高保真的應用程序。】

為什么學習flutter

體驗流暢且統一

由于其統一在打包階段把flutter引擎打包入，統一使用引擎的Skia直接渲染，因此在排版、圖標、滾動、點擊等方面實現零差異。

遠大前景

google 新一代操作系統 Fuchsia 的 UI開發框架；

品質保證

google親自操刀Flutter以及Dart，能夠不斷優化，Dart作為新一代編程語言，可用于web、服務端、移動端、物聯網 開發，并且支持轉譯js，其炙手可熱程度可見一斑，而且作為全新的語言，其編程體驗也是值得肯定。

生態豐富

flutter 豐富的控件庫 以及 插件資源，極大得提高開發效率。

技能準備

Dart

Dart于2013年年底發布1.0版本，Google推出Dart 的目的是在 JavaScript 語言的基礎上，改進編程效率和軟件執行效率，并減少大型軟件的編程復雜性。它確實做到第一點， Dart 編寫的程序執行效率比 JavaScript 高出 42%到 130%， 其實這對于想投入Html5 而又憎惡 JavaScript的人來說是個福音。

Flutter

基于Dart的跨平臺框架，這里我們所要學習的是Flutter相關Api， Flutter提供了相當豐富的Api，以往我們在 Android／Ios中花大力氣寫的自定義控件，在Flutter中基本是信手拈來。

Flutter官方網站-------Flutter中文網

Pub倉庫

Dart的包管理器，Pub之于Dart 就如 npm 之于 node.js， 需要注意的是dart插件分 Flutter和Web兩大類。 搜索插件庫

android／ios（可選）

開發者完全可以開發純Flutter應用。 如果需要Native支持的 Pub上也有大量的插件庫資源，
但是對于某些開發者的特殊需求（自己開發插件 or 開發混合App），就需要具備相應前端技能了。

環境工具搭建

環境

官方指導：安裝Flutter 整個過程簡單來說就是:

1. git(Window用戶需要安裝 Git For Window) 克隆一份Flutter代碼到本地

2. 配置環境變量（Flutter的Bin目錄）

另外：google還貼心得為中國開發者提供了鏡像，你懂的。

有些人可能會疑惑，Flutter基于Dart 就如 Android基于Java ， Ios 基于 OC， 為什么沒有安裝Dart的過程，其實這個過程已經在 1 步驟里了， Flutter會自帶最新版本的Dart，目前是2.0，
可在在控制在查看Dart版本 (前提是你已經配置了Dart環境變量，官方教程沒有這一步).

image

工具選擇

如果你僅僅是想開發純Flutter應用，使用 VsCode 就足夠了，畢竟插件強大，內存占用小。
安裝Dart插件

如果您需要自行開發插件 或者 開發混合 App， 那么你需要 AndroidStudio 和 XCode。

測試環境

環境和工具安裝完成可以測試Flutter安裝情況，在terminal運行 flutter doctor

image

這也僅僅是用于參考，該命令工具有時候也不太準確，自己把握就好，其實什么東西沒裝自己心里沒B+樹嗎？

工程目錄

創建工程

無論你是哪種操作系統，哪種開發工具，都可以使用

flutter create myapp

來生成Flutter工程， myapp 可以是任何你想要的工程名。這是我的工程目錄:

image

1. android

   里面存放android相關， 和普通的Android項目目錄別無二致，
   可以進行混合開發，其實也是類似于React Native。

2. ios

   同理普通的Ios項目目錄

3. lib

   用于存放Dart文件用于Flutter執行， 其中 main.dart是程序入口，原生App殼，如Android 的Activity會加載FlutterView作為ContentView， FlutterView就是Flutter加載main.dart渲染出的視圖，它有自己的堆棧管理。

4. test 測試用文件夾

5. pubspec.yaml

   Pub所用的配置文件，類似于npm的package.json， 用于Dart的包管理，使用的是 caret 語法，效果圖如下：

image

pubspec.yaml 配置文件，當配置更新的時候，可以使用 命令 flutter packages get拉取新的配置

name: 工程名

description： 文件描述

dependencies:Flutter工程依賴的庫，這里的庫包含Pub倉庫、本地Pub插件文件夾、插件的git倉庫地址

flutter_test::
sdk: flutter:這里要引入flutter

cupertino_icons::^0.1.2 這里引入ios風格的圖標

dev_dependencies:Flutter工程依賴的庫， 和 dependencies 不同在于，這個標簽下面定義的包只在開發模式生效，類似gradle 3.x 的 debugImplementation

6. pubspec.lock

   pub自動生成的文件，和 pubspec.yaml 密切相關，用于指定程序包所依賴的每個直接和傳遞依賴項的具體版本和其他標識信息，pubspec.yaml 只列出直接依賴關系，鎖文件會確切得指定程序包所依賴的特定版本的包。

Flutter編寫

flutter的UI分層比較講究，從下到上依次為 Dart:ui -> Render -> Animation -> Paint -> Widget -> MaterialWidget/cupertino
關于UI分層以及每一層的作用本篇不做討論。

如果你足夠無聊或者迫不得已，完全可以基于flutter的UI分層比較講究，從下到上依次為 Dart:ui層或者Render做開發，不過涉及太過復雜的狀態管理渲染之類的工作。

本篇只做Flutter的基礎認識。

程序入口

首先我們打開 lib目錄下的 main.dart文件,我們基于 widget層編寫（VsCode環境）：

image

程序的入口：

void main() => runApp(new MyApp()); 

該入口函數在整個app生命周期只會調用一次。 new MyApp() 會返回一個 Widget 控件用于渲染。 上圖代碼中返回了一個紅色的Contaner容器，效果如下:

image

官方不推薦這么做，不推薦直接把widget層的控件作為根控件，原因有個人認為兩點(暫時想到兩點)：

• 有為數不少的控件不支持直接放置(比如：Text 、 Icon)，必須要 MaterialApp或者WidgetApp作為父節點。
• 直接放置需要開發者作大量的工作來調整布局、樣式 等。

推薦使用 MaterialApp 作為程序根節點，原因如下：

• 統一規范，MaterialApp 引入了 Material Design，還是相當漂亮的，開發者幾乎不需要做額外的布局、樣式 編碼就能達到產品級視覺效果， 當然可以根據需求進行微調。
• MaterialApp 提供了大量的美觀、功能豐富的控件，放棄MaterialApp等于放棄了一整片森林。

正確的姿勢是這樣的：

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Center(child: Text('我是標題')), actions: <Widget>[ Icon(Icons.flight_takeoff), ], ), drawer: Text(''), body: new ListView.builder( itemCount: 12, itemBuilder: (BuildContext context, int index){ return ListTile(title: Center(child: Text("我是第${index}個item")),); }, ) ), 

MaterialApp 作為根節點， Scafford 腳手架控件，提供了 Drawer、ToolBar、Body 等等，我們可以看看這 27 行代碼能實現什么效果。

image

就醬紫，好好想像Android／Ios 實現這效果需要多少文件 多少 代碼吧。

控件類型

我們Flutter編碼一般都是在 Widget這一層， 上面談到 程序的 入口是

void main() => runApp(new MyApp()); 

他的作用是創建整個widget視圖，整個生命周期只調用一次，那我們怎么怎么更新頁面數據呢，我們是不是得保存 Widget 的引用重新設置相應的屬性呢？

答案是

No！

我們看一下Widget的具體實現：

@immutable abstract class Widget extends DiagnosticableTree { 

被加上了 @immutable 注解，這意味著控件不可被修改，只能被重新創建。
而我們平時編寫 Flutter 繼承的是:

abstract class StatelessWidget extends Widget { & abstract class StatefulWidget extends Widget {

因此，我們不能對已創建的Widget進行修改，那么我們有兩個問題：

1. 我們應該如何 更新頁面數據以及布局 ？
2. StatelessWidget 和 StatefulWidget什么玩意兒，什么區別 ？

我們嘗試著同時看這兩個問題，StatefulWidget 擁有StatelessWidget 的所有功能，也就是說 StatelessWidget 是他的子集。StatefulWidget 多了什么？

/*** StatefulWidget*/ class TestStateFulWidget extends StatefulWidget{ @override State<StatefulWidget> createState() { return TestStateFulState(); } }/*** state*/ class TestStateFulState extends State<TestStateFulWidget>{ int _index = 0;@override Widget build(BuildContext context) { return Column( crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Padding(padding: const EdgeInsets.only(top: 200.0),), Text('Count To $_index', style: TextStyle(fontSize: 50.0, color: Colors.red),), Padding(padding: const EdgeInsets.only(top: 60.0),), FloatingActionButton( //這是浮動的按鈕，支持點擊從而觸發 onPressed（） child: Text('Click'), onPressed: () {//onPressed（）方法里面對_index自增，并且調用setState(() {})_index++; setState(() {}); }, ), ], ); } }

效果圖

image

具體效果是點擊 Click 浮動按鈕， 上方的數字增加 1 ，這就是數據更新。

每個StateFulWidget 維護一個 State 對象，當我們對 相關數據更新后 并且 調用了** setState(() {})** 方法，這樣就吧 該 Widget 標記為 dirty ，因此會觸發控件的更新、替換、刪除 等。

打包 ( 以Android為例 )

debug

Flutter開發過程編譯會產生 debug 的 apk 包，查看一下我們打出的 debug 包：
在 /Users/chao/Public/gsy/build/app/outputs/apk/debug/app-debug.apk 目錄
利用 Android Studio 分析

image

居然有 31M 我可什么都沒有放啊，大頭都在 lib， 這什么鬼, libflutter.so是什么

image

這是Flutter虛擬機器， 官方的定義是：

The Flutter Engine is a portable runtime for hosting Flutter applications.

其實這也是Flutter可以跨平臺統一的根本所在。

如果你開發Flutter 你會逐漸意識到，為什么感覺 安裝包 卡卡的， 真的有官方宣稱的 60 幀嗎，或者平均50幀。 debug包所運行的東西太多啦， 主要是為了方便開發者開發， 所以這點不用擔心，我們嘗試著打包release 包。

release

終端運行：

flutter build apk

同樣查看release包：

image

只有不足 9M 了，并且體驗發現，release包幀率相當得高，甚至比 native開發同樣的頁面幀率都要高(僅僅針對示本例而言).

主流跨平臺框架

維度	Hybird	Weex	RN	Flutter
開發語言	html5+css3+js	vue+js+css3	react+js+css3	Dart
是否摒棄標簽語言	否	否	否	是
動畫效果支持	一般	好	好	好
用戶體驗性	一般	流暢	流暢	流暢
插件豐富程度	豐富	較豐富	較豐富	較豐富
界面開發難易程度	較高	較低	較低	低
是否支持熱更新	是	是	是	否
是否支持和現有項目集成	是	是	是	是
最低支持Android版本	webview支持情況		4.1+	4.2+
最低支持IOS版本	webview支持情況		iOS8.0+	iOS8+

以上部分數據僅僅是個人以及部分開發同學觀點，勿噴。

總結

總體來說Flutter是一門值得學習的技術，有理由相信 google 的Flutter團隊會和Dart團隊保持密切的合作，并且Dart 虛擬機會更加高效，更加適合Flutter，這是其他框架所不具備的優勢

而且Fuchsia系統也采用Flutter作為界面框架，所以，你懂的，就不說了。

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.junxiaosheng.cn/18399.html