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

refactor: improve chat input styling and responsiveness

Browse Source 
- Enhanced the chat input UI with dynamic background and border colors based on theme brightness and active state.
- Introduced animated containers for smoother transitions in button and input styles, improving user experience.
- Updated the button's shadow and border properties to align with the current theme, ensuring better visual consistency.
- Refactored the layout to utilize a more responsive design, enhancing usability across different devices.
This commit is contained in:
cogwheel0
2025-10-02 12:22:07 +05:30
parent 2538181f8a
commit ba239c47f0
1 changed files with 80 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1171,12 +1171,35 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
} }
const double iconSize = IconSize.large; const double iconSize = IconSize.large;
const double buttonSize = TouchTarget.minimum;
final Brightness brightness = Theme.of(context).brightness;
final bool isActive = activeColor != null;
final Color iconColor = !enabled final Color iconColor = !enabled
? context.conduitTheme.textPrimary.withValues(alpha: Alpha.disabled) ? context.conduitTheme.textPrimary.withValues(alpha: Alpha.disabled)
: (activeColor ?? : (activeColor ??
context.conduitTheme.textPrimary.withValues(alpha: Alpha.strong)); context.conduitTheme.textPrimary.withValues(alpha: Alpha.strong));
final Color baseBackground = brightness == Brightness.dark
? context.conduitTheme.surfaceContainerHighest.withValues(alpha: 0.7)
: context.conduitTheme.surfaceContainerHighest;
final Color backgroundColor = !enabled
? baseBackground.withValues(alpha: Alpha.disabled)
: isActive
? context.conduitTheme.buttonPrimary.withValues(alpha: 0.16)
: baseBackground;
final Color borderColor = isActive
? context.conduitTheme.buttonPrimary.withValues(alpha: 0.6)
: context.conduitTheme.cardBorder.withValues(alpha: 0.45);
final BoxShadow buttonShadow = BoxShadow(
color: context.conduitTheme.cardShadow.withValues(
alpha: brightness == Brightness.dark ? 0.36 : 0.18,
),
blurRadius: 18,
spreadRadius: -6,
offset: const Offset(0, 8),
);
return Tooltip( return Tooltip(
message: tooltip, message: tooltip,
child: Opacity( child: Opacity(
@@ -1184,17 +1207,27 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
child: InkWell( child: InkWell(
borderRadius: BorderRadius.circular(AppBorderRadius.circular), borderRadius: BorderRadius.circular(AppBorderRadius.round),
onTap: enabled onTap: enabled
? () { ? () {
HapticFeedback.selectionClick(); HapticFeedback.selectionClick();
_showOverflowSheet(); _showOverflowSheet();
} }
: null, : null,
child: SizedBox( child: AnimatedContainer(
width: TouchTarget.minimum, duration: const Duration(milliseconds: 160),
height: TouchTarget.minimum, curve: Curves.easeOutCubic,
child: Icon(icon, size: iconSize, color: iconColor), width: buttonSize,
height: buttonSize,
decoration: BoxDecoration(
color: backgroundColor,
borderRadius: BorderRadius.circular(AppBorderRadius.round),
border: Border.all(color: borderColor, width: BorderWidth.thin),
boxShadow: enabled ? <BoxShadow>[buttonShadow] : const [],
),
child: Center(
child: Icon(icon, size: iconSize, color: iconColor),
),
), ),
), ),
), ),
@@ -1281,17 +1314,6 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
ignoring: !enabled, ignoring: !enabled,
child: Material( child: Material(
color: Colors.transparent, color: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(radius),
side: BorderSide(
color: enabled
? context.conduitTheme.buttonPrimary
: context.conduitTheme.cardBorder.withValues(
alpha: Alpha.medium,
),
width: BorderWidth.regular,
),
),
child: InkWell( child: InkWell(
borderRadius: BorderRadius.circular(radius), borderRadius: BorderRadius.circular(radius),
onTap: enabled onTap: enabled
@@ -1300,26 +1322,55 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
_sendMessage(); _sendMessage();
} }
: null, : null,
child: Container( child: AnimatedContainer(
duration: const Duration(milliseconds: 160),
curve: Curves.easeOutCubic,
width: buttonSize, width: buttonSize,
height: buttonSize, height: buttonSize,
decoration: BoxDecoration( decoration: BoxDecoration(
color: enabled color: enabled
? context.conduitTheme.buttonPrimary ? context.conduitTheme.buttonPrimary
: context.conduitTheme.cardBackground, : context.conduitTheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(radius), borderRadius: BorderRadius.circular(radius),
boxShadow: ConduitShadows.button, border: Border.all(
color: enabled
? context.conduitTheme.buttonPrimary.withValues(
alpha: 0.8,
)
: context.conduitTheme.cardBorder.withValues(
alpha: 0.45,
),
width: BorderWidth.thin,
),
boxShadow: enabled
? <BoxShadow>[
BoxShadow(
color: context.conduitTheme.cardShadow.withValues(
alpha:
Theme.of(context).brightness ==
Brightness.dark
? 0.36
: 0.18,
),
blurRadius: 18,
spreadRadius: -6,
offset: const Offset(0, 8),
),
]
: const [],
), ),
child: Icon( child: Center(
Platform.isIOS child: Icon(
? CupertinoIcons.arrow_up Platform.isIOS
: Icons.arrow_upward, ? CupertinoIcons.arrow_up
size: IconSize.medium, : Icons.arrow_upward,
color: enabled size: IconSize.large,
? context.conduitTheme.buttonPrimaryText color: enabled
: context.conduitTheme.textPrimary.withValues( ? context.conduitTheme.buttonPrimaryText
alpha: Alpha.disabled, : context.conduitTheme.textPrimary.withValues(
), alpha: Alpha.disabled,
),
),
), ),
), ),
), ),