mirrors/pilipala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 简单实现弹幕功能

Browse Source
This commit is contained in:
guozhigq
2023-08-29 23:10:22 +08:00
parent 5f730af347
commit dfbe3b1f6c
23 changed files with 646 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/pages/bangumi/introduction/controller.dart
View File

@ -258,6 +258,7 @@ class BangumiIntroController extends GetxController {
Get.find<VideoDetailController>(tag: Get.arguments['heroTag']);
videoDetailCtr.bvid = bvid;
videoDetailCtr.cid = cid;
videoDetailCtr.danmakuCid.value = cid;
videoDetailCtr.queryVideoUrl();
// 重新请求评论
try {

64
lib/pages/danmaku/controller.dart Normal file
View File

@ -0,0 +1,64 @@
import 'package:pilipala/http/danmaku.dart';
import 'package:pilipala/models/danmaku/dm.pb.dart';
import 'package:pilipala/plugin/pl_player/index.dart';
class PlDanmakuController {
PlDanmakuController(this.cid, this.playerController);
final int cid;
final PlPlayerController playerController;
late Duration videoDuration;
// 按 6min 分段
int segCount = 0;
List<DmSegMobileReply> dmSegList = [];
int currentSegIndex = 0;
int currentDmIndex = 0;
void calcSegment() {
segCount = (videoDuration.inSeconds / (60 * 6)).ceil();
}
Future<List<DmSegMobileReply>> queryDanmaku() async {
dmSegList.clear();
for (int segIndex = 1; segIndex <= segCount; segIndex++) {
DmSegMobileReply result =
await DanmakaHttp.queryDanmaku(cid: cid, segmentIndex: segIndex);
if (result.elems.isNotEmpty) {
result.elems.sort((a, b) => (a.progress).compareTo(b.progress));
dmSegList.add(result);
}
}
if (dmSegList.isNotEmpty) {
findClosestPositionIndex(playerController.position.value.inMilliseconds);
}
return dmSegList;
}
/// 查询当前最接近的弹幕
void findClosestPositionIndex(int position) {
int segIndex = (position / (6 * 60 * 1000)).ceil() - 1;
if (segIndex < 0) segIndex = 0;
List elems = dmSegList[segIndex].elems;
if (segIndex < dmSegList.length) {
int left = 0;
int right = elems.length;
while (left < right) {
int mid = (right + left) ~/ 2;
var midPosition = elems[mid].progress;
if (midPosition >= position) {
right = mid;
} else {
left = mid + 1;
}
}
currentSegIndex = segIndex;
currentDmIndex = right;
} else {
currentSegIndex = segIndex;
currentDmIndex = 0;
}
}
}

4
lib/pages/danmaku/index.dart Normal file
View File

@ -0,0 +1,4 @@
library pldanmaku;
export './controller.dart';
export 'view.dart';

127
lib/pages/danmaku/view.dart Normal file
View File

@ -0,0 +1,127 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ns_danmaku/ns_danmaku.dart';
import 'package:pilipala/pages/danmaku/index.dart';
import 'package:pilipala/plugin/pl_player/index.dart';
import 'package:pilipala/utils/danmaku.dart';
/// 传入播放器控制器，监听播放进度，加载对应弹幕
class PlDanmaku extends StatefulWidget {
final int cid;
final PlPlayerController playerController;
const PlDanmaku({
super.key,
required this.cid,
required this.playerController,
});
@override
State<PlDanmaku> createState() => _PlDanmakuState();
}
class _PlDanmakuState extends State<PlDanmaku> {
late PlPlayerController playerController;
late PlDanmakuController _plDanmakuController;
DanmakuController? _controller;
bool danmuPlayStatus = true;
@override
void initState() {
super.initState();
_plDanmakuController =
PlDanmakuController(widget.cid, widget.playerController);
if (mounted) {
playerController = widget.playerController;
_plDanmakuController.videoDuration = playerController.duration.value;
_plDanmakuController
..calcSegment()
..queryDanmaku();
playerController
..addStatusLister(playerListener)
..addPositionListener(videoPositionListen);
}
}
// 播放器状态监听
void playerListener(PlayerStatus? status) {
if (status == PlayerStatus.paused) {
_controller!.pause();
}
if (status == PlayerStatus.playing) {
_controller!.onResume();
}
}
void videoPositionListen(Duration position) {
if (!danmuPlayStatus) {
_controller!.onResume();
danmuPlayStatus = true;
}
PlDanmakuController ctr = _plDanmakuController;
int currentPosition = position.inMilliseconds;
// 超出分段数返回
if (ctr.currentSegIndex >= ctr.dmSegList.length) {
return;
}
if (ctr.dmSegList.isEmpty ||
ctr.dmSegList[ctr.currentSegIndex].elems.isEmpty) {
return;
}
// 超出当前分段的弹幕总数返回
if (ctr.currentDmIndex >= ctr.dmSegList[ctr.currentSegIndex].elems.length) {
ctr.currentDmIndex = 0;
ctr.currentSegIndex++;
return;
}
var element = ctr.dmSegList[ctr.currentSegIndex].elems[ctr.currentDmIndex];
var delta = currentPosition - element.progress;
if (delta >= 0 && delta < 200) {
_controller!.addItems([
DanmakuItem(
element.content,
color: DmUtils.decimalToColor(element.color),
time: element.progress,
type: DmUtils.getPosition(element.mode),
)
]);
ctr.currentDmIndex++;
} else {
if (!playerController.isOpenDanmu.value) {
_controller!.pause();
danmuPlayStatus = false;
return;
}
ctr.findClosestPositionIndex(position.inMilliseconds);
}
}
@override
void dispose() {
playerController.removePositionListener(videoPositionListen);
super.dispose();
}
@override
Widget build(BuildContext context) {
return Obx(
() => AnimatedOpacity(
opacity: playerController.isOpenDanmu.value ? 1 : 0,
duration: const Duration(milliseconds: 100),
child: DanmakuView(
createdController: (DanmakuController e) async {
_controller = e;
},
option: DanmakuOption(
fontSize: 15,
area: 0.5,
duration: 5,
),
statusChanged: (isPlaying) {},
),
),
);
}
}

16
lib/pages/favDetail/controller.dart
View File

@ -15,6 +15,8 @@ class FavDetailController extends GetxController {
bool isLoadingMore = false;
RxMap favInfo = {}.obs;
RxList<FavDetailItemData> favList = [FavDetailItemData()].obs;
RxString loadingText = '加载中...'.obs;
int mediaCount = 0;
@override
void onInit() {
@ -27,6 +29,11 @@ class FavDetailController extends GetxController {
}
Future<dynamic> queryUserFavFolderDetail({type = 'init'}) async {
if (type == 'onLoad' && favList.length >= mediaCount) {
loadingText.value = '没有更多了';
return;
}
isLoadingMore = true;
var res = await await UserHttp.userFavFolderDetail(
pn: currentPage,
ps: 20,
@ -36,11 +43,16 @@ class FavDetailController extends GetxController {
favInfo.value = res['data'].info;
if (currentPage == 1 && type == 'init') {
favList.value = res['data'].medias;
} else if (type == 'onload') {
mediaCount = res['data'].info['media_count'];
} else if (type == 'onLoad') {
favList.addAll(res['data'].medias);
}
if (favList.length >= mediaCount) {
loadingText.value = '没有更多了';
}
}
currentPage += 1;
isLoadingMore = false;
return res;
}
@ -64,6 +76,6 @@ class FavDetailController extends GetxController {
}
onLoad() {
queryUserFavFolderDetail(type: 'onload');
queryUserFavFolderDetail(type: 'onLoad');
}
}

41
lib/pages/favDetail/view.dart
View File

@ -1,9 +1,12 @@
import 'dart:async';
import 'package:easy_debounce/easy_throttle.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pilipala/common/skeleton/video_card_h.dart';
import 'package:pilipala/common/widgets/http_error.dart';
import 'package:pilipala/common/widgets/network_img_layer.dart';
import 'package:pilipala/common/widgets/no_data.dart';
import 'package:pilipala/pages/favDetail/index.dart';
import 'widget/fav_video_card.dart';
@ -37,10 +40,9 @@ class _FavDetailPageState extends State<FavDetailPage> {
if (_controller.position.pixels >=
_controller.position.maxScrollExtent - 200) {
if (!_favDetailController.isLoadingMore) {
_favDetailController.isLoadingMore = true;
EasyThrottle.throttle('favDetail', const Duration(seconds: 1), () {
_favDetailController.onLoad();
}
});
}
},
);
@ -183,12 +185,7 @@ class _FavDetailPageState extends State<FavDetailPage> {
Map data = snapshot.data;
if (data['status']) {
if (_favDetailController.item!.mediaCount == 0) {
return const SliverToBoxAdapter(
child: SizedBox(
height: 300,
child: Center(child: Text('没有内容')),
),
);
return const NoData();
} else {
return Obx(
() => SliverList(
@ -207,18 +204,30 @@ class _FavDetailPageState extends State<FavDetailPage> {
);
}
} else {
return const SliverToBoxAdapter(
child: SizedBox(
height: 300,
child: Center(child: Text('加载中')),
),
// 骨架屏
return SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return const VideoCardHSkeleton();
}, childCount: 10),
);
}
},
),
SliverToBoxAdapter(
child: SizedBox(
height: MediaQuery.of(context).padding.bottom + 20,
child: Container(
height: MediaQuery.of(context).padding.bottom + 60,
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom),
child: Center(
child: Obx(
() => Text(
_favDetailController.loadingText.value,
style: TextStyle(
color: Theme.of(context).colorScheme.outline,
fontSize: 13),
),
),
),
),
)
],

12
lib/pages/setting/play_setting.dart
View File

@ -78,6 +78,18 @@ class _PlaySettingState extends State<PlaySetting> {
setKey: SettingBoxKey.enableAutoBrightness,
defaultVal: false,
),
const SetSwitchItem(
title: '自动全屏',
subTitle: '视频开始播放时进入全屏',
setKey: SettingBoxKey.enableAutoEnter,
defaultVal: false,
),
const SetSwitchItem(
title: '自动退出',
subTitle: '视频结束播放时退出全屏',
setKey: SettingBoxKey.enableAutoExit,
defaultVal: false,
),
ListTile(
dense: false,
title: Text('默认画质', style: titleStyle),

6
lib/pages/video/detail/controller.dart
View File

@ -21,6 +21,7 @@ class VideoDetailController extends GetxController
/// 路由传参
String bvid = Get.parameters['bvid']!;
int cid = int.parse(Get.parameters['cid']!);
RxInt danmakuCid = 0.obs;
String heroTag = Get.arguments['heroTag'];
// 视频详情
Map videoItem = {};
@ -73,6 +74,7 @@ class VideoDetailController extends GetxController
// 默认记录历史记录
bool enableHeart = true;
var userInfo;
late bool isFirstTime = true;
@override
void onInit() {
@ -100,6 +102,7 @@ class VideoDetailController extends GetxController
localCache.get(LocalCacheKey.historyPause) == true) {
enableHeart = false;
}
danmakuCid.value = cid;
}
showReplyReplyPanel() {
@ -193,6 +196,7 @@ class VideoDetailController extends GetxController
bvid: bvid,
cid: cid,
enableHeart: enableHeart,
isFirstTime: isFirstTime,
);
}
@ -233,7 +237,6 @@ class VideoDetailController extends GetxController
currentDecodeFormats = VideoDecodeFormatsCode.fromString(setting.get(
SettingBoxKey.defaultDecode,
defaultValue: VideoDecodeFormats.values.last.code))!;
print(currentDecodeFormats.description);
try {
// 当前视频没有对应格式返回第一个
bool flag = false;
@ -287,6 +290,7 @@ class VideoDetailController extends GetxController
defaultST = Duration(milliseconds: data.lastPlayTime!);
if (autoPlay.value) {
await playerInit();
isShowCover.value = false;
}
} else {
if (result['code'] == -404) {

1
lib/pages/video/detail/introduction/controller.dart
View File

@ -418,6 +418,7 @@ class VideoIntroController extends GetxController {
Get.find<VideoDetailController>(tag: Get.arguments['heroTag']);
videoDetailCtr.bvid = bvid;
videoDetailCtr.cid = cid;
videoDetailCtr.danmakuCid.value = cid;
videoDetailCtr.queryVideoUrl();
// 重新请求评论
try {

36
lib/pages/video/detail/introduction/view.dart
View File

@ -31,9 +31,10 @@ class VideoIntroPanel extends StatefulWidget {
class _VideoIntroPanelState extends State<VideoIntroPanel>
with AutomaticKeepAliveClientMixin {
final VideoIntroController videoIntroController =
Get.put(VideoIntroController(), tag: Get.arguments['heroTag']);
late String heroTag;
late VideoIntroController videoIntroController;
VideoDetailData? videoDetail;
late Future? _futureBuilderFuture;
// 添加页面缓存
@override
@ -42,6 +43,11 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
@override
void initState() {
super.initState();
/// fix 全屏时参数丢失
heroTag = Get.arguments['heroTag'];
videoIntroController = Get.put(VideoIntroController(), tag: heroTag);
_futureBuilderFuture = videoIntroController.queryVideoIntro();
videoIntroController.videoDetail.listen((value) {
videoDetail = value;
});
@ -57,15 +63,20 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
Widget build(BuildContext context) {
super.build(context);
return FutureBuilder(
future: videoIntroController.queryVideoIntro(),
future: _futureBuilderFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.data == null) {
return const SliverToBoxAdapter(child: SizedBox());
}
if (snapshot.data['status']) {
// 请求成功
return Obx(
() => VideoInfo(
loadingStatus: false,
videoDetail: videoIntroController.videoDetail.value),
loadingStatus: false,
videoDetail: videoIntroController.videoDetail.value,
heroTag: heroTag,
),
);
} else {
// 请求错误
@ -79,7 +90,11 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
);
}
} else {
return VideoInfo(loadingStatus: true, videoDetail: videoDetail);
return VideoInfo(
loadingStatus: true,
videoDetail: videoDetail,
heroTag: heroTag,
);
}
},
);
@ -89,8 +104,10 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
class VideoInfo extends StatefulWidget {
final bool loadingStatus;
final VideoDetailData? videoDetail;
final String? heroTag;
const VideoInfo({Key? key, this.loadingStatus = false, this.videoDetail})
const VideoInfo(
{Key? key, this.loadingStatus = false, this.videoDetail, this.heroTag})
: super(key: key);
@override
@ -98,7 +115,8 @@ class VideoInfo extends StatefulWidget {
}
class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
final String heroTag = Get.arguments['heroTag'];
// final String heroTag = Get.arguments['heroTag'];
late String heroTag;
late final VideoIntroController videoIntroController;
late final VideoDetailController videoDetailCtr;
late final Map<dynamic, dynamic> videoItem;
@ -117,7 +135,7 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
@override
void initState() {
super.initState();
heroTag = widget.heroTag!;
videoIntroController = Get.put(VideoIntroController(), tag: heroTag);
videoDetailCtr = Get.find<VideoDetailController>(tag: heroTag);
videoItem = videoIntroController.videoItem!;

254
lib/pages/video/detail/view.dart
View File

@ -10,6 +10,7 @@ import 'package:pilipala/common/widgets/sliver_header.dart';
import 'package:pilipala/http/user.dart';
import 'package:pilipala/models/common/search_type.dart';
import 'package:pilipala/pages/bangumi/introduction/index.dart';
import 'package:pilipala/pages/danmaku/view.dart';
import 'package:pilipala/pages/video/detail/introduction/widgets/menu_row.dart';
import 'package:pilipala/pages/video/detail/reply/index.dart';
import 'package:pilipala/pages/video/detail/controller.dart';
@ -41,7 +42,6 @@ class _VideoDetailPageState extends State<VideoDetailPage>
Get.put(VideoIntroController(), tag: Get.arguments['heroTag']);
PlayerStatus playerStatus = PlayerStatus.playing;
// bool isShowCover = true;
double doubleOffset = 0;
Box localCache = GStrorage.localCache;
@ -49,11 +49,15 @@ class _VideoDetailPageState extends State<VideoDetailPage>
late double statusBarHeight;
final videoHeight = Get.size.width * 9 / 16;
late Future _futureBuilderFuture;
// 自动退出全屏
late bool autoExitFullcreen;
@override
void initState() {
super.initState();
statusBarHeight = localCache.get('statusBarHeight');
autoExitFullcreen =
setting.get(SettingBoxKey.enableAutoExit, defaultValue: false);
videoSourceInit();
appbarStreamListen();
}
@ -63,7 +67,7 @@ class _VideoDetailPageState extends State<VideoDetailPage>
_futureBuilderFuture = videoDetailController.queryVideoUrl();
if (videoDetailController.autoPlay.value) {
plPlayerController = videoDetailController.plPlayerController;
playerListener();
plPlayerController!.addStatusLister(playerListener);
}
}
@ -79,23 +83,15 @@ class _VideoDetailPageState extends State<VideoDetailPage>
}
// 播放器状态监听
void playerListener() {
plPlayerController!.onPlayerStatusChanged.listen(
(PlayerStatus status) async {
playerStatus = status;
if (status == PlayerStatus.playing) {
videoDetailController.isShowCover.value = false;
} else {
// 播放完成停止 or 切换下一个
if (status == PlayerStatus.completed) {
// 当只有1p或多p未打开自动播放时，播放完成还原进度条，展示控制栏
plPlayerController!.seekTo(Duration.zero);
plPlayerController!.onLockControl(false);
plPlayerController!.videoPlayerController!.pause();
}
}
},
);
void playerListener(PlayerStatus? status) {
if (status == PlayerStatus.completed) {
// 结束播放退出全屏
if (autoExitFullcreen) {
plPlayerController!.triggerFullScreen(status: false);
}
// 播放完展示控制栏
plPlayerController!.onLockControl(false);
}
}
// 继续播放或重新播放
@ -110,11 +106,11 @@ class _VideoDetailPageState extends State<VideoDetailPage>
plPlayerController = videoDetailController.plPlayerController;
videoDetailController.autoPlay.value = true;
videoDetailController.isShowCover.value = false;
playerListener();
}
@override
void dispose() {
plPlayerController!.removeStatusLister(playerListener);
plPlayerController!.dispose();
super.dispose();
}
@ -128,6 +124,7 @@ class _VideoDetailPageState extends State<VideoDetailPage>
}
videoDetailController.defaultST = plPlayerController!.position.value;
videoIntroController.isPaused = true;
plPlayerController!.removeStatusLister(playerListener);
plPlayerController!.pause();
super.didPushNext();
}
@ -135,12 +132,14 @@ class _VideoDetailPageState extends State<VideoDetailPage>
@override
// 返回当前页面时
void didPopNext() async {
videoDetailController.isFirstTime = false;
videoDetailController.playerInit();
videoIntroController.isPaused = false;
if (_extendNestCtr.position.pixels == 0) {
await Future.delayed(const Duration(milliseconds: 300));
plPlayerController!.play();
}
plPlayerController!.addStatusLister(playerListener);
super.didPopNext();
}
@ -187,120 +186,127 @@ class _VideoDetailPageState extends State<VideoDetailPage>
builder: (context, boxConstraints) {
double maxWidth = boxConstraints.maxWidth;
double maxHeight = boxConstraints.maxHeight;
return Hero(
tag: videoDetailController.heroTag,
child: Stack(
children: [
FutureBuilder(
future: _futureBuilderFuture,
builder: ((context, snapshot) {
if (snapshot.hasData &&
snapshot.data['status']) {
return Obx(
() => videoDetailController
.autoPlay.value
? PLVideoPlayer(
return Stack(
children: [
FutureBuilder(
future: _futureBuilderFuture,
builder: ((context, snapshot) {
if (snapshot.hasData &&
snapshot.data['status']) {
return Obx(
() => !videoDetailController
.autoPlay.value
? const SizedBox()
: PLVideoPlayer(
controller: plPlayerController!,
headerControl: HeaderControl(
controller:
plPlayerController!,
headerControl: HeaderControl(
controller:
plPlayerController,
videoDetailCtr:
videoDetailController,
plPlayerController,
videoDetailCtr:
videoDetailController,
),
danmuWidget: Obx(
() => PlDanmaku(
key: Key(
videoDetailController
.danmakuCid.value
.toString()),
cid: videoDetailController
.danmakuCid.value,
playerController:
plPlayerController!,
),
)
: const SizedBox(),
);
} else {
return const SizedBox();
}
}),
),
Obx(
() => Visibility(
visible: videoDetailController
.isShowCover.value,
child: Positioned(
top: 0,
left: 0,
right: 0,
child: NetworkImgLayer(
type: 'emote',
src: videoDetailController
.videoItem['pic'],
width: maxWidth,
height: maxHeight,
),
),
),
);
} else {
return const SizedBox();
}
}),
),
Obx(
() => Visibility(
visible:
videoDetailController.isShowCover.value,
child: Positioned(
top: 0,
left: 0,
right: 0,
child: NetworkImgLayer(
type: 'emote',
src: videoDetailController
.videoItem['pic'],
width: maxWidth,
height: maxHeight,
),
),
),
),
/// 关闭自动播放时 手动播放
Obx(
() => Visibility(
visible: videoDetailController
.isShowCover.value &&
videoDetailController
.isEffective.value &&
!videoDetailController
.autoPlay.value,
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: AppBar(
primary: false,
foregroundColor: Colors.white,
/// 关闭自动播放时 手动播放
Obx(
() => Visibility(
visible: videoDetailController
.isShowCover.value &&
videoDetailController
.isEffective.value &&
!videoDetailController.autoPlay.value,
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
right: 0,
child: AppBar(
primary: false,
foregroundColor: Colors.white,
backgroundColor:
Colors.transparent,
actions: [
IconButton(
tooltip: '稍后再看',
onPressed: () async {
var res = await UserHttp
.toViewLater(
bvid:
videoDetailController
.bvid);
SmartDialog.showToast(
res['msg']);
},
icon: const Icon(
Icons.history_outlined),
),
const SizedBox(width: 14)
],
),
),
Positioned(
right: 12,
bottom: 10,
child: TextButton.icon(
style: ButtonStyle(
backgroundColor:
Colors.transparent,
actions: [
IconButton(
tooltip: '稍后再看',
onPressed: () async {
var res = await UserHttp
.toViewLater(
bvid:
videoDetailController
.bvid);
SmartDialog.showToast(
res['msg']);
},
icon: const Icon(
Icons.history_outlined),
),
const SizedBox(width: 14)
],
MaterialStateProperty
.resolveWith((states) {
return Theme.of(context)
.colorScheme
.primaryContainer;
}),
),
),
Positioned(
right: 12,
bottom: 10,
child: TextButton.icon(
style: ButtonStyle(
backgroundColor:
MaterialStateProperty
.resolveWith(
(states) {
return Theme.of(context)
.colorScheme
.primaryContainer;
}),
),
onPressed: () => handlePlay(),
icon: const Icon(
Icons.play_circle_outline,
size: 20,
),
label: const Text('Play'),
onPressed: () => handlePlay(),
icon: const Icon(
Icons.play_circle_outline,
size: 20,
),
label: const Text('Play'),
),
],
)),
),
],
),
),
],
)),
),
],
);
},
),

22
lib/pages/video/detail/widgets/header_control.dart
View File

@ -499,6 +499,28 @@ class _HeaderControlState extends State<HeaderControl> {
// ),
// fuc: () => _.screenshot(),
// ),
SizedBox(
width: 34,
height: 34,
child: Obx(
() => IconButton(
style: ButtonStyle(
padding: MaterialStateProperty.all(EdgeInsets.zero),
),
onPressed: () {
_.isOpenDanmu.value = !_.isOpenDanmu.value;
},
icon: Icon(
_.isOpenDanmu.value
? Icons.subtitles_outlined
: Icons.subtitles_off_outlined,
size: 19,
color: Colors.white,
),
),
),
),
const SizedBox(width: 4),
Obx(
() => SizedBox(
width: 45,