Linloir/simple-chat-client
1
0
Fork 0
mirror of https://github.com/Linloir/Simple-TCP-Client.git synced 2025-12-18 17:28:11 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improvements:

Browse Source 
- Improve display paddings, sizes & experiences on remote platforms
This commit is contained in:
Linloir 2022-10-23 10:32:46 +08:00
parent a68ef5ba25
commit 7803294ef4
18 changed files with 163 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/chat/chat_page.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-13 14:03:16
* @LastEditTime : 2022-10-20 10:52:30
* @LastEditTime : 2022-10-22 21:30:04
* @Description :
*/
@ -88,7 +88,7 @@ class ChatPage extends StatelessWidget {
//Return history tile
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 24,
horizontal: 16,
vertical: 8
),
child: HistoryTile(

2
lib/chat/cubit/chat_cubit.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-13 14:03:56
* @LastEditTime : 2022-10-20 11:04:40
* @LastEditTime : 2022-10-22 22:46:18
* @Description :
*/

25
lib/chat/view/common/file_box.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-14 17:07:13
* @LastEditTime : 2022-10-18 15:44:34
* @LastEditTime : 2022-10-22 23:31:19
* @Description :
*/
@ -35,7 +35,10 @@ class FileBox extends StatelessWidget {
);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
padding: const EdgeInsets.symmetric(
horizontal: 0.0,
vertical: 6.0
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
@ -43,38 +46,38 @@ class FileBox extends StatelessWidget {
child: history.status == ChatHistoryStatus.none || history.status == ChatHistoryStatus.done ?
Icon(
Icons.file_present_rounded,
size: 24,
size: 20,
color: history.type == ChatHistoryType.income ? Colors.blue[800] : Colors.white.withOpacity(0.8),
) : history.status == ChatHistoryStatus.failed ?
Icon(
Icons.refresh_rounded,
size: 24,
size: 20,
color: history.type == ChatHistoryType.income ? Colors.red[800] : Colors.white.withOpacity(0.8),
) : history.status == ChatHistoryStatus.processing ?
SizedBox(
height: 18.0,
width: 18.0,
height: 16.0,
width: 16.0,
child: LoadingIndicator(
indicatorType: Indicator.ballPulseSync,
colors: [Colors.white.withOpacity(0.8)],
),
) :
SizedBox(
height: 18.0,
width: 18.0,
height: 16.0,
width: 16.0,
child: CircularProgressIndicator(
color: history.type == ChatHistoryType.income ? Colors.blue[800] : Colors.white.withOpacity(0.8),
strokeWidth: 3,
strokeWidth: 2.5,
),
)
),
const SizedBox(width: 18.0,),
const SizedBox(width: 16.0,),
Flexible(
child: Text(
history.message.contentDecoded,
softWrap: true,
style: TextStyle(
fontSize: 20.0,
fontSize: 16.0,
color: history.type == ChatHistoryType.income ? Colors.grey[900] : Colors.white
),
),

4
lib/chat/view/common/image_box.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-14 17:04:20
* @LastEditTime : 2022-10-20 13:47:29
* @LastEditTime : 2022-10-22 23:05:24
* @Description :
*/
@ -25,7 +25,7 @@ class ImageBox extends StatelessWidget {
child: Stack(
children: [
Container(
constraints: const BoxConstraints(maxWidth: 500, maxHeight: 200),
constraints: const BoxConstraints(maxWidth: 200, maxHeight: 150),
child: history.preCachedImage ?? Image.memory(base64Decode(history.message.contentDecoded)),
),
Material(

23
lib/chat/view/common/text_box.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-14 17:04:12
* @LastEditTime : 2022-10-15 10:53:28
* @LastEditTime : 2022-10-22 23:06:38
* @Description :
*/
@ -25,7 +25,10 @@ class TextBox extends StatelessWidget {
return InkWell(
onTap: (){},
child: Padding(
padding: const EdgeInsets.all(8.0),
padding: const EdgeInsets.symmetric(
horizontal: 0.0,
vertical: 6.0
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
@ -35,14 +38,14 @@ class TextBox extends StatelessWidget {
if(history.status == ChatHistoryStatus.sending)
...[
SizedBox(
height: 15.0,
width: 15.0,
height: 12.0,
width: 12.0,
child: CircularProgressIndicator(
color: Colors.white.withOpacity(0.5),
strokeWidth: 2.0,
),
),
const SizedBox(width: 16.0,),
const SizedBox(width: 12.0,),
],
if(history.status == ChatHistoryStatus.failed)
...[
@ -53,7 +56,7 @@ class TextBox extends StatelessWidget {
child: Icon(
Icons.error_rounded,
color: Colors.white.withOpacity(0.5),
size: 20,
size: 18,
),
onTap: () async {
context.read<ChatCubit>().tcpRepository.pushRequest(SendMessageRequest(
@ -64,16 +67,16 @@ class TextBox extends StatelessWidget {
),
),
),
const SizedBox(width: 8.0,),
const SizedBox(width: 6.0,),
],
if(history.status == ChatHistoryStatus.done)
...[
Icon(
Icons.check_rounded,
color: Colors.white.withOpacity(0.5),
size: 20,
size: 18,
),
const SizedBox(width: 12.0,),
const SizedBox(width: 8.0,),
],
],
Flexible(
@ -81,7 +84,7 @@ class TextBox extends StatelessWidget {
history.message.contentDecoded,
softWrap: true,
style: TextStyle(
fontSize: 18,
fontSize: 16,
color: history.type == ChatHistoryType.income ? Colors.grey[900] : Colors.white
),
),

6
lib/chat/view/history_tile.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-13 14:03:45
* @LastEditTime : 2022-10-15 10:52:30
* @LastEditTime : 2022-10-22 21:30:26
* @Description :
*/
@ -34,7 +34,7 @@ class HistoryTile extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
UserAvatar(userid: history.message.senderID),
UserAvatar(userid: history.message.senderID, size: 42,),
const SizedBox(width: 16.0,),
Flexible(
child: InMessageBox(history: history)
@ -58,7 +58,7 @@ class HistoryTile extends StatelessWidget {
child: OutMessageBox(history: history),
),
const SizedBox(width: 16.0,),
UserAvatar(userid: history.message.senderID),
UserAvatar(userid: history.message.senderID, size: 42,),
],
)
),

24
lib/chat/view/in_message_box.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-14 13:49:47
* @LastEditTime : 2022-10-20 13:56:20
* @LastEditTime : 2022-10-23 10:07:48
* @Description :
*/
@ -42,13 +42,6 @@ class InMessageBox extends StatelessWidget {
),
boxShadow: [BoxShadow(blurRadius: 5.0, color: Colors.grey.withOpacity(0.3))]
),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
bottomLeft: Radius.zero,
bottomRight: Radius.circular(8.0)
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
@ -56,7 +49,15 @@ class InMessageBox extends StatelessWidget {
if(history.message.type == MessageType.file)
FileBox(history: history),
if(history.message.type == MessageType.image)
ImageBox(history: history),
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
bottomLeft: Radius.zero,
bottomRight: Radius.circular(8.0)
),
child: ImageBox(history: history),
),
if(history.message.type == MessageType.plaintext)
TextBox(history: history),
if(history.message.type != MessageType.image)
@ -72,7 +73,6 @@ class InMessageBox extends StatelessWidget {
]
],
),
)
),
if(history.message.type == MessageType.image)
...[
@ -96,9 +96,9 @@ class InMessageBox extends StatelessWidget {
if(date.day == DateTime.now().day) {
return '${date.hour}:${date.minute.toString().padLeft(2, '0')}';
}
//If date is yesterday, return 'yesterday'
//If date is yda, return 'yda'
if(date.day == DateTime.now().day - 1) {
return 'yesterday ${date.hour}:${date.minute.toString().padLeft(2, '0')}';
return 'yda ${date.hour}:${date.minute.toString().padLeft(2, '0')}';
}
//If date is within this week, return the weekday in english
if(date.weekday < DateTime.now().weekday) {

12
lib/chat/view/input_box/input_box.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-14 17:54:30
* @LastEditTime : 2022-10-20 11:18:48
* @LastEditTime : 2022-10-23 10:13:22
* @Description :
*/
@ -34,7 +34,12 @@ class InputBox extends StatelessWidget {
),
child: Container(
// height: 64,
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
padding: const EdgeInsets.only(
left: 16.0,
right: 4.0,
top: 16.0,
bottom: 16.0
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
@ -79,7 +84,6 @@ class InputBox extends StatelessWidget {
),
),
),
const SizedBox(width: 8.0,),
IconButton(
onPressed: () {
var chatCubit = context.read<ChatCubit>();
@ -98,7 +102,6 @@ class InputBox extends StatelessWidget {
},
icon: Icon(Icons.attach_file_rounded, color: Colors.grey[700],)
),
const SizedBox(width: 8.0,),
IconButton(
onPressed: () {
var chatCubit = context.read<ChatCubit>();
@ -116,7 +119,6 @@ class InputBox extends StatelessWidget {
},
icon: Icon(Icons.photo_rounded, color: Colors.grey[700],)
),
const SizedBox(width: 8.0,),
BlocBuilder<MessageInputCubit, MessageInputState>(
builder:(context, state) {
return IconButton(

24
lib/chat/view/out_message_box.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-14 13:49:28
* @LastEditTime : 2022-10-19 23:47:20
* @LastEditTime : 2022-10-23 10:07:32
* @Description :
*/
@ -42,13 +42,6 @@ class OutMessageBox extends StatelessWidget {
),
boxShadow: [BoxShadow(blurRadius: 5.0, color: Colors.grey.withOpacity(0.2))]
),
child: ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
bottomRight: Radius.zero
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
@ -56,7 +49,15 @@ class OutMessageBox extends StatelessWidget {
if(history.message.type == MessageType.file)
FileBox(history: history),
if(history.message.type == MessageType.image)
ImageBox(history: history),
ClipRRect(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(8.0),
topRight: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
bottomRight: Radius.zero
),
child: ImageBox(history: history),
),
if(history.message.type == MessageType.plaintext)
TextBox(history: history),
if(history.message.type != MessageType.image)
@ -72,7 +73,6 @@ class OutMessageBox extends StatelessWidget {
],
],
),
)
),
if(history.message.type == MessageType.image)
...[
@ -96,9 +96,9 @@ class OutMessageBox extends StatelessWidget {
if(date.day == DateTime.now().day) {
return '${date.hour}:${date.minute.toString().padLeft(2, '0')}';
}
//If date is yesterday, return 'yesterday'
//If date is yda, return 'yda'
if(date.day == DateTime.now().day - 1) {
return 'yesterday ${date.hour}:${date.minute.toString().padLeft(2, '0')}';
return 'yda ${date.hour}:${date.minute.toString().padLeft(2, '0')}';
}
//If date is within this week, return the weekday in english
if(date.weekday < DateTime.now().weekday) {

6
lib/home/view/message_page/view/message_tile.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-13 13:17:52
* @LastEditTime : 2022-10-20 00:52:14
* @LastEditTime : 2022-10-23 10:09:09
* @Description :
*/
@ -150,9 +150,9 @@ class MessageTile extends StatelessWidget {
if(date.day == DateTime.now().day) {
return '${date.hour}:${date.minute.toString().padLeft(2, '0')}';
}
//If date is yesterday, return 'yesterday'
//If date is yda, return 'yda'
if(date.day == DateTime.now().day - 1) {
return 'yesterday';
return 'yda ${date.hour}:${date.minute.toString().padLeft(2, '0')}';
}
//If date is within this week, return the weekday in english
if(date.weekday < DateTime.now().weekday) {

4
lib/login/login_page.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-12 15:06:30
* @LastEditTime : 2022-10-20 20:55:07
* @LastEditTime : 2022-10-23 10:15:11
* @Description :
*/
@ -81,7 +81,7 @@ class LoginPage extends StatelessWidget {
Expanded(
flex: 6,
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
width: MediaQuery.of(context).size.width * 0.7,
child: const LoginPanel()
)
),

18
lib/login/view/login_form.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-12 16:29:25
* @LastEditTime : 2022-10-20 20:43:51
* @LastEditTime : 2022-10-23 10:28:05
* @Description :
*/
@ -44,6 +44,11 @@ class UsernameInput extends StatelessWidget {
onChanged: (username) {
context.read<LoginCubit>().onUsernameChange(Username.dirty(username));
},
textInputAction: TextInputAction.next,
textCapitalization: TextCapitalization.none,
autocorrect: false,
enableIMEPersonalizedLearning: false,
enableSuggestions: false,
decoration: InputDecoration(
labelText: 'Username',
errorText: state.username.invalid ? 'Invalid username' : null
@ -60,12 +65,21 @@ class PasswordInput extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocBuilder<LoginCubit, LoginState>(
buildWhen: (previous, current) => previous.password != current.password,
buildWhen: (previous, current) => previous.password != current.password || previous.status != current.status,
builder: (context, state) {
return TextField(
onChanged: (password) {
context.read<LoginCubit>().onPasswordChange(Password.dirty(password));
},
onEditingComplete: () {
if(
state.status == FormzStatus.valid ||
state.status == FormzStatus.submissionFailure
) {
context.read<LoginCubit>().onSubmission();
}
},
textInputAction: TextInputAction.done,
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',

4
lib/main.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-10 08:04:53
* @LastEditTime : 2022-10-22 20:43:39
* @LastEditTime : 2022-10-23 10:32:16
* @Description :
*/
import 'package:flutter/gestures.dart';
@ -49,7 +49,7 @@ class SplashPage extends StatelessWidget {
return BlocProvider<InitializationCubit>(
create: (context) {
return InitializationCubit(
serverAddress: '192.168.43.155',
serverAddress: '127.0.0.1',
serverPort: 20706
);
},

4
lib/register/register_page.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-12 17:36:38
* @LastEditTime : 2022-10-20 20:55:17
* @LastEditTime : 2022-10-23 10:15:31
* @Description :
*/
/*
@ -82,7 +82,7 @@ class RegisterPage extends StatelessWidget {
listenWhen: (previous, current) => previous.status != current.status,
child: Center(
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.5,
width: MediaQuery.of(context).size.width * 0.7,
child: Column(
mainAxisSize: MainAxisSize.max,
children: [

18
lib/register/view/register_form.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-12 16:29:25
* @LastEditTime : 2022-10-20 20:54:22
* @LastEditTime : 2022-10-23 10:28:12
* @Description :
*/
@ -44,6 +44,11 @@ class UsernameInput extends StatelessWidget {
onChanged: (username) {
context.read<RegisterCubit>().onUsernameChange(Username.dirty(username));
},
textInputAction: TextInputAction.next,
textCapitalization: TextCapitalization.none,
autocorrect: false,
enableIMEPersonalizedLearning: false,
enableSuggestions: false,
decoration: InputDecoration(
labelText: 'Username',
errorText: state.username.invalid ? 'Invalid username' : null
@ -60,12 +65,21 @@ class PasswordInput extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocBuilder<RegisterCubit, RegisterState>(
buildWhen: (previous, current) => previous.password != current.password,
buildWhen: (previous, current) => previous.password != current.password || previous.status != current.status,
builder: (context, state) {
return TextField(
onChanged: (password) {
context.read<RegisterCubit>().onPasswordChange(Password.dirty(password));
},
onEditingComplete: () {
if(
state.status == FormzStatus.valid ||
state.status == FormzStatus.submissionFailure
) {
context.read<RegisterCubit>().onSubmission();
}
},
textInputAction: TextInputAction.done,
obscureText: true,
decoration: InputDecoration(
labelText: 'Password',

8
lib/search/search_page.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-13 17:04:12
* @LastEditTime : 2022-10-14 10:38:44
* @LastEditTime : 2022-10-23 10:30:41
* @Description :
*/
@ -61,7 +61,7 @@ class SearchPage extends StatelessWidget {
const SizedBox(height: 16.0,),
const Padding(
padding: EdgeInsets.symmetric(
horizontal: 36.0,
horizontal: 24.0,
vertical: 8.0
),
child: Text(
@ -80,7 +80,7 @@ class SearchPage extends StatelessWidget {
const SizedBox(height: 16.0,),
const Padding(
padding: EdgeInsets.symmetric(
horizontal: 36.0,
horizontal: 24.0,
vertical: 8.0
),
child: Text(
@ -102,7 +102,7 @@ class SearchPage extends StatelessWidget {
const SizedBox(height: 16.0,),
const Padding(
padding: EdgeInsets.symmetric(
horizontal: 36.0,
horizontal: 24.0,
vertical: 8.0
),
child: Text(

10
lib/search/view/history_tile.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-13 21:41:49
* @LastEditTime : 2022-10-17 22:23:46
* @LastEditTime : 2022-10-23 10:30:06
* @Description :
*/
@ -24,8 +24,8 @@ class HistoryTile extends StatelessWidget {
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(
vertical: 16.0,
horizontal: 36.0
vertical: 8.0,
horizontal: 24.0
),
child: IntrinsicHeight(
child: Row(
@ -87,9 +87,9 @@ class HistoryTile extends StatelessWidget {
if(date.day == DateTime.now().day) {
return '${date.hour}:${date.minute}';
}
//If date is yesterday, return 'yesterday'
//If date is yda, return 'yda'
if(date.day == DateTime.now().day - 1) {
return 'yesterday';
return 'yda ${date.hour}:${date.minute.toString().padLeft(2, '0')}';
}
//If date is within this week, return the weekday in english
if(date.weekday < DateTime.now().weekday) {

6
lib/search/view/user_tile.dart
View File

@ -1,7 +1,7 @@
/*
* @Author : Linloir
* @Date : 2022-10-13 21:41:41
* @LastEditTime : 2022-10-18 11:28:17
* @LastEditTime : 2022-10-23 10:30:24
* @Description :
*/
@ -35,8 +35,8 @@ class UserTile extends StatelessWidget {
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 36,
vertical: 16,
horizontal: 24,
vertical: 8,
),
child: Row(
children: [