9.3 多端支持

Flutter 支持 Android、iOS、Web、桌面Windows/macOS/Linux多个平台从同一代码库构建。了解各端差异与适配策略是多端开发的关键。一、Flutter Desktop1.1 启用桌面支持flutter config --enable-windows-desktop flutter config --enable-macos-desktop flutter config --enable-linux-desktop flutter run-dmacos flutter run-dwindows flutter build macos--release1.2 Window Manager窗口管理dependencies:window_manager:^0.3.9importpackage:window_manager/window_manager.dart;voidmain()async{WidgetsFlutterBinding.ensureInitialized();awaitwindowManager.ensureInitialized();// 配置窗口awaitwindowManager.waitUntilReadyToShow(constWindowOptions(size:Size(1200,800),minimumSize:Size(800,600),center:true,backgroundColor:Colors.transparent,skipTaskbar:false,titleBarStyle:TitleBarStyle.hidden,// 隐藏原生标题栏),()async{awaitwindowManager.show();awaitwindowManager.focus();},);runApp(constDesktopApp());}// 自定义标题栏classCustomTitleBarextendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){returnGestureDetector(onPanStart:(_)windowManager.startDragging(),// 拖拽移动窗口child:Container(height:40,color:Theme.of(context).colorScheme.surface,child:Row(children:[constExpanded(child:Text(My Desktop App)),// 窗口控制按钮WindowControlButton(icon:Icons.minimize,onTap:windowManager.minimize),WindowControlButton(icon:Icons.crop_square,onTap:windowManager.maximize),WindowControlButton(icon:Icons.close,onTap:windowManager.close),],),),);}}1.3 平台自适应布局classAdaptiveLayoutextendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){if(Platform.isWindows||Platform.isMacOS||Platform.isLinux){// 桌面布局侧边栏 主内容区returnRow(children:[SizedBox(width:250,child:DesktopSidebar()),Expanded(child:MainContent()),],);}// 移动端布局returnMobileLayout();}}二、Flutter Web2.1 启用 Web 支持flutter config --enable-web flutter run-dchrome flutter build web--release2.2 Web 渲染器选择# Canvaskit 渲染基于 WASM像素级一致包体较大flutter build web --web-renderer canvaskit# HTML 渲染基于浏览器 API包体小兼容性好flutter build web --web-renderer html# Auto手机 html桌面 canvaskitflutter build web --web-renderer auto2.3 Web 特有适配// 检测平台importpackage:flutter/foundation.dartshowkIsWeb;importdart:ioshowPlatform;boolgetisWebkIsWeb;boolgetisMobile!kIsWeb(Platform.isAndroid||Platform.isIOS);boolgetisDesktop!kIsWeb(Platform.isWindows||Platform.isMacOS||Platform.isLinux);// Web URL 策略voidmain(){usePathUrlStrategy();// 使用路径 URL去掉 #runApp(constMyApp());}// SEO 元标签web/index.html// meta namedescription contentMy Flutter Web App// meta propertyog:title contentMy App三、平台视图PlatformView3.1 AndroidView将 Android 原生 View 嵌入 Flutter// 使用 AndroidView 嵌入 Google MapsWidgetbuild(BuildContextcontext){returnPlatform.isAndroid?AndroidView(viewType:google_map_view,onPlatformViewCreated:_onViewCreated,layoutDirection:TextDirection.ltr,):constText(Android only);}// Android 侧注册 View Factory// FlutterActivity 中flutterEngine.platformViewsController.registry.registerViewFactory(google_map_view,{id-GoogleMapView(context,id)})3.2 UiKitViewiOSWidgetbuild(BuildContextcontext){returnPlatform.isIOS?UiKitView(viewType:ios_map_view,onPlatformViewCreated:_onViewCreated,):constSizedBox.shrink();}注意PlatformView 性能开销较大仅在无 Flutter 替代方案时使用。四、平台检测工具classPlatformUtils{staticboolgetisDesktop!kIsWeb(Platform.isWindows||Platform.isMacOS||Platform.isLinux);staticboolgetisMobile!kIsWeb(Platform.isAndroid||Platform.isIOS);staticboolgetisWebkIsWeb;// 屏幕类型staticScreenSizegetScreenSize(BuildContextcontext){finalwidthMediaQuery.of(context).size.width;if(width600)returnScreenSize.compact;// 手机if(width1200)returnScreenSize.medium;// 平板returnScreenSize.expanded;// 桌面}}enumScreenSize{compact,medium,expanded}小结平台状态主要适配点Android / iOS✅ 稳定原生特性调用Web✅ 稳定URL 策略、SEO、渲染器选择macOS✅ 稳定窗口管理、菜单栏Windows✅ 稳定窗口管理、系统托盘Linux✅ 稳定GTK 适配 下一章十、测试与发布