copilot/frosty
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions

support draggable divider in fullscreen overlay chat

Browse source
This commit is contained in:
Tommy Chow 2025-09-29 19:59:53 -07:00
parent e1d71b3e9f
commit 56baea7fe4
3 changed files with 106 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

77
lib/screens/channel/channel.dart
View file

@ -360,7 +360,9 @@ class _VideoChatState extends State<VideoChat>
final landscapeChat = AnimatedContainer(
curve: Curves.ease,
duration: const Duration(milliseconds: 200),
duration: _isDividerDragging
? Duration.zero
: const Duration(milliseconds: 200),
width: _chatStore.expandChat
? context.screenWidth / 2
: context.screenWidth * _chatStore.settings.chatWidth,
@ -403,17 +405,68 @@ class _VideoChatState extends State<VideoChat>
children: [
player,
if (settingsStore.showOverlay)
Row(
children:
settingsStore.landscapeChatLeftSide
? [
overlayChat,
Expanded(child: overlay),
]
: [
Expanded(child: overlay),
overlayChat,
],
LayoutBuilder(
builder: (context, constraints) {
final totalWidth = constraints.maxWidth;
final chatWidth = _chatStore.expandChat
? 0.5
: _chatStore.settings.chatWidth;
final draggableDivider = Observer(
builder: (_) => DraggableDivider(
currentWidth: chatWidth,
maxWidth: 0.6,
isResizableOnLeft:
settingsStore.landscapeChatLeftSide,
showHandle: _videoStore.overlayVisible,
showDividerLine: false,
onDragStart: () {
setState(() {
_isDividerDragging = true;
});
},
onDrag: (newWidth) {
if (!_chatStore.expandChat) {
_chatStore.settings.chatWidth =
newWidth;
}
},
onDragEnd: () {
setState(() {
_isDividerDragging = false;
});
},
),
);
return Stack(
children: [
Row(
children:
settingsStore.landscapeChatLeftSide
? [
overlayChat,
Expanded(child: overlay),
]
: [
Expanded(child: overlay),
overlayChat,
],
),
Positioned(
top: 0,
bottom: 0,
left: settingsStore.landscapeChatLeftSide
? (totalWidth * chatWidth) - 12
: null,
right: !settingsStore.landscapeChatLeftSide
? (totalWidth * chatWidth) - 12
: null,
child: draggableDivider,
),
],
);
},
),
],
)

33
lib/screens/channel/chat/widgets/chat_bottom_bar.dart
View file

@ -74,14 +74,9 @@ class ChatBottomBar extends StatelessWidget {
)
.toList();
return BlurredContainer(
gradientDirection: GradientDirection.down,
padding: EdgeInsets.only(
bottom: chatStore.assetsStore.showEmoteMenu
? 0
: MediaQuery.of(context).padding.bottom,
),
child: Column(
final isFullscreenOverlay = chatStore.settings.fullScreen;
final bottomBarContent = Column(
children: [
AnimatedScrollBorder(
scrollController: chatStore.scrollController,
@ -345,8 +340,26 @@ class ChatBottomBar extends StatelessWidget {
),
),
],
),
);
);
return isFullscreenOverlay
? Padding(
padding: EdgeInsets.only(
bottom: chatStore.assetsStore.showEmoteMenu
? 0
: MediaQuery.of(context).padding.bottom,
),
child: bottomBarContent,
)
: BlurredContainer(
gradientDirection: GradientDirection.down,
padding: EdgeInsets.only(
bottom: chatStore.assetsStore.showEmoteMenu
? 0
: MediaQuery.of(context).padding.bottom,
),
child: bottomBarContent,
);
},
);
}

31
lib/widgets/draggable_divider.dart
View file

@ -30,6 +30,9 @@ class DraggableDivider extends StatefulWidget {
/// Whether to show the pill-shaped drag handle
final bool showHandle;
/// Whether to show the background divider line
final bool showDividerLine;
const DraggableDivider({
super.key,
required this.onDrag,
@ -41,6 +44,7 @@ class DraggableDivider extends StatefulWidget {
this.dragAreaWidth = 24.0,
this.isResizableOnLeft = true,
this.showHandle = true,
this.showDividerLine = true,
});
@override
@ -137,21 +141,22 @@ class _DraggableDividerState extends State<DraggableDivider> {
alignment: Alignment.center,
children: [
// Background divider line
Center(
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
curve: Curves.easeOut,
width: _isDragging ? 4.0 : (_isHovered ? 3.0 : 1.0),
decoration: BoxDecoration(
color: _isDragging
? colorScheme.primary
: (_isHovered
? colorScheme.onSurface.withValues(alpha: 0.3)
: colorScheme.onSurface.withValues(alpha: 0.1)),
borderRadius: BorderRadius.circular(2),
if (widget.showDividerLine)
Center(
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
curve: Curves.easeOut,
width: _isDragging ? 4.0 : (_isHovered ? 3.0 : 1.0),
decoration: BoxDecoration(
color: _isDragging
? colorScheme.primary
: (_isHovered
? colorScheme.onSurface.withValues(alpha: 0.3)
: colorScheme.onSurface.withValues(alpha: 0.1)),
borderRadius: BorderRadius.circular(2),
),
),
),
),
// Modern drag handle
if (widget.showHandle)
AnimatedContainer(