flutter3_douyin：基于flutter3+dart3短视频直播实例|Flutter3.x仿抖音

最新推荐文章于 2024-04-06 21:20:10 发布
置顶 最新推荐文章于 2024-04-06 21:20:10 发布
阅读量1.3k 收藏 11
点赞数 26
分类专栏： flutter3+dart3 flutter/dart实例 文章标签： flutter3-douyin flutter3短视频 flutter3直播 flutter3仿抖音 flutter3+getx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanxinyun1990/article/details/136996521
版权

flutter3-dylive 跨平台仿抖音短视频直播app实战项目。

全新原创基于flutter3.19.2+dart3.3.0+getx等技术开发仿抖音app实战项目。实现了类似抖音整屏丝滑式上下滑动视频、左右滑动切换页面模块，直播间进场/礼物动效，聊天等模块。

在这里插入图片描述

运用技术

  • 编辑器：vscode
  • 技术框架：flutter3.19.2+dart3.3.0
  • 路由/状态插件：get: ^4.6.6
  • 缓存服务：get_storage: ^2.1.1
  • 图片预览插件：photo_view: ^0.14.0
  • 刷新加载：easy_refresh^3.3.4
  • toast轻提示：toast^0.3.0
  • 视频套件：media_kit: ^1.1.10+1

在这里插入图片描述
在这里插入图片描述
Flutter-dyLive实现了类似抖音全屏上下滑动、左右切换页面效果。

左右滑动的同时，顶部状态栏+Tab菜单+底部bottomNavigationBar导航栏三者联动效果。

在这里插入图片描述

在这里插入图片描述

目录结构

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
本篇分享主要是短视频和直播模块，至于其它技术知识点，大家可以去看看之前分享的flutter3聊天实例文章。

https://blog.csdn.net/yanxinyun1990/article/details/136051099
https://blog.csdn.net/yanxinyun1990/article/details/136410049

flutter底部导航菜单

在这里插入图片描述
使用 bottomNavigationBar 组件实现底部导航页面模块切换。通过getx状态来联动控制底部导航栏背景颜色。

中间图标/图片按钮，使用了 Positioned 组件定位实现功能。

return Scaffold(
  backgroundColor: Colors.grey[50],
  body: pageList[pageCurrent],
  // 底部导航栏
  bottomNavigationBar: Theme(
    // Flutter去掉BottomNavigationBar底部导航栏的水波纹
    data: ThemeData(
      splashColor: Colors.transparent,
      highlightColor: Colors.transparent,
      hoverColor: Colors.transparent,
    ),
    child: Obx(() {
      return Stack(
        children: [
          Container(
            decoration: const BoxDecoration(
              border: Border(top: BorderSide(color: Colors.black54, 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: [
                ...pageItems
              ],
              onTap: (index) {
                setState(() {
                  pageCurrent = index;
                });
              },
            ),
          ),
          // 自定义底部导航栏中间按钮
          Positioned(
            left: MediaQuery.of(context).size.width / 2 - 15,
            top: 0,
            bottom: 0,
            child: InkWell(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  // Icon(Icons.tiktok, color: bottomNavigationItemcolor(centerDocked: true), size: 32.0,),
                  Image.asset('assets/images/applogo.png', width: 32.0, fit: BoxFit.contain,)
                  // Text('直播', style: TextStyle(color: bottomNavigationItemcolor(centerDocked: true), fontSize: 12.0),)
                ],
              ),
              onTap: () {
                setState(() {
                  pageCurrent = 2;
                });
              },
            ),
          ),
        ],
      );
    }),
  ),
);

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../styles/index.dart';
import '../../controllers/page_video_controller.dart';

// 引入pages页面
import '../pages/index/index.dart';
import '../pages/video/index.dart';
import '../pages/live/index.dart';
import '../pages/message/index.dart';
import '../pages/my/index.dart';

class Layout extends StatefulWidget {
  const Layout({super.key});

  @override
  State<Layout> createState() => _LayoutState();
}

class _LayoutState extends State<Layout> {
  PageVideoController pageVideoController = Get.put(PageVideoController());

  // page索引
  int pageCurrent = 0;
  // page页面
  List pageList = [const Index(), const FVideo(), const FLiveList(), const Message(), const My()];
  // tabs选项
  List pageItems = [
    const BottomNavigationBarItem(
      icon: Icon(Icons.home_outlined),
      label: '首页'
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.play_arrow_outlined),
      label: '短视频'
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.live_tv_rounded, color: Colors.transparent,),
      label: ''
    ),
    BottomNavigationBarItem(
      icon: Stack(
        alignment: const Alignment(4, -2),
        children: [
          const Icon(Icons.messenger_outline),
          FStyle.badge(1)
        ],
      ),
      label: '消息'
    ),
    BottomNavigationBarItem(
      icon: Stack(
        alignment: const Alignment(1.5, -1),
        children: [
          const Icon(Icons.person_outline),
          FStyle.badge(0, isdot: true)
        ],
      ),
      label: '我'
    )
  ];

  // 底部导航栏背景色
  Color bottomNavigationBgcolor() {
    int index = pageCurrent;
    int pageVideoTabIndex = pageVideoController.pageVideoTabIndex.value;
    Color color = Colors.white;
    if(index == 1) {
      if([1, 2, 3].contains(pageVideoTabIndex)) {
        color = Colors.white;
      }else {
        color = Colors.black;
      }
    }
    return color;
  }
  // 底部导航栏颜色
  Color bottomNavigationItemcolor({centerDocked = false}) {
    int index = pageCurrent;
    int pageVideoTabIndex = pageVideoController.pageVideoTabIndex.value;
    Color color = Colors.black54;
    if(index == 1) {
      if([1, 2, 3].contains(pageVideoTabIndex)) {
        color = Colors.black54;
      }else {
        color = Colors.white60;
      }
    }else if(index == 2 && centerDocked) {
      color = FStyle.primaryColor;
    }
    return color;
  }

  // ...
}

在这里插入图片描述

flutter3实现抖音沉浸式滑动

在这里插入图片描述
在这里插入图片描述
使用TabBar组件和PageView组件实现顶部菜单和页面联动切换效果。

return Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    forceMaterialTransparency: true,
    backgroundColor: [1, 2, 3].contains(pageVideoController.pageVideoTabIndex.value) ? null : Colors.transparent,
    foregroundColor: [1, 2, 3].contains(pageVideoController.pageVideoTabIndex.value) ? Colors.black : Colors.white,
    titleSpacing: 1.0,
    leading: Obx(() => IconButton(icon: Icon(Icons.menu, color: tabColor(),), onPressed: () {},),),
    title: Obx(() {
      return TabBar(
        controller: tabController,
        tabs: pageTabs.map((v) => Tab(text: v)).toList(),
        isScrollable: true,
        tabAlignment: TabAlignment.center,
        overlayColor: MaterialStateProperty.all(Colors.transparent),
        unselectedLabelColor: unselectedTabColor(),
        labelColor: tabColor(),
        indicatorColor: tabColor(),
        indicatorSize: TabBarIndicatorSize.label,
        unselectedLabelStyle: const TextStyle(fontSize: 16.0, fontFamily: 'Microsoft YaHei'),
        labelStyle: const TextStyle(fontSize: 16.0, fontFamily: 'Microsoft YaHei', fontWeight: FontWeight.w600),
        dividerHeight: 0,
        labelPadding: const EdgeInsets.symmetric(horizontal: 10.0),
        indicatorPadding: const EdgeInsets.symmetric(horizontal: 5.0),
        onTap: (index) {
          pageVideoController.updatePageVideoTabIndex(index); // 更新索引
          pageController.jumpToPage(index);
        },
      );
    }),
    actions: [
      Obx(() => IconButton(icon: Icon(Icons.search, color: tabColor(),), onPressed: () {},),),
    ],
  ),
  body: Column(
    children: [
      Expanded(
        child: Stack(
          children: [
            /// 水平滚动模块
            PageView(
              // 自定义滚动行为(支持桌面端滑动、去掉滚动条槽)
              scrollBehavior: PageScrollBehavior().copyWith(scrollbars: false),
              scrollDirection: Axis.horizontal,
              controller: pageController,
              onPageChanged: (index) {
                pageVideoController.updatePageVideoTabIndex(index); // 更新索引
                setState(() {
                  tabController.animateTo(index);
                });
              },
              children: [
                ...pageModules
              ],
            ),
          ],
        ),
      ),
    ],
  ),
);

PageVideoController pageVideoController = Get.put(PageVideoController());

List<String> pageTabs = ['热点', '长视频', '文旅', '商城', '关注', '同城服务', '推荐'];
final pageModules = [
  const HotModule(),
  const LongVideoModule(),
  const TripModule(),
  const MallModule(),
  const FavorModule(),
  const NearModule(),
  const RecommendModule()
];
late final TabController tabController = TabController(initialIndex: pageVideoController.pageVideoTabIndex.value, length: pageTabs.length, vsync: this);
// 页面controller
late final PageController pageController = PageController(initialPage: pageVideoController.pageVideoTabIndex.value, viewportFraction: 1.0);

@override
void dispose() {
  tabController.dispose();
  pageController.dispose();
  super.dispose();
}

flutter实现短视频底部播放拖拽条

在这里插入图片描述
短视频底部又一条mini播放进度条，可实时显示视频播放进度，可拖拽到指定播放时间点。

// flutter滑动短视频模块  Q：282310962

return Container(
  color: Colors.black,
  child: Column(
    children: [
      Expanded(
        child: Stack(
          children: [
            /// 垂直滚动模块
            PageView.builder(
              // 自定义滚动行为(支持桌面端滑动、去掉滚动条槽)
              scrollBehavior: PageScrollBehavior().copyWith(scrollbars: false),
              scrollDirection: Axis.vertical,
              controller: pageController,
              onPageChanged: (index) async {
                ...
              },
              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: videoIndex == index,
                              child: Video(
                                controller: videoController,
                                fit: BoxFit.cover,
                                // 无控制条
                                controls: NoVideoControls,
                              ),
                            ),
                            // 播放/暂停按钮
                            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.white70,
                                        size: 70,
                                      ),
                                    ),
                                  ),
                                );
                              },
                            ),
                          ],
                        ),
                        onTap: () {
                          player.playOrPause();
                        },
                      ),
                    ),
                    // 右侧操作栏
                    Positioned(
                      bottom: 15.0,
                      right: 10.0,
                      child: Column(
                        ...
                      ),
                    ),
                    // 底部信息区域
                    Positioned(
                      bottom: 15.0,
                      left: 10.0,
                      right: 80.0,
                      child: Column(
                        ...
                      ),
                    ),
                    // 播放mini进度条
                    Positioned(
                      bottom: 0.0,
                      left: 10.0,
                      right: 10.0,
                      child: Visibility(
                        visible: videoIndex == index && position > Duration.zero,
                        child: Listener(
                          child: SliderTheme(
                            data: const SliderThemeData(
                              trackHeight: 2.0,
                              thumbShape: RoundSliderThumbShape(enabledThumbRadius: 4.0), // 调整滑块的大小
                              // trackShape: RectangularSliderTrackShape(), // 使用矩形轨道形状
                              overlayShape: RoundSliderOverlayShape(overlayRadius: 0), // 去掉Slider默认上下边距间隙
                              inactiveTrackColor: Colors.white24, // 设置非活动进度条的颜色
                              activeTrackColor: Colors.white, // 设置活动进度条的颜色
                              thumbColor: Colors.pinkAccent, // 设置滑块的颜色
                              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: 90.0,
                      left: 10.0,
                      right: 10.0,
                      child: Visibility(
                        visible: sliderDraging,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text(position.label(reference: duration), style: const TextStyle(color: Colors.white, fontSize: 16.0, fontWeight: FontWeight.w600),),
                            Container(
                              margin: const EdgeInsets.symmetric(horizontal: 7.0),
                              child: const Text('/', style: TextStyle(color: Colors.white54, fontSize: 10.0,),),
                            ),
                            Text(duration.label(reference: duration), style: const TextStyle(color: Colors.white54, fontSize: 16.0, fontWeight: FontWeight.w600),),
                          ],
                        ),
                      ),
                    ),
                  ],
                );
              },
            ),
            /// 固定层
            // 红包
            Positioned(
              left: 15.0,
              top: MediaQuery.of(context).padding.top + 20,
              child: Container(
                height: 40.0,
                width: 40.0,
                decoration: BoxDecoration(
                  color: Colors.black12,
                  borderRadius: BorderRadius.circular(100.0),
                ),
                child: UnconstrainedBox(
                  child: Image.asset('assets/images/time-hb.png', width: 30.0, fit: BoxFit.contain,),
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

flutter3直播模块

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

// 商品购买动效
Container(
  ...
),

// 加入直播间动效
const AnimationLiveJoin(
  joinQueryList: [
    {'avatar': 'assets/images/logo.png', 'name': 'andy'},
    {'avatar': 'assets/images/logo.png', 'name': 'jack'},
    {'avatar': 'assets/images/logo.png', 'name': '一条咸鱼'},
    {'avatar': 'assets/images/logo.png', 'name': '四季平安'},
    {'avatar': 'assets/images/logo.png', 'name': '叶子'},
  ],
),

// 送礼物动效
const AnimationLiveGift(
  giftQueryList: [
    {'label': '小心心', 'gift': 'assets/images/gift/gift1.png', 'user': 'Jack', 'avatar': 'assets/images/avatar/uimg2.jpg', 'num': 12},
    {'label': '棒棒糖', 'gift': 'assets/images/gift/gift2.png', 'user': 'Andy', 'avatar': 'assets/images/avatar/uimg6.jpg', 'num': 36},
    {'label': '大啤酒', 'gift': 'assets/images/gift/gift3.png', 'user': '一条咸鱼', 'avatar': 'assets/images/avatar/uimg1.jpg', 'num': 162},
    {'label': '人气票', 'gift': 'assets/images/gift/gift4.png', 'user': 'Flower', 'avatar': 'assets/images/avatar/uimg5.jpg', 'num': 57},
    {'label': '鲜花', 'gift': 'assets/images/gift/gift5.png', 'user': '四季平安', 'avatar': 'assets/images/avatar/uimg3.jpg', 'num': 6},
    {'label': '捏捏小脸', 'gift': 'assets/images/gift/gift6.png', 'user': 'Alice', 'avatar': 'assets/images/avatar/uimg4.jpg', 'num': 28},
    {'label': '你真好看', 'gift': 'assets/images/gift/gift7.png', 'user': '叶子', 'avatar': 'assets/images/avatar/uimg7.jpg', 'num': 95},
    {'label': '亲吻', 'gift': 'assets/images/gift/gift8.png', 'user': 'YOYO', 'avatar': 'assets/images/avatar/uimg8.jpg', 'num': 11},
    {'label': '玫瑰', 'gift': 'assets/images/gift/gift12.png', 'user': '宇辉', 'avatar': 'assets/images/avatar/uimg9.jpg', 'num': 3},
    {'label': '私人飞机', 'gift': 'assets/images/gift/gift16.png', 'user': 'Hison', 'avatar': 'assets/images/avatar/uimg10.jpg', 'num': 273},
  ],
),

// 直播弹幕+商品讲解
Container(
  margin: const EdgeInsets.only(top: 7.0),
  height: 200.0,
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      Expanded(
        child: ListView.builder(
          padding: EdgeInsets.zero,
          itemCount: liveJson[index]['message']?.length,
          itemBuilder: (context, i) => danmuList(liveJson[index]['message'])[i],
        ),
      ),
      SizedBox(
        width: isVisibleGoodsTalk ? 7 : 35,
      ),
      // 商品讲解
      Visibility(
        visible: isVisibleGoodsTalk,
        child: Column(
          ...
        ),
      ),
    ],
  ),
),

// 底部工具栏
Container(
  margin: const EdgeInsets.only(top: 7.0),
  child: Row(
    ...
  ),
),

直播间从右到左进入直播间动画及礼物左侧滑入效果，通过 SlideTransition 组件实现进场动画。

return SlideTransition(
  position: animationFirst ? animation : animationMix,
  child: Container(
    alignment: Alignment.centerLeft,
    margin: const EdgeInsets.only(top: 7.0),
    padding: const EdgeInsets.symmetric(horizontal: 7.0,),
    height: 23.0,
    width: 250,
    decoration: const BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        colors: [
          Color(0xFF6301FF), Colors.transparent
        ],
      ),
      borderRadius: BorderRadius.horizontal(left: Radius.circular(10.0)),
    ),
    child: joinList!.isNotEmpty ? 
      Text('欢迎 ${joinList![0]['name']} 加入直播间', style: const TextStyle(color: Colors.white, fontSize: 14.0,),)
      :
      Container()
    ,
  ),
);

class _AnimationLiveJoinState extends State<AnimationLiveJoin> with TickerProviderStateMixin {
  // 动画控制器
  late AnimationController controller = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 500), // 第一个动画持续时间
  );
  late AnimationController controllerMix = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 1000), // 第二个动画持续时间
  );
  // 动画
  late Animation<Offset> animation = Tween(begin: const Offset(2.5, 0), end: const Offset(0, 0)).animate(controller);
  late Animation<Offset> animationMix = Tween(begin: const Offset(0, 0), end: const Offset(-2.5, 0)).animate(controllerMix);

  Timer? timer;
  // 是否第一个动画
  bool animationFirst = true;
  // 是否空闲
  bool idle = true;
  // 加入直播间数据列表
  List? joinList;

  @override
  void initState() {
    super.initState();

    joinList = widget.joinQueryList!.toList();

    runAnimation();
    animation.addListener(() {
      if(animation.status == AnimationStatus.forward) {
        debugPrint('第一个动画进行中');
        idle = false;
        setState(() {});
      }else if(animation.status == AnimationStatus.completed) {
        debugPrint('第一个动画结束');
        animationFirst = false;
        if(controllerMix.isCompleted || controllerMix.isDismissed) {
          timer = Timer(const Duration(seconds: 2), () {
            controllerMix.forward();
            debugPrint('第二个动画开始');
          });
        }
        setState(() {});
      }
    });
    animationMix.addListener(() {
      if(animationMix.status == AnimationStatus.forward) {
        setState(() {});
      }else if(animationMix.status == AnimationStatus.completed) {
        animationFirst = true;
        controller.reset();
        controllerMix.reset();
        if(joinList!.isNotEmpty) {
          joinList!.removeAt(0);
        }
        idle = true;
        // 执行下一个数据
        runAnimation();
        setState(() {});
      }
    });
  }

  void runAnimation() {
    if(joinList!.isNotEmpty) {
      // 空闲状态才能执行，防止添加数据播放状态混淆
      if(idle == true) {
        if(controller.isCompleted || controller.isDismissed) {
          setState(() {});
          timer = Timer(Duration.zero, () {
            controller.forward();
          });
        }
      }
    }
  }

  @override
  void dispose() {
    controller.dispose();
    controllerMix.dispose();
    timer?.cancel();
    super.dispose();
  }

}

另外项目中还加入了之前flutter3聊天功能模块。

Ok，综上就是flutter3+dart3仿抖音app实例的一些技术知识分享，希望对大家有所帮助。

最后附上两个实例项目

在这里插入图片描述

xiaoyan_2018
关注
  • 26
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
flutter仿抖音首页面效果
03-14
本课程将使用 flutter 实现类似抖音首页面效果 通过 TabBar 与 TabBarView 结合使用 实现仿抖音APP首页面 关注 与推荐 页面左右滑动ui构建通过 PageView 来实现上下整屏切换效果使用 VideoPlayer组件实现视频播放功能通过 CircularProgressIndicator实现 有圆形背景样式的按钮浮在视频列表上方来实现控制视频的播放与暂停，并会综述一个 Align 在手机坐标系中的对齐方式通过 ClipOval、CachedNetworkImage 实现圆形头像通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 ListView 实现弹框显示评论列表功能通过 showModalBottomSheet 实现从页面底部上滑的弹框，结合 GridView 实现弹框显示九宫格列表功能
flutter_live:实时流播放器，iOS + Android，RTMPHTTP-FLVHLSWebRTC，由Flutter + SRS提供
04-14
扑朔迷离 跨平台（iOS + Andriod）多协议（RTMP / HTTP-FLV / HLS / WebRTC）实时播放器，Flutter + 。 Flutter + 实时流播放器，iOS + Android，RTMP / HTTP-FLV / HLS / WebRTC。 用法 从安装iOS / Android播放器应用，或 git clone https://github.com/ossrs/flutter_live.git && cd flutter_live/example && flutter run 警告：不支持iOS模拟器 。
Flutter 3.x 实战跨平台仿抖音App课程
09-16
Flutter 3.x 实战跨平台仿抖音App课程
基于Flutter 3.x 实战跨平台仿抖音App混合开发
09-16
分享课程——基于Flutter 3.x 实战跨平台仿抖音App混合开发，完整版视频课程下载。 Flutter 3已发布，跨平台支持性更好。本课程会手把手教你用简单、高效且通用的方式，将原生项目迁移成一个Flutter/原生混合开发的项目，从双平台开发转变为跨平台开发，大大提高项目开发效率。 学好 Flutter，它的灵活、高效，将在你的工作实践中显现极大威力。
flutter页面切换动画，2024抖音短视频爆火(1)，面试官
2401_84023787的博客
04-06 678
1.1 采集视频、音频编码框架:AVFoundation是用来播放和创建实时的视听媒体数据的框架，同时提供Objective-C接口来操作这些视听数据，比如编辑，旋转，重编码1.2 视频、音频硬件设备CCD:图像传感器： 用于图像采集和处理的过程，把图像转换成电信号。拾音器:声音传感器： 用于声音采集和处理的过程，把声音转换成电信号。音频采样数据:一般都是PCM格式视频采样数据: 一般都是YUV,或RGB格式，采集到的原始音视频的体积是非常大的，需要经过压缩技术处理来提高传输效率。
基于 Flutter 3.x 实战跨平台短视频App混合开发
m0_59291979的博客
05-30 284
可以是你正在学习的东西，也可以是你认为很酷的东西，更可以是你正在工作的东西，皆可。可以是你正在学习的东西，也可以是你认为很酷的东西，更可以是你正在工作的东西，皆可。但是，最重要的是，你将了解到其他人是如何看待编程的。还有你遇到的那些小问题，已经有无数前辈也曾遇到过，他们总结了并分享在互联网上了，前人的经验是你的宝贵资源，要善于利用谷歌等软件。还有你遇到的那些小问题，已经有无数前辈也曾遇到过，他们总结了并分享在互联网上了，前人的经验是你的宝贵资源，要善于利用谷歌等软件。你需要挑战自我，并超越熟悉的领域。
使用 Flutter 轻松实现短视频上滑翻页效果
Flutter 跨平台技术研究
10-23 1945
我们在短视频应用中经常会看到不停上滑浏览下一条视频的沉浸式交互效果，这种交互能够让用户不停地翻页，直到找到喜欢的视频内容，从而营造一种不断“搜寻目标”的感觉，本篇介绍如何在 Flutter 实现。
Flutter 仿抖音 TikTok 上下滑动 播放视频
panghaha12138的博客
02-02 1052
Flutter 仿抖音 TikTok 上下滑动 播放视频UI框架，视频播放使用 video_player。1.上下滑动自动播放切换视频，loading 封面图占位。2.全屏播放横竖屏切换。
Flutter 仿抖音、豆瓣、知乎、番茄小说的评论弹窗开发实践
m0_56144365的博客
07-05 867
实现一个发评论看评论的功能其实很简单， 但是能把这一个个细节问题都解决还是挺困难的列表和面板手势的滑动连接存在局部路由时，多个列表和面板手势的滑动连接面板顶部TopBar的手势监听键盘弹起将对应的列表项定位到评论框上方键盘弹起后，对面板手势的禁用，避免用户误触监听手机侧滑返回，使其符合我们的预期处理ios侧滑手势与下拉手势的冲突如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。
基于 Flutter 3.x 实战跨平台短视频App混合开发（17章已完结）
m0_59287407的博客
04-13 404
可以是你正在学习的东西，也可以是你认为很酷的东西，更可以是你正在工作的东西，皆可。可以是你正在学习的东西，也可以是你认为很酷的东西，更可以是你正在工作的东西，皆可。但是，最重要的是，你将了解到其他人是如何看待编程的。还有你遇到的那些小问题，已经有无数前辈也曾遇到过，他们总结了并分享在互联网上了，前人的经验是你的宝贵资源，要善于利用谷歌等软件。还有你遇到的那些小问题，已经有无数前辈也曾遇到过，他们总结了并分享在互联网上了，前人的经验是你的宝贵资源，要善于利用谷歌等软件。你需要挑战自我，并超越熟悉的领域。
flutter_plugin_record:flutter 仿微信录制语音功能 支持android和ios
05-02
[TOC] 使用Flutter实现 仿微信录音的插件 插件支持android 和IOS 插件提供的功能 录制 录制语音, 播放录音, 录制声音大小的监听 提供录制时长的监听 提供类似微信的录制组件 提供播放音频结束的监听 提供根据传递的路径进行语音录制 提供录制wav,mp3格式 具体可参考example 播放 提供播放指定路径的音频文件 提供播放指定Url地址的wav,MP3格式文件 提供播放完成的回调监听 提供暂停和继续播放的功能 提供停止播放的功能 1,引入 在pubspec.yaml 文件上引入如下配置 引入方式1(引入最新的版本) flutter_plugin_record: git: url: https://github.com/yxwandroid/flutter_plugin_record.git 引入方式2 (引入指定某次commit) flutt
model_viewer.dart：一个Flutter小部件，用于以glTF和GLB格式渲染交互式3D模型
02-01
Flutter的3D模型查看器 这是一个小部件，用于以和格式渲染交互式3D模型。 该小部件将Google的网络组件嵌入到。 屏幕截图 先决条件 2.8+和 1.17+ 兼容性 Android和iOS，以及。 安装 pubspec.yaml dependencies : model_viewer : ^0.8.1 AndroidManifest.xml （仅适用于Android 9+） 要在Android 9+设备上使用此小部件，必须允许您的应用与http://localhost:XXXXX建立HTTP连接。 Android 9（API级别28）将的默认设置从true更改为false ，因此您需要按以下方式配置应用程序的android/app/src/main/AndroidManifest.xml ： --- a/example/android/app/src/main/AndroidManifest.xml +++ b/example/android/app/src/main/AndroidManifest.xml @@ -8,7 +8,8 @@ <appl
flutter_secure_storage:Flutter插件可将数据存储在安全存储中
05-13
flutter_secure_storage Flutter插件可将数据存储在安全存储中： 用于iOS AES加密用于Android。 AES密钥使用RSA加密，并且RSA密钥存储在 用于Linux。 注意KeyStore是在Android 4.3（API级别18）中引入的。 该插件不适用于早期版本。 入门 import 'package:flutter_secure_storage/flutter_secure_storage.dart' ; // Create storage final storage = new FlutterSecureStorage (); // Read value String value = await storage. read (key : key); // Read all values Map < String> al
flutter_audio_desktop:[WIP] Flutter Desktop的:musical_note:音频播放库。 支持Windows和Linux。 基于miniaudio
05-18
:black_nib: 是该项目的续集。 它提供了更好的播放，格式支持，控制和功能。 Flutter Desktop的音频播放库。 随时打开问题。 正在安装 在您的pubspec.yaml中提及： dependencies : ... flutter_audio_desktop : ^0.1.0 使用 // Create new instance. var audioPlayer = new AudioPlayer (id : 0 ) ..stream. listen ( ( Audio audio) { // Listen to playback events. }, ); // Load audio source audioPlayer. load ( new AudioSource . fromFile ( new File ( '/home/alexmerc
flutter_style_transfer:Flutter + Bloc + TFlite + CartoonGAN
04-06
Flutter Style Transfer Feature :sparkles: 集成多种风格转换模型 :floppy_disk: 保存到图库 :outbox_tray: 一键分享 :first_quarter_moon: 适配深色模式的主题 Light Dark Reference About Model : About Related ...
关于__Federico Milano 的电力系统分析工具箱.zip
最新发布
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
mlab-upenn 研究小组的心脏模型模拟.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
基于 flutter 3.x 仿抖音跨平台混合开发
07-28
基于 Flutter 3.x 进行仿抖音跨平台混合开发，是一种使用最新版本的Flutter框架来开发类似抖音的应用程序的方法。 Flutter是一种跨平台的开发框架，可以让开发者使用同一套代码同时在iOS和Android平台上构建高性能的应用程序。它提供了丰富的UI组件和工具，使开发过程更加简单和高效。 要实现仿抖音的跨平台混合开发，首先需要对抖音的功能和界面进行分析和设计。然后，使用Flutter框架来实现这些功能和界面。 Flutter提供了丰富的UI组件，如按钮、文本、图片、视频播放等，可以用于构建抖音的各种界面元素。开发者可以使用Dart语言来编写业务逻辑，同时可以使用Flutter提供的hot reload功能实时预览和调试应用程序。 为了实现跨平台开发，开发者可以使用Flutter的多平台支持。Flutter可以生成原生的iOS和Android应用程序，以及Web和桌面应用程序。这使得开发者可以在不同的平台上发布和部署仿抖音的应用程序。 在开发过程中，开发者可以使用Flutter的插件来集成各种第三方功能和服务，如视频播放、数据存储、社交分享等。这些插件可以帮助开发者更加方便地实现仿抖音的各种功能。 总之，基于Flutter 3.x进行仿抖音跨平台混合开发，是一种高效、灵活的开发方法。通过使用Flutter框架和相关工具，开发者可以快速构建出功能完善、界面精美的仿抖音应用程序，并在多个平台上进行发布和部署。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

xiaoyan_2018

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

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

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

打赏作者

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

抵扣说明：

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

余额充值