整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
創 木子召 新新猿類 前天
首先我們來了解下什么Widget，其實就是相當于iOS開發中的UIView,在dart中Widget分為兩大類
StatefulWidget (有狀態Widget）
狀態是在構建widget時可以同步讀取的信息，或者在widget的生命周期中可能更改的信息，在Flutter中如果要管理狀態需要用到 StatefulWidget。
StatelessWidget（無狀態Widget）
Flutter中的StatelessWidget是一個不需要狀態更改的widget - 它沒有要管理的內部狀態。
以上我們先簡單介紹下Widget,后面我們用到再詳細講，下面我們來看看如何定義一個Widget，我們還是用上次的demo的里的代碼，把Text Widget抽取出來定義成MyWidget
class MyWidget extends StatelessWidget {
}
那如何把我們的Widget渲染到頁面上呢，其實有個build方法，build方法return什么就會渲染什么，我們來寫下build方法
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text('Hello Flutter', textDirection: TextDirection.ltr,)
);
}
}
然后我們把main函數里改下
void main(){
runApp(
MyWidget()
);
}
運行下跟我們之前的效果是一樣的
最后我們說下dart的一個語法，當一個函數只有一行代碼執行的時候，可以去掉大括號然后改成箭頭,最后我們精簡完就是下面這個樣子
void main()=> runApp(MyWidget());
文字樣式
接下來我們來研究先Text這個Widget，我們點擊去Text類里查看下
const Text(
this.data, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
})
const Text()是個構造函數，里面的this.XXXX都是屬性而且是可選的，我們看見它有個style屬性，我們來設置下看看
import 'package:flutter/material.dart';
void main()=> runApp(MyWidget());
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'Hello Flutter',
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.red, fontSize: 40, fontWeight: FontWeight.bold),
));
}
}
我們保存下代碼直接熱重裝看看效果
我們把代碼整理下,style抽出來
import 'package:flutter/material.dart';
void main()=> runApp(MyWidget());
class MyWidget extends StatelessWidget {
@override
final _textStyle=TextStyle(
color: Colors.red,
fontSize: 40,
fontWeight: FontWeight.bold
);
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
'Hello Flutter',
textDirection: TextDirection.ltr,
style: _textStyle,
));
}
}
是不是發現我們的_textStyle很像CSS啊，還有就是大家有沒有覺得有了hot reload之后寫UI爽歪歪啊
明天我們來說說MaterialApp和ListView這兩個組件
點此查看福利
One More Thing
掃碼查看 2020—課程列表 全網IT各種資源有需求的可以微我，或者你喜歡的課程都可以給我發鏈接剩下的我來搞定
喜歡的朋友可以掃描關注我的公眾號(多多點贊，多多打賞，您的支持是我寫作的最大動力）關注有福利可以使用免費梯子自由上網
iOS_DevTips
掃碼查看 2020—課程列表 全網IT各種資源有需求的可以微我，或者你喜歡的課程都可以給我發鏈接剩下的我來搞定
喜歡的朋友可以掃描關注我的公眾號(多多點贊，多多打賞，您的支持是我寫作的最大動力）關注有福利可以使用免費梯子自由上網
iOS_DevTips
木子召
lutter for Web
在2018年冬的Flutter 1.0倫敦發布會上，Flutter產品經理Tim Sneath通過一個滑動拼圖的例子介紹了如何讓Flutter運行在Web之上。這一當時代號HummingBird的項目后來被重命名為flutter_web，并最終合入了master分支。
Flutter Web想在單代碼庫的情況下，使Flutter應用擁有Web支持。這樣開發者使用Dart編寫的Flutter應用可以被部署到任意的Web服務器上，或嵌入到瀏覽器中。開發者可以使用Flutter的所有特性，也不需要特殊的瀏覽器插件支持。
就最新的Flutter1.9.x而言，Flutter Web還處于技術預覽版階段，離真正應用到生產環境中還是有一些距離的。
設計
那么Flutter Web是怎么做到這一切的呢？這就要從Flutter的原理說起。Flutter框架的設計如下所示:
其中，Flutter Framework是使用純Dart開發的。我們將其分為兩部分，渲染和邏輯。就渲染而言，其最終會表示為dart:ui中提供的TextBox，Picture，Image等實例對象，再通過native方法(實現dart調用C++)調用Skia，Text等C++庫，最終渲染在屏幕上，邏輯部分則被Dart Runtime執行。不難看出，要實現在Web上運行Flutter，要解決兩個問題。Dart如何運行在Web上以及dart:ui中的native方法如何通過標準Web的方式來實現。就前者而言，dart2js是一個已有的成熟框架，所以問題的重點就在于如何通過標準Web的方式去實現一個dart:ui庫。這也就是目前Flutter Web的設計原理:
在Flutter Web的設計之初，主要考慮了兩個方案用于Web支持:
HTML+CSS+Canvas
CSS Paint API
方案1具有最好的兼容性，它優先考慮HTML+CSS表達，當HTML+CSS無法表達圖片的時候，會使用Canvas來繪制。但2D Canvas在瀏覽器中是位圖表示，會造成像素化下的性能問題。
方案2是新的Web API, 屬于Houdini的組成部分。Houdini提供了一組可以直接訪問CSS對象模型的API，使得開發者可以去書寫代碼并被瀏覽器作為CSS加以解析，這樣在無需等待瀏覽器原生的支持下，創造了新的CSS特性。它的繪制并非由核心Javascript完成，而是類似Web Worker的機制。其繪制由顯示列表支持，而不是位圖。但目前CSS Paint API不支持文本，此外各家廠商對齊支持也并不統一。
鑒于此，目前Flutter Web使用的是基于方案1的實現。
環境準備
Flutter環境
flutter doctor -v
[?] Flutter (Channel master, v1.10.6-pre.61, on Mac OS X10.1519A558d, locale en-CN)
? Flutter version 1.10.6-pre.61at /Users/kylewong/Codes/Flutter/alibaba-flutter/flutter
? Framework revision 7bf9aea254(4hours ago),2019-09-2500:37:12-0700
? Engine revision 63949eb0fd
? Dart version 2.6.0(build2.6.0-dev.0.069b5681546)
...
[?] Chrome - develop forthe web
? Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[?] Android Studio (version 3.5)
? Android Studio at /Applications/Android Studio.app/Contents
? Flutter plugin version 39.0.3
? Dart plugin version 191.8423
? Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
Web環境
在flutter的master分支上，開發者可以通過下方命令檢查當前是否打開了Web支持:
kylewong@KyleWongdeMacBook-Pro web_dig % flutter devices
3connected devices:
MHA AL00 ? GWY7N16A31002764 ? android-arm64 ? Android 9(API28)
Chrome ? chrome ? web-javascript ? Google Chrome 77.0.3865.90
Server ? web ? web-javascript ? Flutter Tools
如果不能看到Chrome/Server這兩個設備，可以通過以下命令打開支持:
flutter config --enable-web
這個命令會將配置項保存到用戶Home目錄下的.flutter_settings中，一個典型的內容如下所示:
{
"enable-web": false,
"ios-signing-cert": "iPhone Developer: Kang Wang (xxx)"
}
dart2js配置修改
以flutter自帶的gallery為例，默認的flutter web實現下，生成的js如下所示:
可以看到此js代碼可讀性很差(變量名，格式等)，大小為2.2MB。這是因為flutter構建過程中開啟了dart2js命令的O4優化項所致。為了方便我們分析和調試，我們對此其進行如下修改:
O0將禁止很多優化，修改后的效果如下所示:
可以看到，大小增加了不少，但可讀性上好很多，除特殊說明外，本文將在O0優化項下展開。
原理剖析
我們首先基于Flutter提供的Gallery項目，比較下其在Mobile和Web上的表現(此處使用Flutter Web默認優化級別):
Flutter Native vs Flutter Web:
可以看出，Flutter Web在完備性上還是比較不錯的，但依然有一些問題，比如本地圖片在Android設備上顯示正常，在iOS上卻無法正常顯示，網絡圖片則是正常的。
在Mobile/Web開發中，常見的元素包括圖片，文字，形狀，手勢等，接下來，我們逐一進行剖析。
圖片的實現
以如下代碼為例:
import'package:flutter/material.dart';
voidmain=> runApp(Image.asset('assets/1.png'));
其運行效果如下(左側為Native，右側為Web):
其Native與Web簡要原理對比如下所示:
在flutterwebsdk中最終調用html庫(dart-sdk自帶)繪制的代碼如下:
flutter_web_sdk/lib/_engine/engine/bitmap_canvas.dart
@override
voiddrawImageRect(
ui.Image image, ui.Rect src, ui.Rect dst, ui.PaintData paint) {
// TODO(het): Check if the src rect is the entire image, and if so just
// append the imgElement and set it's height and width.
print('KWLM04');
finalHtmlImage htmlImage=image;
ctx.drawImageScaledFromSource(
htmlImage.imgElement,
src.left,
...
dst.height,
);
}
相對應地，通過 flutter build web--release--verbose生成的main.dart.js中部分代碼如下:
此部分對應上述bitmap_canvas.dart中的drawImageRect
drawImageRect: function(image, src, dst, paint) {
...
P.print("KWLM04");
H.interceptedTypeCheck(image, "$isHtmlImage");
J.drawImageScaledFromSource$x(this.get$ctx, image.imgElement, src.left, src.top, src.get$width(src), src.get$height(src), dst.left, dst.top, dst.get$width(dst), dst.get$height(dst));
},
drawImageScaledFromSource$x: function(receiver, a0, a1, a2, a3, a4, a5, a6, a7, a8) {
returnJ.getInterceptor$x(receiver).drawImageScaledFromSource(receiver, a0, a1, a2, a3, a4, a5, a6, a7, a8);
},
最終調用到了CanvasRenderingContext2D.drawImage這一標準W3C的API。
import'package:flutter/material.dart';
voidmain=> runApp(Text('Hello Flutter!'));
其運行效果如下(左側為Native，右側為Web):
其Native與Web簡要原理對比如下所示:
在flutterwebsdk中最終調用html庫(dart-sdk自帶)構建和添加Element的代碼如下:
flutter_web_sdk/lib/_engine/engine/dom_canvas.dart
@override
voiddrawParagraph(ui.Paragraph paragraph, ui.Offset offset) {
print('KWLM18');
finalhtml.Element paragraphElement=
_drawParagraphElement(paragraph, offset, transform: currentTransform);
currentElement.append(paragraphElement);
}
flutter_web_sdk/lib/_engine/engine/engine_canvas.dart
html.Element _drawParagraphElement(
EngineParagraph paragraph,
ui.Offset offset, {
Matrix4 transform,
}) {
print('KWLM25');
assert(paragraph._isLaidOut);
finalhtml.Element paragraphElement=paragraph._paragraphElement.clone(true);
finalhtml.CssStyleDeclaration paragraphStyle=paragraphElement.style;
...
returnparagraphElement;
}
相對應地main.dart.js中部分代碼如下:
此部分對應上述dom_canvas.dart中的drawParagraph
drawParagraph: function(paragraph, offset) {
varparagraphElement;
H.interceptedTypeCheck(paragraph, "$isParagraph");
H.interceptedTypeCheck(offset, "$isOffset");
P.print("KWLM18");
paragraphElement=H._drawParagraphElement(paragraph, offset, this.get$currentTransform(this));
J.append$x(this.get$currentElement, paragraphElement);
},
_drawParagraphElement: function(paragraph, offset, transform) {
varparagraphElement, paragraphStyle, style, t1;
P.print("KWLM25");
paragraphElement=H.interceptedTypeCheck(J.clone$x(paragraph._paragraphElement, true), "$isElement0");
paragraphStyle=paragraphElement.style;
(paragraphStyle && C.CssStyleDeclaration_methods).set$position(paragraphStyle, "absolute");
...
returnparagraphElement;
},
從文本這個例子不難看出，對于可以通過HTML+CSS形式表達的元素，flutter web將其最終翻譯成Element+CSS Style形式動態生成類似靜態HTML+CSS描述的內容，最終完成內容的渲染。
形狀的實現
以如下代碼為例:
import'package:flutter/material.dart';
voidmain=> runApp(Container(decoration: BoxDecoration(color: Colors.red)));
其運行效果如下(左側為Native，右側為Web):
其Native與Web簡要原理對比如下所示:
在flutterwebsdk中最終調用html庫(dart-sdk自帶)構建Element(添加部分同文本)的代碼如下:
flutter_web_sdk/lib/_engine/engine/dom_canvas.dart
@override
voiddrawRect(ui.Rect rect, ui.PaintData paint) {
print('KWLM47');
assert(paint.shader==);
finalhtml.Element rectangle=html.Element.tag('draw-rect');
...
currentElement.append(rectangle);
}
相對應地main.dart.js中部分代碼如下:
此部分對應上述dom_canvas.dart中的drawRect
drawRect: function(rect, paint) {
varrectangle, isStroke, t1, t2, t3, left, right, $top, bottom, effectiveTransform, translated, style, cssColor, _this=this;
H.interceptedTypeCheck(rect, "$isRect");
H.interceptedTypeCheck(paint, "$isPaintData");
P.print("KWLM47");
rectangle=W.Element_Element$tag("draw-rect");
...
J.append$x(_this.get$currentElement, rectangle);
}
對于本例中的形狀，也是通過HTML+CSS的方式實現的。
觸摸事件的實現
以如下代碼為例:
import'package:flutter/material.dart';
voidmain=> runApp(GestureDetector(child: Text('Click me!',style: TextStyle(fontSize:50),), onTap: {
print('KWLM called!');
}));
其運行效果如下(左側為Native，右側為Web):
其Native與Web簡要原理對比如下所示:
此例中的PointerBinding由dartsdk.js提供，其提供了從Window獲取事件回調的機制，并最終調用到了WidgetsFlutterBinding(也是GestureBinding)的handlePointerDataPacket方法，后續的路由機制同Native情景下的Flutter部分。
優缺點
優點
從目前Flutter Web選取的技術路線來說，HTML+CSS+Canvas這種方式具有最好的兼容性，這樣開發者開發的Flutter代碼(不包括Plugin部分對于Native的擴展)將零成本地轉成標準Web展示，這一低成本擴展到Web平臺帶來的優勢還是很明顯的。
不足
盡管其優勢很明顯，也面臨一些不足的問題 a. 包大小過大的問題
目前dart2js本身并沒有針對小型程序做出優化，即使是本文中的手勢這么簡單的代碼，Flutter Web最終生成的大小也有560KB, 無法滿足要求。
但從理論上來說，通過對dart2js本身做出合理的優化(鑒于dart/flutter整個的開源設計)，我們可以將Flutter Web依賴的基礎SDK全集嵌入應用中(或者按需下載的方式)，將真正的業務代碼與SDK分離，也是有可能將其大小降低的。
b. 功能不完備的問題 比如在flutter_gallery的例子中Safari上圖標展示為方框的問題。
c. 性能的問題 當需要用到BitmapCanvas比較多的時候，Element對象直接的光柵化，會導致在一些諸如縮放等的場景下，面臨性能的問題。當然縮放的問題在移動設備的場景下也是有可能避免的。
小結
總體而言，Flutter Web具有優秀的設計。它基于dart:js和dart:html這些成熟的框架，通過將與Native相關的dart:ui庫重寫的方式，很好地解決了Flutter擴展到Web平臺上的問題。對于上層開發者而言，完全不用去做任何修改，即可產生一套符合Web標準的代碼，顯示和行為也同原始設計保持一致。雖然目前Flutter Web還不夠成熟，存在一些諸如包大小性能等問題，但基于Flutter和Flutter Web的良好分層設計，我們有理由相信隨著時間的推移和社區成熟，這些問題終將得到改善或解決。
閑魚團隊是Flutter+Dart FaaS前后端一體化新技術的行業領軍者，就是現在！客戶端／服務端java／架構／前端／質量工程師面向社會招聘，base杭州阿里巴巴西溪園區，一起做有創想空間的社區產品、做深度頂級的開源項目，一起拓展技術邊界成就極致！
*投喂簡歷給小閑魚→guicai.gxy@alibaba-inc.com
更多系列文章、開源項目、關鍵洞察、深度解讀
請認準閑魚技術
品|開源中國
Flutter 3.3 現已發布，此版本的專注于完善和性能改進，以強化三個月前發布的 Flutter 3 中所提供的功能。自 Flutter 3 發布以來，Flutter 已經合并了 5,687 個 PR。此版本通過幾個新組件和一些錯誤修復擴展了對不斷發展的 Material 3 規范的支持，包括針對平板電腦和桌面開發人員的新功能，iPad 上的涂鴉手寫支持、可選擇的文本分組和觸控板支持。
還包括 Dart 2.18，它為使用 Swift 或 Objective-C 編寫的庫和代碼引入了 FFI 支持。公告稱，基于此版本構建的應用程序將在桌面、Web 和移動設備上體驗到更高的性能。此版本帶來了 Flutter Web、桌面、文本處理性能的更新等等，還為 go_router 包、DevTools 和 VS Code 擴展引入了更新。
Framework
全局選擇
隨著 SelectableArea widget 的引入，任何 child of the SelectableArea widget 都可以免費啟用選擇。更多詳情可查看 [SelectableArea](https://api.flutter.dev/flutter/material/SelectionArea-class.html)API 頁面。
觸控板輸入
Flutter 3.3 改進了對觸控板輸入的支持。不僅提供了更豐富、更流暢的控制，還減少了某些情況下的誤解。有關這種誤解的示例，可查看 Drag a UI element page in the Flutter cookbook。滾動到頁面底部以訪問 DartPad 實例，然后執行以下步驟：
縮小窗口大小，使上部呈現滾動條
懸停在上部
使用觸控板滾動
在安裝 Flutter 3.3 之前，在觸控板上滾動會拖動項目，因為 Flutter 正在 dispatching 模擬的一般事件
安裝 Flutter 3.3 后，在觸控板上滾動會正確滾動列表，因為 Flutter 提供的是 “滾動” 手勢，該手勢無法被卡片識別，但可以被滾動視圖識別
更多詳情可查看 Flutter Trackpad Gesture 以及 PR。
PR 89944:Support trackpad gestures in framework
PR 31591:iPad trackpad gestures
PR 34060:Re-land “ChromeOS/Android trackpad gestures”
PR 31594:Win32 trackpad gestures
PR 31592:Linux trackpad gestures
PR 31593:Mac trackpad gesturesmacOS
Scribble
Flutter 現在支持在 iPadOS 上使用 Apple Pencil 進行 Scribble 手寫輸入。默認情況下，此功能在 CupertinoTextField、TextField 和 EditableText 上啟用。
文字輸入
為了改進對富文本編輯的支持，此版本引入了從平臺的 TextInputPlugin 接收細化文本更新的能力。以前，TextInputClient 只交付新的編輯狀態，新舊之間沒有差異，TextEditingDeltas 和 DeltaTextInputClient 填補了這個信息空白。了解更多信息，可查看富文本編輯器演示。
Material Design 3
Flutter 團隊繼續將更多 Material Design 3 組件遷移到 Flutter。此版本包括對 [IconButton](https://api.flutter.dev/flutter/material/IconButton-class.html)、[Chips](https://api.flutter.dev/flutter/material/Chip-class.html) 以及 [AppBar](https://api.flutter.dev/flutter/material/AppBar-class.html) 的大號和中號變體的更新。要監控 Material Design 3 遷移的進度，可查看 Bring Material 3 to Flutter。
圖標按鈕
Chip
大中型 AppBar
****
桌面
Windows
以前，Windows 桌面應用程序的版本由特定于 Windows 應用程序的文件設置。此行為與其他平臺設置其版本的方式不一致。現在可以從你的項目 pubspec.yaml 文件和構建參數中設置 Windows 桌面應用程序版本。
有關設置應用程序版本的更多信息，建議遵循 docs.flutter.dev 上的文檔和遷移指南。在 Flutter 3.3 之前創建的項目需要更新才能獲得此功能。
Packages
go_router
為了擴展 Flutter 的 native navigation API，該團隊發布了一個新版本的 go_router 包，使設計適用于移動設備、桌面和 Web 的路由邏輯變得更加簡單。
該 [go router](https://pub.dev/packages/go_router) 包由 Flutter 團隊維護，通過提供聲明性的、基于 url 的 API 來簡化路由，從而更容易 navigate 和處理 deep-links。最新版本 (4.3) 允許應用程序使用異步代碼重定向，并包括遷移指南中描述的其他 breaking changes。有關更多信息，可查看 docs.flutter.dev 上的 Navigation and routing 頁面。
VS Code 擴展增強
Flutter 的 Visual Studio Code 擴展有幾個更新，包括添加依賴項的改進。** 現在可以使用 Dart: Add Dependency ** 一步添加多個以逗號分隔的依賴項。
Flutter 開發者工具更新
自上一個穩定的 Flutter 版本以來，DevTools 進行了許多更新，包括對數據顯示表的 UX 和性能改進，以便更快、更好地滾動大型事件列表 ( #4175 )。
Performance
Raster cache 改進
此版本通過消除 copies 和減少 Dart 垃圾收集 (GC) 壓力來提高從 assets 加載 image 的性能。以前，在加載 asset images 時，ImageProviderAPI 需要多次復制壓縮數據。首先，當打開 asset 并將其作為類型化數據數組公開給 Dart 時，它被復制到 native heap 中。然后，當該類型化數據數組被復制到 ui.ImmutableBuffer 的內部存儲時，它又被第二次復制。
隨著 ui.ImmutableBuffer.fromAsse t 的加入，壓縮的 image bytes 可以直接加載到用于解碼的結構中。這種方法需要對 ImageProviders 的 byte loading pipeline 進行修改。這個過程也更快，因為它繞過了之前基于通道的加載器方法所需的一些額外的調度開銷。
其測試結果表明，image 加載時間提高了近 2 倍。
有關更多信息和遷移指南，可參閱 docs.flutter.dev 上的 Adding ImageProvider.loadBuffer 。
Stability
iOS 指針壓縮已禁用
雖然禁用指針壓縮會增加 Dart 對象消耗的內存，但它也增加了 Flutter 應用程序的非 Dart 部分的可用內存，因此總體上更可取。
API 改進
PlatformDispatcher.onError
在此版本中，你應該通過設置 PlatformDispatcher.onError 回調來捕獲所有錯誤和異常，而不是使用自定義 Zone。有關更多信息，可查看 docs.flutter.dev 上 更新的 Handling errors in Flutter 頁面。
FragmentProgram 更改
用 GLSL 編寫并列在應用程序 pubspec.yaml 文件的 Flutter manifest 中 shaders: 部分下的片段著色器現在將被自動編譯為引擎理解的正確格式，并作為資產與應用程序捆綁。由于這一變化，你將不再需要使用第三方工具手動編譯著色器。今后，你應該將 Engine 的 FragmentProgram API 視為只接受 Flutter 的構建工具的輸出。目前還沒有這種情況，但計劃在未來的版本中進行此更改，如 FragmentProgram API 支持改進設計文檔中所述。
有關此更改的示例，可參閱此 Flutter shader example。
Fractional translation
以前，Flutter Engine 總是將合成層與精確的像素邊界對齊，因為它提高了舊款（32 位）iPhone 的渲染性能。自從添加桌面支持以來，開發團隊注意到這導致了可觀察到的捕捉行為，因為屏幕設備像素比通常要低得多。例如，在低 DPR 屏幕上，可以看到工具提示在淡入時明顯捕捉。在確定這種像素捕捉對于新 iPhone 型號的性能不再必要后，其從 Flutter Engine 中刪除了這種像素捕捉以提高桌面保真度。此外，去除這種像素捕捉還可以穩定一些 golden image 測試，因為這些圖像經常會出現細微的渲染差異。
對支持平臺的更改
32 位 iOS 棄用
由于使用量減少，該版本是最后一個支持 32 位 iOS 設備和 iOS 版本 9 和 10 的版本。此更改影響 iPhone 4S、iPhone 5、iPhone 5C 以及第 2、3d 和第 4 代 iPad 設備。Flutter 3.3 穩定版本和所有后續穩定版本不再支持 32 位 iOS 設備以及 iOS 9 和 10 版本。這意味著基于 Flutter 3.3 及更高版本構建的應用程序將無法在這些設備上運行。
停用 macOS 10.11 和 10.12
在 2022 年第四季度穩定版本中，預計將放棄對 macOS 版本 10.11 和 10.12 的支持。這意味著在那之后針對穩定的 Flutter SDK 構建的應用程序將不再在這些版本上運行，并且 Flutter 支持的最低 macOS 版本將增加到 10.13 High Sierra。
Bitcode 棄用
在即將發布的 Xcode 14 版本中，iOS 應用程序提交將不再接受 Bitcode ，并且啟用了 bitcode 的項目將在此版本的 Xcode 中發出構建警告。鑒于此，Flutter 將在未來的穩定版本中放棄對 Bitcode 的支持。
默認情況下，Flutter 應用程序沒有啟用 Bitcode，因此其預計此舉不會影響許多開發人員。但是，如果你在 Xcode 項目中手動啟用了 bitcode，需在升級到 Xcode 14 后立即禁用它；可以通過打開 ios/Runner.xcworkspace 并將構建設置 **Enable Bitcode ** 設置為 No。Add-to-app 開發者也建議在 host Xcode 項目中禁用它。
可參閱 Apple 的文檔以了解更多信息。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
