flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
自研flutter3.27+dart3.6+getx实战抖音短视频+聊天+直播电商带货app商城应用。
flutter_dymall一款基于最新版Flutter3.27+Dart3.x+Getx+mediaKit原创实战研发抖音app带货商城项目。集成了直播+短视频+聊天三大功能模块。实现了类似抖音app首页全屏沉浸式联动左右滑动页面模块、上下滑动短视频效果。
使用技术
- 编辑器:vscode
- 技术框架:flutter3.27.1+Dart3.6.0
- 路由/状态管理:get: ^4.6.6
- 本地缓存服务:get_storage: ^2.1.1
- 瀑布流组件:flutter_staggered_grid_view^0.7.0
- 轮播图组件:card_swiper^3.0.1
- toast弹窗组件:shirne_dialog^4.8.3
- 视频套件:media_kit: ^1.1.11
- svg图片:flutter_svg: ^2.0.16
附上两篇往期基于flutter3.x实战项目案例。
实现了类似抖音app首页顶部状态栏+tab菜单栏+底部菜单栏联动效果,左右滑动切换页面,上下滑动切换短视频效果。
项目框架目录
目前flutter3_dymall直播app项目已经更新到我的原创作品集,有需要的可以去看看。
https://gf.bilibili.com/item/detail/1107796011
flutter3入口文件
/// 入口文件main.dart library; import 'dart:io'; 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 App()); } class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter3 DYMALL', debugShowCheckedModeBanner: false, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFFF9900)), useMaterial3: true, fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null ), home: const Layout(), // 初始化路由 initialRoute: Common.isLogin() ? '/' : '/login', // 路由页面 getPages: routePages, // 初始化弹窗key navigatorKey: MyDialog.navigatorKey, ); } }
flutter3沉浸式轮播图+tab吸附
如上图:轮播图延展到顶部状态栏,实现沉浸式效果。滚动页面tab栏固定吸附效果。
采用 CustomScrollView 滚动,搭配 SliverAppBar 实现顶部轮播图功能, SliverPersistentHeader 实现tab固定吸附效果。
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实现底部联动tabbar
底部菜单栏依旧采用bottomNavigationBar实现切换页面模块。使用getx管理全局状态联动背景色。
中间菜单则是使用Positioned组件实现自定义功能。
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.grey[50], body: pageList[pageCurrent], // 底部导航栏 bottomNavigationBar: Theme( data: ThemeData( splashColor: Colors.transparent, highlightColor: Colors.transparent, hoverColor: Colors.transparent, ), child: Obx(() { return Stack( children: [ Container( decoration: BoxDecoration( border: Border(top: BorderSide(color: Colors.black45, width: .1)), ), child: BottomNavigationBar( backgroundColor: bottomNavigationBgcolor(), fixedColor: FStyle.primaryColor, unselectedItemColor: bottomNavigationItemcolor(), type: BottomNavigationBarType.fixed, elevation: 1.0, unselectedFontSize: 12.0, selectedFontSize: 12.0, currentIndex: pageCurrent, items: [ ...navItems ], onTap: (index) { setState(() { pageCurrent = index; }); }, ), ), // 自定义导航栏中间按钮 Positioned( left: MediaQuery.of(context).size.width / 2 - 18, top: 0, bottom: 0, child: InkWell( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset('assets/images/logo.png', width: 36.0, isAntiAlias: true, fit: BoxFit.contain,), ], ), onTap: () { setState(() { pageCurrent = 2; }); }, ), ), ], ); }), ), ); }
flutter3实现抖音app首页联动tab效果
整个视频页分为顶部状态栏+导航栏Tab+内容区三部分。
实现左右滑动切换页面,上下滑动切换短视频联动效果。
@override Widget 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,页面滚动状态保持不变。
GlobalKey<ScaffoldState> 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<String> tabList = ['订阅', '逛逛', '直播', '团购', '短剧', '关注', '同城', '精选']; final tabModules = [ KeepAliveWrapper(child: SubscribeModule()), KeepAliveWrapper(child: BrowseModule()), KeepAliveWrapper(child: LiveModule()), KeepAliveWrapper(child: BuyingModule()), KeepAliveWrapper(child: DramaModule()), AttentionModule(), LocalModule(), RecommendModule() ];
class KeepAliveWrapper extends StatefulWidget { final Widget child; const KeepAliveWrapper({super.key, required this.child}); @override State<KeepAliveWrapper> createState() => _KeepAliveWrapperState(); } class _KeepAliveWrapperState extends State<KeepAliveWrapper> with AutomaticKeepAliveClientMixin { @override Widget build(BuildContext context) { super.build(context); return widget.child; } @override bool get wantKeepAlive => true; }
flutter3短视频直播模块
底部播放进度条支持拖拽、点击,显示播放进度tip。
@override Widget 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直播模块核心布局 Q:282310962 @override Widget 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( ... ), ), ], ), ), ], ), ], ), ], ); }, ), ], ), ), ], ), ); }
以上就是flutter3.27实战开发抖音app商城的一些知识分享,整个项目涉及到的知识点还是非常多的,限于篇幅就暂时分享到这里,希望以上分享对大家有些许帮助~
附上几个最新跨平台实战项目案例。
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe
Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目