ThatOneJackalGuy/OpenContacts
1
0
Fork 0
Code Issues 3 Pull requests Projects 1 Releases 2 Packages Wiki Activity Actions

Improve design of message view text input

Browse source
This commit is contained in:
Nutcake 2023-05-16 10:51:55 +02:00
parent 2b7b4e2dba
commit 3fcb9b7a49
2 changed files with 71 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/widgets/messages/message_bubble.dart
View file

@ -25,7 +25,7 @@ class MessageBubble extends StatelessWidget {
Material( Material(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
color: backgroundColor, color: backgroundColor,
textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(color: foregroundColor), textStyle: Theme.of(context).textTheme.bodySmall?.copyWith(color: foregroundColor),
child: Container( child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8), padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: switch (message.type) { child: switch (message.type) {

45
lib/widgets/messages/messages_list.dart
View file

@ -18,13 +18,14 @@ class MessagesList extends StatefulWidget {
State<StatefulWidget> createState() => _MessagesListState(); State<StatefulWidget> createState() => _MessagesListState();
} }
class _MessagesListState extends State<MessagesList> { class _MessagesListState extends State<MessagesList> with SingleTickerProviderStateMixin {
final TextEditingController _messageTextController = TextEditingController(); final TextEditingController _messageTextController = TextEditingController();
final ScrollController _sessionListScrollController = ScrollController(); final ScrollController _sessionListScrollController = ScrollController();
final ScrollController _messageScrollController = ScrollController(); final ScrollController _messageScrollController = ScrollController();
bool _isSendable = false; bool _isSendable = false;
bool _showSessionListScrollChevron = false; bool _showSessionListScrollChevron = false;
bool _showBottomBarShadow = false;
double get _shevronOpacity => _showSessionListScrollChevron ? 1.0 : 0.0; double get _shevronOpacity => _showSessionListScrollChevron ? 1.0 : 0.0;
@ -52,6 +53,19 @@ class _MessagesListState extends State<MessagesList> {
}); });
} }
}); });
_messageScrollController.addListener(() {
if (!_messageScrollController.hasClients) return;
if (_messageScrollController.position.atEdge && _messageScrollController.position.pixels == 0 &&
_showBottomBarShadow) {
setState(() {
_showBottomBarShadow = false;
});
} else if (!_showBottomBarShadow) {
setState(() {
_showBottomBarShadow = true;
});
}
});
} }
@override @override
@ -74,7 +88,11 @@ class _MessagesListState extends State<MessagesList> {
Text(widget.friend.username), Text(widget.friend.username),
if (widget.friend.isHeadless) Padding( if (widget.friend.isHeadless) Padding(
padding: const EdgeInsets.only(left: 12), padding: const EdgeInsets.only(left: 12),
child: Icon(Icons.dns, size: 18, color: Theme.of(context).colorScheme.onSecondaryContainer.withAlpha(150),), child: Icon(Icons.dns, size: 18, color: Theme
.of(context)
.colorScheme
.onSecondaryContainer
.withAlpha(150),),
), ),
], ],
), ),
@ -177,13 +195,21 @@ class _MessagesListState extends State<MessagesList> {
), ),
], ],
), ),
bottomNavigationBar: Padding( bottomNavigationBar: AnimatedContainer(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: _showBottomBarShadow ? 8 : 0,
color: Theme.of(context).shadowColor,
offset: const Offset(0, 4),
),
],
color: Theme.of(context).colorScheme.background,
),
padding: MediaQuery padding: MediaQuery
.of(context) .of(context)
.viewInsets, .viewInsets + const EdgeInsets.symmetric(horizontal: 4),
child: BottomAppBar( duration: const Duration(milliseconds: 250),
elevation: 0.0,
padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 6),
child: Row( child: Row(
children: [ children: [
Expanded( Expanded(
@ -209,7 +235,7 @@ class _MessagesListState extends State<MessagesList> {
isDense: true, isDense: true,
hintText: "Send a message to ${widget.friend hintText: "Send a message to ${widget.friend
.username}...", .username}...",
contentPadding: const EdgeInsets.all(16), contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(24) borderRadius: BorderRadius.circular(24)
) )
@ -255,13 +281,12 @@ class _MessagesListState extends State<MessagesList> {
iconSize: 28, iconSize: 28,
icon: const Icon(Icons.send), icon: const Icon(Icons.send),
); );
} },
), ),
) )
], ],
), ),
), ),
),
); );
} }
} }