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

89
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 buttonSize = TouchTarget.minimum;
final Brightness brightness = Theme.of(context).brightness;
final bool isActive = activeColor != null;
final Color iconColor = !enabled
? context.conduitTheme.textPrimary.withValues(alpha: Alpha.disabled)
: (activeColor ??
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(
message: tooltip,
child: Opacity(
@@ -1184,21 +1207,31 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(AppBorderRadius.circular),
borderRadius: BorderRadius.circular(AppBorderRadius.round),
onTap: enabled
? () {
HapticFeedback.selectionClick();
_showOverflowSheet();
}
: null,
child: SizedBox(
width: TouchTarget.minimum,
height: TouchTarget.minimum,
child: AnimatedContainer(
duration: const Duration(milliseconds: 160),
curve: Curves.easeOutCubic,
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,
child: Material(
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(
borderRadius: BorderRadius.circular(radius),
onTap: enabled
@@ -1300,21 +1322,49 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
_sendMessage();
}
: null,
child: Container(
child: AnimatedContainer(
duration: const Duration(milliseconds: 160),
curve: Curves.easeOutCubic,
width: buttonSize,
height: buttonSize,
decoration: BoxDecoration(
color: enabled
? context.conduitTheme.buttonPrimary
: context.conduitTheme.cardBackground,
: context.conduitTheme.surfaceContainerHighest,
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: Center(
child: Icon(
Platform.isIOS
? CupertinoIcons.arrow_up
: Icons.arrow_upward,
size: IconSize.medium,
size: IconSize.large,
color: enabled
? context.conduitTheme.buttonPrimaryText
: context.conduitTheme.textPrimary.withValues(
@@ -1326,6 +1376,7 @@ class _ModernChatInputState extends ConsumerState<ModernChatInput>
),
),
),
),
);
}