最新版Flutter3.38+Dart3.10仿写抖音APP直播+短视频+聊天应用程序

25年12月爆肝flutter3.38+getx纯手搓集成直播+聊天+短视频app商城系统。
flutter3_douyin：基于最新款跨平台框架flutter3.38.2+dart3.10+getx+media_kit开发高性能仿抖音app界面短视频+直播+聊天app软件。实现抖音短视频页面上下滑动小视频/左右滑动页面模块、直播间进场/礼物侧边滑入动效。

技术栈

• 编辑器：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
  

附上几个最新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助手

视频页面实现了类似抖音app首页全屏沉浸式顶部状态栏+tab菜单栏+底部菜单栏颜色联动效果，左右滑动切换页面模块，上下滑动切换短视频效果。

项目框架结构

flutter3.38-douyin短视频直播app项目已经同步到我的原创作品集。

flutter3.38+dart3.10+getx实战直播+聊天+短视频App

Flutter3项目入口

1. 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});  @override  Widget 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吸附菜单

轮播图拉伸到顶部状态栏，实现全屏沉浸式效果。滚动页面tab栏固定吸附效果。
使用 CustomScrollView 组件滚动，配合 SliverAppBar 实现顶部灯箱图功能， SliverPersistentHeader 组件实现Tab菜单固定吸附效果。

1. return Scaffold(  backgroundColor: Colors.grey[50],  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固定菜单栏+内容区域三部分。

实现类似抖音上下滑动切换短视频、左右滑动切换页面模块效果。

1. @overrideWidget build(BuildContext context) {  return Scaffold(    key: scaffoldKey,    extendBodyBehindAppBar: true,    appBar: AppBar(      forceMaterialTransparency: true,      backgroundColor: [0, 1, 4, 5].contains(videoModuleController.videoTabIndex.value) ? null : Colors.transparent,      foregroundColor: [0, 1, 4, 5].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使得滚动状态保持不变，滚动页面开启缓存功能。

1. 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 = [  KeepAliveWrapper(child: SubscribeModule()),  KeepAliveWrapper(child: BrowseModule()),  KeepAliveWrapper(child: LiveModule()),  KeepAliveWrapper(child: BuyingModule()),  KeepAliveWrapper(child: DramaModule()),  AttentionModule(),  LocalModule(),  RecommendModule()];

复制代码

1. class KeepAliveWrapper extends StatefulWidget {  final Widget child;  const KeepAliveWrapper({super.key, required this.child});  @override  State createState() => _KeepAliveWrapperState();}class _KeepAliveWrapperState extends State with AutomaticKeepAliveClientMixin {  @override  Widget build(BuildContext context) {    super.build(context);    return widget.child;  }  @override  bool get wantKeepAlive => true;}

复制代码

Flutter3短视频模板

如上图：短视频页面底部播放进度条支持拖拽/点击，显示视频时长。

1. @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[index]['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直播模板

如上图：直播页面包含顶部信息、直播礼物左侧滑入、进场动效右侧滑入、弹幕消息、右侧讲解商品、底部操作栏等功能。

1. // 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[index]['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后台系统

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！