百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

基于flutter3.x跨端仿抖音app实战|flutter-douyin短视频直播

wptr33 2024-12-05 17:00 18 浏览

#精品长文创作季#

又经过了半个多月的爆肝输出,全新原创的flutter3_douyin短视频直播项目完结了。

目前已经实现好的功能有首页、短视频、直播、聊天、我的等几个页面模块。

实现了类似抖音全屏沉浸式滑动效果(上下滑动视频、左右切换页面模块)。

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

技术栈

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

为了考虑在windows端调试方便,目前视频播放器使用media_kit套件。

在开发的过程中,遇到了不少问题,最后都顺利解决了。

项目结构目录

预览图

flutter3底部导航菜单

使用 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短视频滑动效果

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
              ],
            ),
          ],
        ),
      ),
    ],
  ),
);

短视频底部有一条播放进度条。

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

Ok,限于篇幅,flutter3仿抖音短视频项目就先分享到这里。

相关推荐

台积电提出SRAM存内计算新方法,能效比可达89TOPS/W

芯东西(公众号:aichip001)编译|高歌编辑|云鹏芯东西3月16日消息,近期,台积电的研究人员在ISSCC2021会议上公布了一种改良的SRAM存储器阵列,该SRAM阵列采用22nm工...

Golang中如何判断两个slice是否相等?

在Golang中,要判断两个slice是否相等是不能直接使用==运算符的(==只能说明两个slice是否指向同一个底层数组)。如果两个slice的底层数组相同,但长度或容量不同...

JS入门基础知识(js基础知识总结笔记)

JS对象操作对象增删改查创建对象letobj={}新增属性obj.a=1修改属性obj.a='a'...

趣谈JS二进制:File、Blob、FileReader、ArrayBuffer、Base64

大家好,我是Echa。好久没跟粉丝们细聊JavaScript那点事了。做一名全栈工程师,JS基础还是要打牢,这样的话不管底层业务逻辑以及第三方框架怎么变化,都离不开基础。本文文章属于基础篇,阅读有点...

告别 substr() 和 substring()?更可靠的 JavaScript 字符串截取方法

JavaScript提供了三个主要的字符串截取方法:...

golang第九天,切片(slice)介绍(golang 切片作为参数)

什么是切片golang切片是对数组的抽象。go的数组长度不可改变,在特定场景中这样的集合就不太适用,go中提供了一种灵活,功能强悍的内置类型切片(“动态数组”),与数组相比切片的长度是不固定的,可以追...

Go语言零到一:数组(go struct数组)

引言...

你说你熟悉Slice,这道slice题你能答对吗?

每当你花费大量时间使用某种特定工具时,深入了解它并了解如何高效地使用它是很值得的。...

Python 3.14七大新特性总结:从t-string模板到GIL并发优化

Python3.14已进入测试阶段,根据PEP745发布计划,该版本已停止引入新功能,也就是说新特征就应该已经固定下来了。所以本文基于当前最新的beta2版本,深入分析了Python3.14中...

Python 幕后:Python导入import的工作原理

更多互联网精彩资讯、工作效率提升关注【飞鱼在浪屿】(日更新)Python最容易被误解的方面其中之一是import。...

Python元类实现自动化编程的正确姿势

元类是Python中用于创建类的类。通过元类机制,开发者可在运行时动态创建和修改类,为框架开发、设计模式实现和高级架构设计提供核心支持。在Python语言的高级特性中,元类占据着独特而重要的地位。作...

Python字符串详解与示例(python字符串类型及操作)

艾瑞巴蒂字符串的干货来了,字符串是程序中最常见的数据类型之一,用来表示数据文本,下面就来介绍下字符串的特性,操作和方法,和一些示例来吧道友:1.字符串的创建在python中字符串可以永单引号(...

恕我直言!你对Python里的import一无所知

文章来源:https://mp.weixin.qq.com/s/4WAOU_Lzy651IE-2zZSFfQ原文作者:写代码的明哥...

Python基础:字符串操作(python字符串的用法)

字符串是Python中最常用的数据类型之一,用于表示文本数据。我们将学习如何对字符串进行常见的操作,包括创建、访问、修改和处理字符串。通过掌握这些技巧,您将能够更好地处理和操作文本数据。让我们开始吧!...

Python 中 字符串处理的高效方法,不允许你还不知道

以下是Python中字符串处理的高效方法...