Improve message input layout

This commit is contained in:
Janez T
2026-03-06 20:01:00 +01:00
parent 96feb75712
commit 7cd5351921
2 changed files with 302 additions and 122 deletions

View File

@@ -103,15 +103,28 @@ class _HomeScreenState extends State<HomeScreen>
void _initTabController() { void _initTabController() {
_tabController = TabController(length: _enabledTabs.length, vsync: this); _tabController = TabController(length: _enabledTabs.length, vsync: this);
_tabController.addListener(_onTabChanged); _tabController.addListener(_onTabChanged);
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
_handleTabActivated(_currentTab);
});
} }
void _onTabChanged() { void _onTabChanged() {
final previousTab = _currentTab;
final nextIndex = _tabController.index;
setState(() { setState(() {
_currentIndex = _tabController.index; _currentIndex = nextIndex;
if (_currentTab != _HomeTab.map) { if (_currentTab != _HomeTab.map) {
_isMapFullscreen = false; _isMapFullscreen = false;
} }
}); });
final nextTab = _currentTab;
if (previousTab != nextTab) {
_handleTabActivated(nextTab);
}
} }
void _updateTabController({ void _updateTabController({
@@ -158,6 +171,23 @@ class _HomeScreenState extends State<HomeScreen>
} }
} }
void _handleTabActivated(_HomeTab tab) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
switch (tab) {
case _HomeTab.messages:
context.read<MessagesProvider>().markAllAsRead();
break;
case _HomeTab.contacts:
context.read<ContactsProvider>().markAllAsViewed();
break;
case _HomeTab.map:
break;
}
});
}
Future<void> _loadRxTxPreference() async { Future<void> _loadRxTxPreference() async {
final prefs = await SharedPreferences.getInstance(); final prefs = await SharedPreferences.getInstance();
if (mounted) { if (mounted) {

View File

@@ -287,6 +287,18 @@ class _MessagesTabState extends State<MessagesTab> {
return 'Select recipient'; return 'Select recipient';
} }
String _getDestinationLabel() {
if (_destinationType ==
MessageDestinationPreferences.destinationTypeChannel &&
_selectedRecipient != null) {
return _selectedRecipient!.getLocalizedDisplayName(context);
}
if (_selectedRecipient != null) {
return _selectedRecipient!.displayName;
}
return 'Public Channel';
}
Future<void> _sendMessage() async { Future<void> _sendMessage() async {
final text = _textController.text.trim(); final text = _textController.text.trim();
if (text.isEmpty) return; if (text.isEmpty) return;
@@ -1561,95 +1573,182 @@ class _MessagesTabState extends State<MessagesTab> {
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Padding( SafeArea(
padding: const EdgeInsets.symmetric( top: false,
horizontal: 8, child: Padding(
vertical: 8, padding: const EdgeInsets.fromLTRB(12, 12, 12, 12),
), child: Column(
child: Row( mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
// Quick actions (+) button Row(
IconButton( children: [
icon: Icon(_isRecording ? Icons.stop : Icons.add), Container(
tooltip: _isRecording width: 46,
? 'Stop recording' height: 46,
: 'More actions', decoration: BoxDecoration(
onPressed: _isRecording color: Theme.of(context)
? _stopAndSendVoice .colorScheme
: _showComposerActions, .primaryContainer
style: IconButton.styleFrom( .withValues(alpha: 0.95),
backgroundColor: Theme.of( shape: BoxShape.circle,
context, ),
).colorScheme.primaryContainer, child: IconButton(
foregroundColor: _isRecording icon: Icon(
? Colors.red _isRecording ? Icons.stop : Icons.add,
: Theme.of( ),
context, tooltip: _isRecording
).colorScheme.onPrimaryContainer, ? 'Stop recording'
: 'More actions',
onPressed: _isRecording
? _stopAndSendVoice
: _showComposerActions,
color: _isRecording
? Colors.red
: Theme.of(
context,
).colorScheme.onPrimaryContainer,
),
),
const SizedBox(width: 10),
Expanded(
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(22),
onTap: _showRecipientSelector,
child: Ink(
height: 46,
decoration: BoxDecoration(
color:
_destinationType ==
MessageDestinationPreferences
.destinationTypeChannel
? Theme.of(context)
.colorScheme
.surfaceContainerHighest
: Theme.of(
context,
).colorScheme.secondaryContainer,
borderRadius: BorderRadius.circular(22),
border: Border.all(
color: Theme.of(
context,
).dividerColor.withValues(alpha: 0.7),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 14,
),
child: Row(
children: [
Icon(
_getDestinationIcon(),
size: 18,
),
const SizedBox(width: 10),
Expanded(
child: Text(
_getDestinationLabel(),
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color:
_destinationType ==
MessageDestinationPreferences
.destinationTypeChannel
? Theme.of(
context,
).colorScheme.onSurface
: Theme.of(context)
.colorScheme
.onSecondaryContainer,
),
),
),
Icon(
Icons.expand_more_rounded,
size: 20,
color: Theme.of(
context,
).colorScheme.onSurfaceVariant,
),
],
),
),
),
),
),
),
],
), ),
), const SizedBox(height: 12),
const SizedBox(width: 4), Row(
// Destination switcher button crossAxisAlignment: CrossAxisAlignment.center,
IconButton( children: [
icon: Icon(_getDestinationIcon()), Expanded(
tooltip: _getDestinationTooltip(), child: AnimatedContainer(
onPressed: _showRecipientSelector, duration: const Duration(milliseconds: 180),
style: IconButton.styleFrom( constraints: const BoxConstraints(
backgroundColor: minHeight: 48,
_destinationType == maxHeight: 140,
MessageDestinationPreferences ),
.destinationTypeChannel decoration: BoxDecoration(
? Theme.of( color: Theme.of(
context, context,
).colorScheme.surfaceContainerHighest ).colorScheme.surfaceContainerHigh,
: Theme.of( borderRadius: BorderRadius.circular(28),
context, border: Border.all(
).colorScheme.secondaryContainer, color: _focusNode.hasFocus
foregroundColor: ? Theme.of(
_destinationType == context,
MessageDestinationPreferences ).colorScheme.primary
.destinationTypeChannel : Theme.of(context).dividerColor
? Theme.of(context).colorScheme.onSurface .withValues(alpha: 0.6),
: Theme.of( width: _focusNode.hasFocus ? 1.5 : 1,
context, ),
).colorScheme.onSecondaryContainer, ),
), child: Padding(
), padding: const EdgeInsets.symmetric(
const SizedBox(width: 4), horizontal: 18,
Expanded( vertical: 12,
child: TextField( ),
controller: _textController, child: TextField(
focusNode: _focusNode, controller: _textController,
maxLength: _maxCharacters, focusNode: _focusNode,
maxLines: null, minLines: 1,
maxLengthEnforcement: MaxLengthEnforcement.enforced, maxLines: 4,
style: const TextStyle(fontSize: 14), keyboardType: TextInputType.multiline,
decoration: InputDecoration( inputFormatters: [
hintText: AppLocalizations.of( LengthLimitingTextInputFormatter(
context, _maxCharacters,
)!.typeYourMessage, ),
hintStyle: const TextStyle(fontSize: 14), ],
border: OutlineInputBorder( style: const TextStyle(fontSize: 15),
borderRadius: BorderRadius.circular(24), textAlignVertical:
TextAlignVertical.center,
decoration: InputDecoration(
hintText: AppLocalizations.of(
context,
)!.typeYourMessage,
hintStyle: TextStyle(
fontSize: 15,
color: Theme.of(
context,
).colorScheme.onSurfaceVariant,
),
border: InputBorder.none,
isCollapsed: true,
),
textInputAction: TextInputAction.newline,
),
),
),
), ),
contentPadding: const EdgeInsets.symmetric( const SizedBox(width: 10),
horizontal: 16, Builder(
vertical: 10,
),
isDense: true,
counterText: _characterCount >= 150
? '$_characterCount/$_maxCharacters'
: '',
counterStyle: TextStyle(
fontSize: 10,
color: _characterCount > _maxCharacters * 0.9
? Colors.orange
: Theme.of(
context,
).textTheme.bodySmall?.color,
),
suffixIcon: Builder(
builder: (context) { builder: (context) {
final canSendText = final canSendText =
!_isRecording && !_isRecording &&
@@ -1698,48 +1797,99 @@ class _MessagesTabState extends State<MessagesTab> {
(_voiceSupported && _isRecording) (_voiceSupported && _isRecording)
? () => _stopAndSendVoice() ? () => _stopAndSendVoice()
: null, : null,
child: IconButton( child: Column(
icon: _isSendingVoice mainAxisSize: MainAxisSize.min,
? const SizedBox( children: [
width: 18, AnimatedContainer(
height: 18, duration: const Duration(
child: milliseconds: 180,
CircularProgressIndicator( ),
strokeWidth: 2, width: 48,
), height: 48,
) decoration: BoxDecoration(
: Icon( color:
_isRecording canSendText || _isRecording
? Icons.mic ? Theme.of(
: Icons.send_rounded, context,
size: 22, ).colorScheme.primary
color: _isRecording : Theme.of(context)
? Colors.red .colorScheme
: (_textController.text .surfaceContainerHighest,
.trim() shape: BoxShape.circle,
.isEmpty boxShadow:
? Theme.of( canSendText || _isRecording
context, ? [
).disabledColor BoxShadow(
: Theme.of(context) color:
Theme.of(context)
.colorScheme .colorScheme
.primary), .primary
), .withValues(
onPressed: canSendText alpha: 0.28,
? _sendMessage ),
: null, blurRadius: 16,
offset: const Offset(
0,
6,
),
),
]
: null,
),
child: _isSendingVoice
? Center(
child:
CircularProgressIndicator(
strokeWidth: 2,
color:
Theme.of(
context,
)
.colorScheme
.onPrimary,
),
)
: Icon(
_isRecording
? Icons.mic_rounded
: Icons.send_rounded,
color:
canSendText ||
_isRecording
? Theme.of(context)
.colorScheme
.onPrimary
: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
const SizedBox(height: 6),
Text(
'$_characterCount/$_maxCharacters',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color:
_characterCount >
_maxCharacters * 0.9
? Colors.orange.shade800
: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
],
), ),
), ),
), ),
); );
}, },
), ),
), ],
textInputAction: TextInputAction.send,
onSubmitted: (_) => _sendMessage(),
), ),
), ],
], ),
), ),
), ),
], ],