Flutter 跨平台开发实战指南Flutter 是 Google 开源的跨平台 UI 框架一套代码跑 Android/iOS/Web/桌面也是 CSDN 移动开发板块的热门话题。前面写过微信小程序这篇讲 Flutter环境搭建、Dart 语言、Widget 体系、布局、状态管理、路由、网络、实战页面、发布。一、Flutter 是什么1.1 定位Flutter 用Dart语言 自绘渲染引擎Skia/Impeller一套代码多端运行。跨平台方案对比方案原理性能特点React Native桥接原生控件中生态大Flutter自绘渲染高60/120fpsUI 一致性强小程序微信容器中微信生态原生各自开发最高两套代码Flutter 的优势性能接近原生自绘引擎不经过桥UI 像素级一致各平台渲染结果相同开发效率高热重载一套代码覆盖移动 Web 桌面。二、Dart 语言速成2.1 环境搭建# 安装 Flutter SDK含 Dartflutter--versionflutter doctor# 检查环境# 创建项目flutter create my_appcdmy_app flutter run# 运行2.2 基础语法// 变量类型推断varname张三;int age25;double price99.9;bool isViptrue;finalcity北京;// 赋值一次constpi3.14;// 编译期常量// 字符串varmsg姓名:$name, 年龄:${age1};// 插值// 集合varlist[1,2,3];varmap{a:1,b:2};// 函数箭头函数简写intadd(int a,int b)ab;// 类classUser{Stringname;int age;User(this.name,this.age);// 构造简写Stringsay()我是$name;}voidmain(){varuUser(张三,25);print(u.say());}2.3 异步Future// Future 类似 PromiseFutureStringfetchData()async{awaitFuture.delayed(Duration(seconds:1));return数据;}voidmain()async{vardataawaitfetchData();print(data);}三、Widget 体系核心3.1 万物皆 WidgetFlutter 一切 UI 都是 Widget——文本、按钮、布局、甚至整个页面。StatelessWidget无状态静态内容 StatefulWidget有状态会变化 → State 管理3.2 StatelessWidgetimportpackage:flutter/material.dart;classGreetingextendsStatelessWidget{finalStringname;// 传入参数constGreeting({super.key,requiredthis.name});overrideWidgetbuild(BuildContextcontext){returnText(你好$name);}}3.3 StatefulWidget状态驱动 UIclassCounterextendsStatefulWidget{overrideStateCountercreateState()_CounterState();}class_CounterStateextendsStateCounter{int _count0;void_increment(){setState((){// 关键setState 触发重建_count;});}overrideWidgetbuild(BuildContextcontext){returnColumn(children:[Text(计数:$_count,style:TextStyle(fontSize:24)),ElevatedButton(onPressed:_increment,child:Text(加一),),],);}}核心状态变了调 setState → 触发 build 重建。四、布局 Widget4.1 常用布局// 垂直排列Column(mainAxisAlignment:MainAxisAlignment.center,// 主轴垂直crossAxisAlignment:CrossAxisAlignment.start,// 交叉轴children:[Text(A),Text(B)],)// 水平排列Row(mainAxisAlignment:MainAxisAlignment.spaceBetween,children:[Icon(Icons.home),Text(首页),Icon(Icons.person)],)// 层叠叠加Stack(children:[Container(color:Colors.blue,height:200),Positioned(top:10,right:10,child:Icon(Icons.star)),],)4.2 尺寸与间距// 容器尺寸、内边距、颜色、圆角Container(width:200,height:100,padding:EdgeInsets.all(16),margin:EdgeInsets.symmetric(horizontal:12),decoration:BoxDecoration(color:Colors.white,borderRadius:BorderRadius.circular(12),boxShadow:[BoxShadow(blurRadius:4,color:Colors.black12)],),child:Text(卡片),)// 自适应占满剩余空间Expanded(child:Container(color:Colors.red))// 类似 flex:14.3 列表// 静态列表ListView(children:[ListTile(title:Text(1)),ListTile(title:Text(2))],)// 动态列表builder 懒加载性能好ListView.builder(itemCount:items.length,itemBuilder:(context,index){returnListTile(title:Text(items[index].name),trailing:Text(¥${items[index].price}),onTap:()print(点击${index}),);},)五、路由与页面跳转// 命名路由推荐// main.dartMaterialApp(routes:{/:(context)HomePage(),/detail:(context)DetailPage(),},)// 跳转 传参Navigator.pushNamed(context,/detail,arguments:{id:1001});// 接收参数classDetailPageextendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){finalargsModalRoute.of(context)!.settings.argumentsasMap;returnScaffold(appBar:AppBar(title:Text(详情)),body:Center(child:Text(id ${args[id]})),);}}// 返回上一页Navigator.pop(context);六、状态管理6.1 方案对比方案特点适用setState内置组件内状态小组件Provider简单官方推荐入门中小项目RiverpodProvider 进化版中型Bloc事件驱动规范大型/复杂GetX全家桶极简快速开发6.2 Provider最常用入门flutter pubaddprovider// 1. 定义状态类classCartModelextendsChangeNotifier{int _count0;intgetcount_count;voidadd(){_count;notifyListeners();// 通知所有监听者刷新}}// 2. 顶层提供runApp(ChangeNotifierProvider(create:(_)CartModel(),child:MyApp(),),);// 3. 消费自动刷新classCartBadgeextendsStatelessWidget{overrideWidgetbuild(BuildContextcontext){finalcartcontext.watchCartModel();// 监听变化returnBadge(label:Text(${cart.count}),child:Icon(Icons.shopping_cart));}}// 只想触发动作不想监听context.readCartModel().add();核心理解ChangeNotifier存状态notifyListeners通知watch订阅刷新。七、网络请求flutter pubadddioimportpackage:dio/dio.dart;classApiService{finalDio_dioDio(BaseOptions(baseUrl:https://api.example.com,connectTimeout:Duration(seconds:10),));// 封装 GETFutureListProductgetProducts()async{finalrespawait_dio.get(/products,queryParameters:{page:1});finaldataresp.data[data][list]asList;returndata.map((e)Product.fromJson(e)).toList();}// 封装 POSTFuturevoidcreateOrder(MapString,dynamicorder)async{await_dio.post(/orders,data:order);}}// 模型类classProduct{finalint id;finalStringname;finaldouble price;Product({requiredthis.id,requiredthis.name,requiredthis.price});factoryProduct.fromJson(MapString,dynamicjson)Product(id:json[id],name:json[name],price:(json[price]asnum).toDouble(),);}页面里加载数据classProductListPageextendsStatefulWidget{overrideStateProductListPagecreateState()_ProductListPageState();}class_ProductListPageStateextendsStateProductListPage{final_apiApiService();lateFutureListProduct_future;overridevoidinitState(){super.initState();_future_api.getProducts();}overrideWidgetbuild(BuildContextcontext){returnFutureBuilderListProduct(future:_future,builder:(context,snapshot){if(snapshot.hasError)returnText(加载失败:${snapshot.error});if(!snapshot.hasData)returnCircularProgressIndicator();returnListView.builder(itemCount:snapshot.data!.length,itemBuilder:(context,i)ListTile(title:Text(snapshot.data![i].name),trailing:Text(¥${snapshot.data![i].price}),),);},);}}八、实战登录页 商品列表8.1 登录页classLoginPageextendsStatefulWidget{overrideStateLoginPagecreateState()_LoginPageState();}class_LoginPageStateextendsStateLoginPage{final_usernameCtrlTextEditingController();final_passwordCtrlTextEditingController();bool _loadingfalse;Futurevoid_login()async{setState(()_loadingtrue);try{// 调用登录接口awaitApiService().login(_usernameCtrl.text,_passwordCtrl.text);if(!mounted)return;Navigator.pushReplacementNamed(context,/home);}catch(e){ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:Text(登录失败:$e)),);}finally{setState(()_loadingfalse);}}overrideWidgetbuild(BuildContextcontext){returnScaffold(body:Padding(padding:EdgeInsets.all(24),child:Column(mainAxisAlignment:MainAxisAlignment.center,children:[TextField(controller:_usernameCtrl,decoration:InputDecoration(labelText:用户名),),SizedBox(height:16),TextField(controller:_passwordCtrl,obscureText:true,decoration:InputDecoration(labelText:密码),),SizedBox(height:24),ElevatedButton(onPressed:_loading?null:_login,child:_loading?CircularProgressIndicator(strokeWidth:2):Text(登录),),],),),);}}8.2 底部导航TabBarclassHomePageextendsStatefulWidget{overrideStateHomePagecreateState()_HomePageState();}class_HomePageStateextendsStateHomePage{int _index0;overrideWidgetbuild(BuildContextcontext){returnScaffold(body:IndexedStack(index:_index,children:[ProductListPage(),CartPage(),MinePage()],),bottomNavigationBar:BottomNavigationBar(currentIndex:_index,onTap:(i)setState(()_indexi),items:[BottomNavigationBarItem(icon:Icon(Icons.home),label:首页),BottomNavigationBarItem(icon:Icon(Icons.cart),label:购物车),BottomNavigationBarItem(icon:Icon(Icons.person),label:我的),],),);}}九、构建与发布# Android APKflutter build apk--release# 产物build/app/outputs/flutter-apk/app-release.apk# iOS需要 Macflutter build ios--release# Webflutter build web# 多端一起flutter build上线注意App 图标/启动图要配置发布前跑flutter analyze静态检查Android 上架要签名key.properties。十、常见坑速查现象原因解决setState 不刷新状态没经过 setState统一走 setState列表卡顿全量 ListView用 ListView.builder热重载没生效改了 pubspec重启或 flutter pub get中文乱码字体缺失配中文字体页面空转Future 没触发initState 里初始化 future键盘顶起布局没处理resizeToAvoidBottomInset打包慢首次构建后续增量构建状态刷新全局Provider 范围太大拆多个 Provider本章小结Flutter 的核心心智万物皆 Widget setState 驱动重建。学习主线Dart 语法 → 布局 WidgetColumn/Row/Container/ListView→ 状态管理Provider→ 网络Dio→ 发布。跨平台选 Flutter 的三个理由性能接近原生、UI 一致、一套代码多端。下一篇讲浏览器工作原理与前端性能优化——前端进阶的压轴话题。全文完