From 003cfec9d96cc584253903e83115919513cf56b0 Mon Sep 17 00:00:00 2001 From: Evgan Date: Tue, 26 Jul 2022 11:35:24 +0300 Subject: [PATCH] hm-lesson18/Evgan --- flutter_base/lib/ui_practice/data.dart | 74 ++++++++++++++++++++++ flutter_base/lib/ui_practice/main.dart | 86 ++++++++++++++++++++++---- 2 files changed, 148 insertions(+), 12 deletions(-) diff --git a/flutter_base/lib/ui_practice/data.dart b/flutter_base/lib/ui_practice/data.dart index 02ac0e7..734851e 100644 --- a/flutter_base/lib/ui_practice/data.dart +++ b/flutter_base/lib/ui_practice/data.dart @@ -27,3 +27,77 @@ final List resentUsersList = List.generate( lastMessage: "Last message string", ), ); + +enum MessageType { input, output } + +class ChatItemMessageModel { + final MessageType type; + final String date; + final String text; + + ChatItemMessageModel({ + required this.type, + required this.date, + required this.text, + }); +} + +final List mockMessagesList = [ + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:28', + text: 'text output 16'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:28', + text: 'text output 15'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:27', + text: 'text output 14'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:27', + text: 'text output 13'), + ChatItemMessageModel( + type: MessageType.input, date: '2022-06-20 20:20', text: 'text input 12'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:26', + text: + 'text text text text text text text text text text text text text output 11'), + ChatItemMessageModel( + type: MessageType.input, + date: '2022-06-20 20:25', + text: 'text text text text text text text input 10'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:24', + text: 'text output 9'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:24', + text: 'text output 8'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:20', + text: 'text output 7'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:20', + text: 'text output 6'), + ChatItemMessageModel( + type: MessageType.output, + date: '2022-06-20 20:20', + text: 'text output 5'), + ChatItemMessageModel( + type: MessageType.input, date: '2022-06-28 20:19', text: 'Хорошо'), + ChatItemMessageModel( + type: MessageType.input, + date: '2022-06-28 20:18', + text: 'Привет привет?'), + ChatItemMessageModel( + type: MessageType.output, date: '2022-06-28 20:17', text: 'Как дела'), + ChatItemMessageModel( + type: MessageType.output, date: '2022-06-28 20:16', text: 'Привет'), +]; diff --git a/flutter_base/lib/ui_practice/main.dart b/flutter_base/lib/ui_practice/main.dart index a60389a..6d077e6 100644 --- a/flutter_base/lib/ui_practice/main.dart +++ b/flutter_base/lib/ui_practice/main.dart @@ -1,3 +1,4 @@ +import 'dart:developer'; import 'dart:ui'; import 'package:flutter/material.dart'; @@ -10,6 +11,9 @@ abstract class AppColors { static const Color mainBgColor = Color.fromRGBO(27, 32, 45, 1); static const Color secondaryBgColor = Color.fromRGBO(41, 47, 63, 1); + static const Color inputMsgBgColor = Color.fromRGBO(55, 62, 78, 1); + static const Color outputMsgBgColor = Color.fromRGBO(122, 129, 148, 1); + static const Color textPrimaryColor = Colors.white; static const Color textSecondaryColor = Color.fromRGBO(179, 185, 201, 1); } @@ -57,6 +61,13 @@ abstract class AppTextStyle { fontWeight: FontWeight.w400, color: AppColors.textSecondaryColor, ); + + static const TextStyle hint = TextStyle( + fontFamily: 'Poppins', + fontSize: 12.0, + fontWeight: FontWeight.w400, + color: AppColors.textSecondaryColor, + ); } void main() { @@ -268,6 +279,44 @@ class _ChatListItem extends StatelessWidget { } } +class _ChatMsg extends StatelessWidget { + final ChatItemMessageModel msgData; + const _ChatMsg({Key? key, required this.msgData}) : super(key: key); + + @override + Widget build(BuildContext context) { + double _widthStage = MediaQuery.of(context).size.width; + double _maxWidth = _widthStage * 0.80; + final Color _bgColot = msgData.type == MessageType.input + ? AppColors.inputMsgBgColor + : AppColors.outputMsgBgColor; + final AlignmentGeometry _aligment = msgData.type == MessageType.input + ? Alignment.topLeft + : Alignment.topRight; + final TextAlign _textAlign = + msgData.type == MessageType.input ? TextAlign.left : TextAlign.right; + // final + return Padding( + padding: const EdgeInsets.all(10), + child: Container( + width: _widthStage, + alignment: _aligment, + child: Container( + constraints: BoxConstraints(maxWidth: _maxWidth), + decoration: BoxDecoration( + color: _bgColot, borderRadius: BorderRadius.circular(20)), + child: Padding( + padding: const EdgeInsets.only( + bottom: 12, left: 20, right: 20, top: 12), + child: Text( + msgData.text, + textAlign: _textAlign, + style: AppTextStyle.label, + )), + ))); + } +} + class ChatDetail extends StatelessWidget { const ChatDetail({Key? key}) : super(key: key); @@ -312,18 +361,30 @@ class ChatDetail extends StatelessWidget { body: Column( children: [ Expanded( - child: ListView.separated( - separatorBuilder: (context, index) { - if (index != 5 ) { - return Container(); - } - return Divider(); - }, - itemBuilder: (context, index) { - return const Text("asdasd"); - }, - itemCount: 120, - )), + child: ListView.builder( + reverse: true, + itemBuilder: ((context, index) { + final ChatItemMessageModel msgItem = + mockMessagesList[index]; + final bool isNewDate = index == 0 || + msgItem.date != mockMessagesList[index - 1].date; + if (isNewDate) { + return Column( + children: [ + Padding( + padding: const EdgeInsets.all(10), + child: Text(msgItem.date, + style: AppTextStyle.label)), + _ChatMsg(msgData: msgItem) + ], + ); + } else { + return Column( + children: [_ChatMsg(msgData: msgItem)], + ); + } + }), + itemCount: mockMessagesList.length)), Container( padding: const EdgeInsets.only( left: 14, @@ -364,6 +425,7 @@ class ChatDetail extends StatelessWidget { child: const TextField( decoration: InputDecoration( hintText: "Message", + hintStyle: AppTextStyle.hint, border: InputBorder.none, ), ),