ars/iiEsaywebUIapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve composer layout and constrain height

Browse Source 
the modern chat input composer layout to better handle vertical
space and alignment. Change the row crossAxisAlignment from
center to end so controls align to the input bottom. Wrap the animated
container with a ConstrainedBox that limits the composer max height to
25% of the screen, preventing excessive growth on tall displays.

Reorder and clean up the AnimatedContainer/decoration block, extracting
the composer radius constant and preserving styling (background color,
border color/width). Move the text field and inline mic into the same
row structure under the constrained container and retain the isActive
flag and padding. These changes prevent layout overflow, ensure a
consistent border radius, and improve visual alignment of controls.
This commit is contained in:
cogwheel0
2025-10-23 23:19:41 +05:30
parent be62358270
commit 5d898aaca0
1 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
lib/features/chat/widgets/modern_chat_input.dart
View File

@@ -786,7 +786,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
Spacing.sm, Spacing.sm,
), ),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.end,
children: [ children: [
_buildOverflowButton( _buildOverflowButton(
tooltip: AppLocalizations.of(context)!.more, tooltip: AppLocalizations.of(context)!.more,
@@ -796,42 +796,47 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
), ),
const SizedBox(width: Spacing.sm), const SizedBox(width: Spacing.sm),
Expanded( Expanded(
child: AnimatedContainer( child: ConstrainedBox(
duration: const Duration(milliseconds: 180), constraints: BoxConstraints(
curve: Curves.easeOutCubic, maxHeight: MediaQuery.of(context).size.height * 0.25,
padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
constraints: const BoxConstraints(
minHeight: TouchTarget.input,
), ),
decoration: BoxDecoration( child: AnimatedContainer(
color: composerSurface.withValues( duration: const Duration(milliseconds: 180),
alpha: brightness == Brightness.dark ? 0.9 : 0.2, curve: Curves.easeOutCubic,
padding: const EdgeInsets.symmetric(horizontal: Spacing.md),
constraints: const BoxConstraints(
minHeight: TouchTarget.input,
), ),
borderRadius: BorderRadius.circular(AppBorderRadius.round), decoration: BoxDecoration(
border: Border.all( color: composerSurface.withValues(
color: outlineColor.withValues( alpha: brightness == Brightness.dark ? 0.9 : 0.2,
alpha: brightness == Brightness.dark ? 0.32 : 0.2,
), ),
width: BorderWidth.micro, borderRadius: BorderRadius.circular(_composerRadius),
), border: Border.all(
), color: outlineColor.withValues(
child: Row( alpha: brightness == Brightness.dark ? 0.32 : 0.2,
children: [
Expanded(
child: _buildComposerTextField(
brightness: brightness,
sendOnEnter: sendOnEnter,
placeholderBase: placeholderBase,
placeholderFocused: placeholderFocused,
contentPadding: const EdgeInsets.symmetric(
vertical: Spacing.xs,
),
isActive: isActive,
), ),
width: BorderWidth.micro,
), ),
if (!_hasText && voiceAvailable && !isGenerating) ),
_buildInlineMicIcon(voiceAvailable), child: Row(
], children: [
Expanded(
child: _buildComposerTextField(
brightness: brightness,
sendOnEnter: sendOnEnter,
placeholderBase: placeholderBase,
placeholderFocused: placeholderFocused,
contentPadding: const EdgeInsets.symmetric(
vertical: Spacing.xs,
),
isActive: isActive,
),
),
if (!_hasText && voiceAvailable && !isGenerating)
_buildInlineMicIcon(voiceAvailable),
],
),
), ),
), ),
), ),