原创flutter3.27实战抖音app商城|flutter3.x+getX仿抖音短视频+直播电商+聊天实例

最新推荐文章于 2025-03-24 09:44:35 发布
置顶 最新推荐文章于 2025-03-24 09:44:35 发布
阅读量2k 收藏 19
点赞数 54
分类专栏： flutter3+dart3 flutter/dart实例 文章标签： flutter3短视频 flutter3仿抖音app flutter3.27直播电商 flutter3仿抖音商城 flutter3直播商城 flutter3直播app flutter3抖音直播带货
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanxinyun1990/article/details/145471476
版权

flutter3_douyin_mall跨平台实战抖音App电商商城项目。

原创爆肝新作Flutter3.27.1+Dart3.6+Getx+mediaKit高仿抖音app电商商城应用。整合了短视频+直播带货+聊天功能模块。实现抖音app首页tab左右、上下全屏沉浸式丝滑切换联动效果。

在这里插入图片描述
在这里插入图片描述

技术栈

  • 编码工具：VScode
  • 框架技术：Flutter3.27+Dart3.6
  • 路由/状态管理：Get: ^4.6.6
  • 缓存服务：get_storage: ^2.1.1
  • 视频套件：media_kit: ^1.1.11
  • 轮播图组件：card_swiper^3.0.1
  • 弹窗组件：shirne_dialog^4.8.3
  • 瀑布流组件：flutter_staggered_grid_view^0.7.0

在这里插入图片描述
在这里插入图片描述
flutter3-dymall实现抖音app首页左右/上下联动效果。

在这里插入图片描述
在这里插入图片描述

项目框架结构

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
之前有分享两篇flutter3实战聊天项目，感兴趣的可以看看。
https://blog.csdn.net/yanxinyun1990/article/details/136051099
https://blog.csdn.net/yanxinyun1990/article/details/136410049

Flutter3入口配置

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实现公共底部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自定义全屏式轮播图+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仿抖音首页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实现短视频直播功能

在这里插入图片描述
底部视频mini进度条使用Slider组件实现功能。支持拖拽、点击到指定时间点。

@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(
                                        ...
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  );
                },
              ),
            ],
          ),
        ),
      ],
    ),
  );
}

项目中增加了聊天消息功能模块。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
Oky，基于flutter3.27+dart3.6实战开发抖音app商城项目就先分享到这里。希望对小伙伴们有些些帮助！

附上几个最新实战项目。

在这里插入图片描述

【Flutter应用】Flutter精仿抖音开源
AAjjx的博客
05-22 1556
flutter_tiktok Flutter精仿抖音开源了，左滑搜索，右滑个人中心，上下滑动刷视频，双击点赞冒爱心，无敌精仿，感谢点Star。 应用截图 实现功能 上下刷视频，视频会自动加载封面 左右滑动去搜索与个人中心 双击冒爱心点赞 看评论 切换底部Tabbar 因为技术大家聚在一堂 因为交流才会帮助我们解决很多问题 这是一个我的iOS交流群：651612063 进群密码111，不管你是小白还是大牛欢迎入驻 ，分享BAT,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！ 项目结构 依赖： 加载
【Flutter应用】Flutter精仿抖音开源，app架构
m0_66264881的博客
02-03 2533
./lib ├── main.dart ├── mock │ └── video.dart # 假数据 ├── other │ └── bottomSheet.dart # 修改了系统BottomSheet的高度 ├── pages │ ├── cameraPage.dart # 拍摄页（没有实际功能） │ ├── followPage.dart # 略 │ ├── homePage.dart # 主页面，包含tikTokScaffold的实际应用功能 │ ├── msgDetai
【拿走不谢】flutter3.19仿抖音实战短视频源码
flutter开发app的博客
04-20 2527
flutter3.19.x仿抖音教你开发商业级APP接入字节跳动穿山甲广告//穿山甲广告 Android appid 必填//穿山甲广告 ios appid 必填//使用TextureView控件播放视频,默认为SurfaceView,当有SurfaceView冲突的场景，可以使用TextureView 选填//appname 必填//是否允许sdk展示通知栏提示 选填//是否在锁屏场景支持展示广告落地页 选填//测试阶段打开，可以通过日志排查问题，上线时去除该调用 选太难。
flutter-实现瀑布流布局及下拉刷新上拉加载更多
最新发布
鹏多多的博客
03-24 1302
通过这段代码，我们成功地在 Flutter 中实现了一个带有瀑布流布局、下拉刷新和上拉加载更多功能的页面。从引入必要的库，到定义组件、管理状态以及构建复杂的 UI 结构，每一步都紧密配合。
开源Flutter3.19仿抖音实战(开发自己的抖音APP)
flutter开发app的博客
05-04 2155
开源Flutter3.19仿抖音实战(开发自己的抖音APP)，最近有空的时候用flutter3做了一个抖音的项目，方便大家学习，提供源码，有操作思路。原创开发基于flutter3.19.5+dart3.3.3+getx等技术开发仿抖音app实战项目。实现了类似抖音整屏丝滑式上下滑动视频、左右滑动切换页面模块
Flutter 中使用 PageView 实现仿抖音滑动切换页面及轮播图效果
m0_57836225的博客
03-11 767
PageView是 Flutter 框架中用于实现页面滑动切换的组件，它继承自ScrollView，可以在水平或垂直方向上滑动显示多个子页面。PageView提供了流畅的滑动体验，并且支持各种手势操作，如滑动、缩放等。在使用PageViewchildren：用于定义PageView中的子页面列表，可以是任意的 Flutter 组件。controller类型，用于控制PageView的滚动位置、动画等。可以通过它实现手动切换页面、监听页面滚动等功能。
Flutter 仿抖音、豆瓣、知乎、番茄小说的评论弹窗开发实践
pengbo6665631的博客
07-05 5149
最近用flutter做了一个评论弹窗的功能，本来以为很简单的烂大街的一个功能，结果却遇到了不少的问题，而且这些问题我觉得很有意义，以至于我觉得我如果分享出来可能会对其他人很有帮助。
基于Flutter 3.x 实战跨平台仿抖音App混合开发
09-16
分享课程——基于Flutter 3.x 实战跨平台仿抖音App混合开发，完整版视频课程下载。 Flutter 3已发布，跨平台支持性更好。本课程会手把手教你用简单、高效且通用的方式，将原生项目迁移成一个Flutter/原生混合开发的...
Flutter 3.x 实战跨平台仿抖音App课程
09-16
Flutter 3.x 实战跨平台仿抖音App课程是针对移动端开发者设计的一门深入学习课程，主要聚焦于使用Flutter 3.x框架开发跨平台应用程序，尤其是模仿抖音App的功能和用户体验。Flutter，由Google开发，是一种开源的UI...
2023年最新Flutter+Getx仿小米商城项目实战视频教程-V3版
luckysuny的博客
11-24 2262
透明导航 、浮动导航、导航动画、六格验证码、Photo-view类似朋友圈图片预览、3、 Flutter Android中使用生物识别认证的一些配置。2、 Flutter中使用socket.io和服务器实现通讯。3、 Flutter中使用socket.io和服务器实现通讯。直播流程（推流、拉流）、借助腾讯云直播、自己搭建直播服务器、4、 Flutter Ios中使用生物识别认证的一些配置。二、 AP模式下Flutter和Wifi模块的数据穿透演示。、Flutter 事件驱动、Flutter本地存储。
FlutterMusicPlayer基于Flutter的materialdesign音乐播放器
08-10
Flutter Music Player - 第一个开源基于Flutter的material design音乐播放器，提供音频插件来播放本地音乐文件。
最新高仿抖音短视频APP源码 原生java双端源码
07-12
"高仿抖音短视频APP"表示源码的目标是模仿抖音APP的用户体验和功能，抖音是一款流行的短视频分享平台。"原生java双端源码"意味着源码是使用Java语言编写的，并且支持两个主要的平台，通常指的是Android和iOS。 ...
flutter3.19.x+getx仿抖音教你开发商业级APP
flutter开发app的博客
04-19 862
flutter3.19.x仿抖音教你开发商业级APP使用 bottomNavigationBar 组件实现底部导航页面模块切换。
flutter 仿抖音的进场特效效果
weixin_44911775的博客
04-08 612
3.添加数据的时候就调开始执行动画；一个动画执行完后就开始调下一个的开始执行动画。5.因为是多个动画，使用到TickerProviderStateMixin。4.如果动画正在播放，就不允许调开始执行动画，防止上面两个地方让队列混乱。1.这个要通过eventBus通知，收到通知就往列表添加数据。2.这个要做一个队列，显示完一个（删除）再显示下一个。从右边平移到最左边，停留两秒再向左移出屏幕。6.创建两个控制器和动画。
flutter3_douyin：基于flutter3+dart3短视频直播实例|Flutter3.x仿抖音
码农ICoding
03-24 3750
uni-app+vue3+vk-uview多端直播商城项目。
Flutter 仿抖音 TikTok 上下滑动 播放视频
panghaha12138的博客
02-02 2597
Flutter 仿抖音 TikTok 上下滑动 播放视频UI框架，视频播放使用 video_player。1.上下滑动自动播放切换视频，loading 封面图占位。2.全屏播放横竖屏切换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoyan_2018

你的鼓励将是我持续作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值