最新版Flutter3.38+Dart3.10仿写抖音APP直播+短视频+聊天应用程序
25年12月爆肝flutter3.38+getx纯手搓集成直播+聊天+短视频app商城系统。flutter3_douyin：基于最新款跨平台框架flutter3.38.2+dart3.10+getx+media_kit开发高性能仿抖音app界面短视频+直播+聊天app软件。实现抖音短视频页面上下滑动小视频/左右滑动页面模块、直播间进场/礼物侧边滑入动效。
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205221017582-1229875846.png
技术栈
[*]编辑器：VScode
[*]技术框架：flutter3.38.2+Dart3.10.0
[*]路由状态管理：get: ^4.7.3
[*]本地缓存服务：get_storage: ^2.1.1
[*]瀑布流组件：flutter_staggered_grid_view^0.7.0
[*]轮播图组件：card_swiper^3.0.1
[*]toast弹窗组件：shirne_dialog^4.8.6
[*]视频套件：media_kit: ^1.2.3
[*]svg图片：flutter_svg: ^2.2.3
[*]缓存网络图片：cached_network_image: ^3.4.1
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205221613285-1947388303.png
附上几个最新Flutter3.x项目实例。
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205222431253-753327423.gif
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205223243001-152906540.gif
视频页面实现了类似抖音app首页全屏沉浸式顶部状态栏+tab菜单栏+底部菜单栏颜色联动效果，左右滑动切换页面模块，上下滑动切换短视频效果。
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205223535263-1376639761.gif
项目框架结构
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205223620277-344182513.png
flutter3.38-douyin短视频直播app项目已经同步到我的原创作品集。
flutter3.38+dart3.10+getx实战直播+聊天+短视频App
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205224252573-1701737639.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205224309183-2117804668.gif
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205224344656-558576387.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205224406264-1549948270.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205224426977-394734435.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205224442924-1375122050.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205224458735-1731048831.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205224522105-630948365.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225247225-225423314.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225300146-1382992729.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225347614-1763584123.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225400127-1446614509.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225416960-1157246977.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225329030-771303596.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225500801-1302505758.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225539557-2024464638.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225856127-467375293.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230153620-1618011456.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230226075-1469438464.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230244849-1045581889.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230300922-690791105.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230318883-419379298.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230403278-2138952090.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230444940-819937762.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230503270-27378841.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230520836-2097850671.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230533153-488233515.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230559588-414878034.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230612099-1277327060.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230625631-85308353.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230644296-613295587.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230657870-886091019.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230716628-1003180454.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230744824-1033282614.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230759595-1638052574.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205230811806-1509837644.png
Flutter3项目入口
import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:get/get.dart';import 'package:get_storage/get_storage.dart';import 'package:media_kit/media_kit.dart';import 'package:shirne_dialog/shirne_dialog.dart';import 'utils/common.dart';// 引入布局页面import 'layouts/index.dart';// 引入路由配置import 'router/index.dart';void main() async {// 初始化get_storage存储await GetStorage.init();// 初始化media_kit视频套件WidgetsFlutterBinding.ensureInitialized();MediaKit.ensureInitialized();runApp(const MyApp());}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) { // 是否windows平台 bool isWindows() { if (kIsWeb) return false; final platform = Theme.of(context).platform; return platform == TargetPlatform.windows; } return GetMaterialApp( title: 'Flutter3 DYMALL', debugShowCheckedModeBanner: false, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFFF2C55)), useMaterial3: true, // 修复windows下字体不一致情况 - Web 平台特殊处理 // fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null fontFamily: isWindows() ? 'Microsoft YaHei' : null ), home: const Layout(), // 初始化路由 initialRoute: Common.isLogin() ? '/' : '/login', // 路由页面 getPages: routePages, // 初始化弹窗key navigatorKey: MyDialog.navigatorKey, );}}Flutter3全屏沉浸式轮播图/Tab吸附菜单
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205222045866-1795191105.gif
轮播图拉伸到顶部状态栏，实现全屏沉浸式效果。滚动页面tab栏固定吸附效果。
使用 CustomScrollView 组件滚动，配合 SliverAppBar 实现顶部灯箱图功能， SliverPersistentHeader 组件实现Tab菜单固定吸附效果。
return Scaffold(backgroundColor: Colors.grey,body: ScrollConfiguration( behavior: CustomScrollBehavior().copyWith(scrollbars: false), child: CustomScrollView( scrollBehavior: CustomScrollBehavior().copyWith(scrollbars: false), controller: scrollController, slivers: [ SliverAppBar( backgroundColor: Colors.transparent, foregroundColor: Colors.white, pinned: true, expandedHeight: 200.0, titleSpacing: 10.0, // 搜索框(高斯模糊效果) title: ClipRRect( borderRadius: BorderRadius.circular(30.0), child: BackdropFilter( filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), child: Container( ... ), ), ), actions: [ IconButton(icon: Icon(Icons.shopping_cart_outlined), onPressed: () {},), ], // 自定义伸缩区域 flexibleSpace: Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color(0xFFFF5000), Color(0xFFfcaec4) ] ) ), child: FlexibleSpaceBar( background: Swiper.children( pagination: SwiperPagination( builder: DotSwiperPaginationBuilder( color: Colors.white70, activeColor: Colors.white, ) ), indicatorLayout: PageIndicatorLayout.SCALE, children: [ Image.network('https://m.360buyimg.com/babel/jfs/t20271217/224114/35/38178/150060/6760d559Fd654f946/968c156726b6e822.png',), Image.network('https://m.360buyimg.com/babel/jfs/t20280117/88832/5/48468/139826/6789cbcfF4e0b2a3d/9dc54355b6f65c40.jpg',), Image.network('https://m.360buyimg.com/babel/jfs/t20280108/255505/29/10540/137372/677ddbc1F6cdbbed0/bc477fadedef22a8.jpg',), ], ), ), ), ), ... // tabbar菜单吸附 SliverPersistentHeader( pinned: true, delegate: CustomStickyHeader( child: PreferredSize( preferredSize: Size.fromHeight(45.0), child: Container( ... ), ), ), ), // 瀑布流列表 ... ], ),),// 返回顶部floatingActionButton: Backtop(controller: scrollController, offset: scrollOffset),);Flutter3实现抖音首页Tab菜单联动
视频页面分为顶部状态栏+Tab固定菜单栏+内容区域三部分。
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205232043521-268270282.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205232120121-823236323.png
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205225400127-1446614509.png
实现类似抖音上下滑动切换短视频、左右滑动切换页面模块效果。
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205232946737-697311119.png
@overrideWidget build(BuildContext context) {return Scaffold( key: scaffoldKey, extendBodyBehindAppBar: true, appBar: AppBar( forceMaterialTransparency: true, backgroundColor: .contains(videoModuleController.videoTabIndex.value) ? null : Colors.transparent, foregroundColor: .contains(videoModuleController.videoTabIndex.value) ? Colors.black : Colors.white, titleSpacing: 1.0, leading: Obx(() => IconButton( icon: Badge.count( backgroundColor: Colors.red, count: 6, child: Icon(Icons.sort_rounded, color: tabColor(),), ), onPressed: () { // 自定义打开右侧drawer scaffoldKey.currentState?.openDrawer(); }, )), title: Obx(() { return ScrollConfiguration( behavior: CustomScrollBehavior().copyWith(scrollbars: false), child: TabBar( ... ), ); }), actions: [ Obx(() => IconButton(icon: Icon(Icons.search_rounded, color: tabColor(),), onPressed: () {},),), ], ), body: ScrollConfiguration( behavior: CustomScrollBehavior().copyWith(scrollbars: false), child: PageView( controller: pageController, onPageChanged: (index) { videoModuleController.updateVideoTabIndex(index); setState(() { tabController.animateTo(index, duration: Duration(milliseconds: 200), curve: Curves.easeInOut); }); }, children: [ ...tabModules ], ), ), // 侧边栏 drawer: Drawer( shape: RoundedRectangleBorder(borderRadius: BorderRadius.horizontal(right: Radius.circular(15.0))), clipBehavior: Clip.antiAlias, width: 300, child: Container( ... ), ),);}为了实现长列表页面切换Tab使得滚动状态保持不变，滚动页面开启缓存功能。
GlobalKey scaffoldKey = GlobalKey();VideoModuleController videoModuleController = Get.put(VideoModuleController());late TabController tabController = TabController(initialIndex: videoModuleController.videoTabIndex.value, length: tabList.length, vsync: this);late PageController pageController = PageController(initialPage: videoModuleController.videoTabIndex.value, viewportFraction: 1.0);List tabList = ['订阅', '逛逛', '直播', '团购', '短剧', '关注', '同城', '精选'];final tabModules = ;https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205232839995-542313656.png
class KeepAliveWrapper extends StatefulWidget {final Widget child;const KeepAliveWrapper({super.key, required this.child});@overrideState createState() => _KeepAliveWrapperState();}class _KeepAliveWrapperState extends State with AutomaticKeepAliveClientMixin {@overrideWidget build(BuildContext context) { super.build(context); return widget.child;}@overridebool get wantKeepAlive => true;}Flutter3短视频模板
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205232043521-268270282.png
如上图：短视频页面底部播放进度条支持拖拽/点击，显示视频时长。
@overrideWidget build(BuildContext context) {return Container( color: Colors.black, child: Column( children: [ Expanded( child: Stack( children: [ PageView.builder( scrollDirection: Axis.vertical, controller: pageController, onPageChanged: (index) async { // 更新播放索引 videoModuleController.updateVideoPlayIndex(index); setState(() { // 重置slider参数 sliderValue = 0.0; sliderDraging = false; position = Duration.zero; duration = Duration.zero; }); player.stop(); await player.open(Media(videoList['src'])); }, itemCount: videoList.length, itemBuilder: (context, index) { return Stack( children: [ // 视频区域 Positioned( top: 0, left: 0, right: 0, bottom: 0, child: GestureDetector( child: Stack( children: [ // 短视频插件 Visibility( visible: videoModuleController.videoPlayIndex.value == index && position > Duration.zero, child: Video( controller: videoController, fit: BoxFit.cover, ), ), // 播放/暂停按钮 StreamBuilder( stream: player.stream.playing, builder: (context, playing) { return Visibility( visible: playing.data == false, child: Center( child: IconButton( padding: EdgeInsets.zero, onPressed: () { player.playOrPause(); }, icon: Icon( playing.data == true ? Icons.pause : Icons.play_arrow_rounded, color: Colors.white60, size: 80, ), style: ButtonStyle( backgroundColor: WidgetStateProperty.all(Colors.black.withAlpha(15)) ), ), ), ); }, ), ], ), onTap: () { player.playOrPause(); }, ), ), // 右侧操作栏 Positioned( bottom: 15.0, right: 6.0, child: Column( spacing: 15.0, children: [ ... ], ), ), // 底部信息区域 Positioned( bottom: 15.0, left: 10.0, right: 80.0, child: Column( ... ), ), // mini播放进度条 Positioned( bottom: 0.0, left: 6.0, right: 6.0, child: Visibility( visible: videoModuleController.videoPlayIndex.value == index && position > Duration.zero, child: Listener( child: SliderTheme( data: SliderThemeData( trackHeight: sliderDraging ? 6.0 : 2.0, thumbShape: RoundSliderThumbShape(enabledThumbRadius: 4.0), // 调整滑块的大小 overlayShape: RoundSliderOverlayShape(overlayRadius: 0), // 去掉Slider默认上下边距间隙 inactiveTrackColor: Colors.white24, // 设置非活动进度条的颜色 activeTrackColor: Colors.white, // 设置活动进度条的颜色 thumbColor: Colors.white, // 设置滑块的颜色 overlayColor: Colors.transparent, // 设置滑块覆盖层的颜色 ), child: Slider( value: sliderValue, onChanged: (value) async { // debugPrint('当前视频播放时间$value'); setState(() { sliderValue = value; }); // 跳转播放时间 await player.seek(duration * value.clamp(0.0, 1.0)); }, onChangeEnd: (value) async { setState(() { sliderDraging = false; }); // 继续播放 if(!player.state.playing) { await player.play(); } }, ), ), onPointerMove: (e) { setState(() { sliderDraging = true; }); }, ), ), ), // 播放位置指示器 Positioned( bottom: 100.0, left: 10.0, right: 10.0, child: Visibility( visible: sliderDraging, child: DefaultTextStyle( style: TextStyle(color: Colors.white54, fontSize: 18.0, fontFamily: 'Arial'), child: Row( mainAxisAlignment: MainAxisAlignment.center, spacing: 8.0, children: [ Text(position.label(reference: duration), style: TextStyle(color: Colors.white)), Text('/', style: TextStyle(fontSize: 14.0)), Text(duration.label(reference: duration)), ], ), ) ), ), ], ); }, ), /// 固定层 // 红包广告 Ads(), ], ), ), ], ),);}Flutter3直播模板
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205233409115-454373480.png
如上图：直播页面包含顶部信息、直播礼物左侧滑入、进场动效右侧滑入、弹幕消息、右侧讲解商品、底部操作栏等功能。
https://img2024.cnblogs.com/blog/1289798/202512/1289798-20251205233545383-1602000963.png
// flutter3直播模块布局片段Q：282310962@overrideWidget build(BuildContext context) {return Scaffold( backgroundColor: Colors.black, extendBodyBehindAppBar: true, appBar: AppBar( forceMaterialTransparency: true, backgroundColor: Colors.black, foregroundColor: Colors.white, toolbarHeight: 0, ), body: Column( children: [ Expanded( child: Stack( children: [ PageView.builder( scrollBehavior: CustomScrollBehavior().copyWith(scrollbars: false), scrollDirection: Axis.vertical, controller: pageVerticalController, onPageChanged: (index) async { setState(() { liveIndex = index; }); player.stop(); await player.open(Media(liveJson['src'])); }, itemCount: liveJson.length, itemBuilder: (context, index) { return Stack( children: [ // 视频区域 Positioned( ... ), /// 水平滚动模块(清屏/浮层) PageView( scrollDirection: Axis.horizontal, controller: pageHorizontalController, onPageChanged: (index) { // ... }, children: [ // 直播清屏 Container( ... ), // 直播浮层 Stack( children: [ // 顶部区域 Positioned( top: MediaQuery.of(context).padding.top + 7, left: 10.0, right: 0, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 直播间头像 Container( ... ), // 排名统计 Container( ... ), // 红包活动 Container( ... ), ], ), ), // 底部区域 Positioned( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 商品购买动效 Container( ... ), // 送礼物动效 AnimationLiveGift( giftQueryList: [ {'label': '小心心', 'gift': 'assets/images/gift/gift1.png', 'user': 'Jack', 'avatar': 'assets/images/avatar/img02.jpg', 'num': 12}, {'label': '棒棒糖', 'gift': 'assets/images/gift/gift2.png', 'user': 'Andy', 'avatar': 'assets/images/avatar/img06.jpg', 'num': 36}, {'label': '大啤酒', 'gift': 'assets/images/gift/gift3.png', 'user': '一条咸鱼', 'avatar': 'assets/images/avatar/img01.jpg', 'num': 162}, ... ], ), // 加入直播间动效 AnimationLiveJoin( joinQueryList: [ {'avatar': 'assets/images/logo.png', 'name': 'andy'}, {'avatar': 'assets/images/logo.png', 'name': 'jack'}, ... ], ), // 直播弹幕+商品讲解 Container( margin: EdgeInsets.only(top: 7.0), height: 200.0, child: Row( ... ), ), // 底部工具栏 Container( margin: const EdgeInsets.only(top: 7.0), child: Row( ... ), ), ], ), ), ], ), ], ), ], ); }, ), ], ), ), ], ),);}Okay，综上就是flutter3.38+dart3.10搭建短视频/直播/聊天app项目的一些知识分享，希望对大家有所帮助！
附上几个最新实例项目
Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板
Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统
Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
最新版uni-app+vue3+uv-ui跨端仿携程酒店预订模板【H5+小程序+App端】
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
vite7-webos网页版os管理|Vue3+Vite7+ArcoDesign搭建pc端os后台系统
https://img2024.cnblogs.com/blog/1289798/202509/1289798-20250913081806584-87321175.gif
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 谢谢楼主提供！ 感谢发布原创作品，程序园因你更精彩
页:
[1]