443 lines
14 KiB
Dart
443 lines
14 KiB
Dart
import 'dart:async';
|
|
|
|
import 'package:active_ecommerce_seller_app/custom/buttons.dart';
|
|
import 'package:active_ecommerce_seller_app/custom/device_info.dart';
|
|
import 'package:active_ecommerce_seller_app/custom/localization.dart';
|
|
import 'package:active_ecommerce_seller_app/custom/my_app_bar.dart';
|
|
import 'package:active_ecommerce_seller_app/custom/my_widget.dart';
|
|
import 'package:active_ecommerce_seller_app/data_model/messages_response.dart';
|
|
import 'package:active_ecommerce_seller_app/my_theme.dart';
|
|
import 'package:active_ecommerce_seller_app/repositories/chat_repository.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
|
|
import 'package:shimmer/shimmer.dart';
|
|
|
|
class Conversation extends StatefulWidget {
|
|
final id;
|
|
final userImgUrl;
|
|
final name;
|
|
|
|
const Conversation({Key? key, this.id, this.userImgUrl, this.name}) : super(key: key);
|
|
|
|
@override
|
|
_ConversationState createState() => _ConversationState();
|
|
}
|
|
|
|
class _ConversationState extends State<Conversation> {
|
|
List<Message> _messages = [];
|
|
bool _faceData = false;
|
|
|
|
Timer? timer;
|
|
|
|
TextEditingController messageTextController = TextEditingController();
|
|
String _messege = "";
|
|
|
|
getMessages() async {
|
|
var response = await ChatRepository().getMessages(widget.id);
|
|
_messages.addAll(response.data!);
|
|
_faceData = true;
|
|
setState(() {});
|
|
}
|
|
|
|
clearTypeSMSTextController(){
|
|
messageTextController.text ="";
|
|
setState(() {
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
sendMessage()async{
|
|
clearTypeSMSTextController();
|
|
var response = await ChatRepository().sendMessages(widget.id,_messege);
|
|
|
|
if(response.result!){
|
|
refresh();
|
|
}
|
|
}
|
|
|
|
faceData() {
|
|
getMessages();
|
|
}
|
|
|
|
clearData() {
|
|
_messages = [];
|
|
|
|
}
|
|
|
|
Future<bool> resetData() async {
|
|
clearData();
|
|
faceData();
|
|
return true;
|
|
}
|
|
|
|
Future<void> refresh() async {
|
|
print("refresh");
|
|
await resetData();
|
|
return Future.delayed(const Duration(seconds: 1));
|
|
}
|
|
|
|
@override
|
|
void initState() {
|
|
faceData();
|
|
timer = Timer.periodic(const Duration(seconds: 10), (Timer t) => refresh());
|
|
// TODO: implement initState
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
timer?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: buildAppBar(context),
|
|
body: Stack(
|
|
children: [
|
|
_faceData ? conversations(): chatShimmer(),
|
|
typeSmsSection(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
AppBar buildAppBar(BuildContext context) {
|
|
return AppBar(
|
|
leadingWidth: 40,
|
|
centerTitle: false,
|
|
elevation: 8,
|
|
title: Container(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
width: 35,
|
|
height: 35,
|
|
margin: EdgeInsets.only(right: 14),
|
|
child: Stack(
|
|
children: [
|
|
MyWidget.roundImageWithPlaceholder(elevation: 4,
|
|
borderWidth: 1,
|
|
url: widget.userImgUrl, width: 35.0, height: 35.0, fit: BoxFit.cover,borderRadius: 16),
|
|
Visibility(
|
|
visible: false,
|
|
child: Positioned(
|
|
right: 1,
|
|
top: 2,
|
|
child: MyWidget().myContainer(
|
|
height: 7,
|
|
width: 7,
|
|
borderRadius: 7,
|
|
borderColor: Colors.white,
|
|
bgColor: true ? Colors.green : MyTheme.grey_153,
|
|
borderWith: 1)),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
|
|
Container(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Container(
|
|
width: DeviceInfo(context).getWidth() / 3,
|
|
child: Text(
|
|
widget.name,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style:const TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: MyTheme.app_accent_color),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
/*Row(
|
|
children: [
|
|
IconButton(
|
|
splashRadius: 20.0,
|
|
padding: EdgeInsets.zero,
|
|
onPressed: () {},
|
|
icon: Image.asset(
|
|
"assets/icon/audio_call.png",
|
|
width: 20,
|
|
height: 20,
|
|
)),
|
|
IconButton(
|
|
padding: EdgeInsets.zero,
|
|
splashRadius: 20.0,
|
|
onPressed: () {},
|
|
icon: Image.asset(
|
|
"assets/icon/video_call.png",
|
|
width: 20,
|
|
height: 20,
|
|
)),
|
|
],
|
|
),*/
|
|
],
|
|
),
|
|
),
|
|
backgroundColor: Colors.white,
|
|
leading: Container(
|
|
margin: EdgeInsets.only(left: 10),
|
|
child: Buttons(
|
|
padding: EdgeInsets.zero,
|
|
onPressed: () {
|
|
Navigator.pop(context);
|
|
},
|
|
child: Image.asset(
|
|
'assets/icon/back_arrow.png',
|
|
height: 20,
|
|
width: 20,
|
|
//color: MyTheme.dark_grey,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
conversations() {
|
|
return SingleChildScrollView(
|
|
reverse: true,
|
|
child: Container(
|
|
margin:const EdgeInsets.only(bottom: 60),
|
|
child: ListView.builder(
|
|
reverse: true,
|
|
itemCount: _messages.length,
|
|
shrinkWrap: true,
|
|
padding: const EdgeInsets.only(top: 10, bottom: 10),
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
itemBuilder: (context, index) {
|
|
//print(_messages[index+1].year.toString());
|
|
return Container(
|
|
padding:
|
|
const EdgeInsets.only(left: 14, right: 14, top: 10, bottom: 10),
|
|
//margin: EdgeInsets.only(right: messages[index].messageType == "receiver"?0:50,left:messages[index].messageType == "receiver"? 50:0),
|
|
child: Column(
|
|
children: [
|
|
(index==_messages.length-1) || _messages[index].year!=_messages[index+1].year || _messages[index].month!=_messages[index+1].month?
|
|
MyWidget().myContainer(
|
|
width: 100,
|
|
height: 20,
|
|
borderRadius: 5,
|
|
borderColor: MyTheme.light_grey,
|
|
child: Text(""+
|
|
_messages[index].date.toString(),
|
|
style:const TextStyle(fontSize: 8, color: Colors.grey),
|
|
),
|
|
):Container(),
|
|
const SizedBox(height: 5,),
|
|
Align(
|
|
alignment: (_messages[index].sendType=="seller"
|
|
? Alignment.topRight
|
|
: Alignment.topLeft),
|
|
child: smsContainer(index),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Container smsContainer(int index) {
|
|
|
|
return Container(
|
|
constraints: BoxConstraints(
|
|
minWidth: 80,
|
|
maxWidth: DeviceInfo(context).getWidth()/1.6,
|
|
),
|
|
padding: const EdgeInsets.only(top: 8, bottom: 3, right: 10, left: 10),
|
|
decoration: BoxDecoration(
|
|
border: Border.all(width: 1,color:MyTheme.noColor),
|
|
borderRadius: BorderRadius.only(
|
|
|
|
topLeft: Radius.circular(16),
|
|
topRight: Radius.circular(16),
|
|
bottomLeft:
|
|
_messages[index].sendType=="seller" ? Radius.circular(16) : Radius.circular(0),
|
|
bottomRight:
|
|
_messages[index].sendType=="seller" ? Radius.circular(0) : Radius.circular(16),
|
|
),
|
|
color: (_messages[index].sendType=="seller"
|
|
? MyTheme.app_accent_color
|
|
: MyTheme.app_accent_color_extra_light),
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Positioned(
|
|
bottom: 2,
|
|
right: _messages[index].sendType=="seller" ? 2 : null,
|
|
left: _messages[index].sendType=="seller" ? null : 2,
|
|
child: Text(_messages[index].dayOfMonth.toString()
|
|
+" "+_messages[index].time.toString(),
|
|
style: TextStyle(fontSize: 8, color: (_messages[index].sendType=="seller"
|
|
? MyTheme.light_grey
|
|
: MyTheme.grey_153),
|
|
),
|
|
)),
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 15.0),
|
|
child: Text(" "+
|
|
_messages[index].message.toString(),
|
|
style: TextStyle(fontSize: 12, color: (_messages[index].sendType=="seller"
|
|
? MyTheme.white
|
|
: Colors.black),
|
|
),
|
|
),)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget typeSmsSection() {
|
|
return Align(
|
|
alignment: Alignment.bottomLeft,
|
|
child: Container(
|
|
padding:const EdgeInsets.only(left: 10, bottom: 10, top: 10),
|
|
height: 60,
|
|
width: double.infinity,
|
|
color: MyTheme.white,
|
|
child: Row(
|
|
children: <Widget>[
|
|
Expanded(
|
|
child: Container(
|
|
padding:const EdgeInsets.only(left: 10, right: 10),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(20),
|
|
color: MyTheme.app_accent_color_extra_light,
|
|
),
|
|
child: TextField(
|
|
onChanged: (text){
|
|
if(text.trim().isEmpty){
|
|
messageTextController.text="";
|
|
}
|
|
_messege = text.trim().toString();
|
|
setState(() {
|
|
|
|
});
|
|
},
|
|
|
|
controller: messageTextController,
|
|
decoration:const InputDecoration(
|
|
hintText: "Write message...",
|
|
hintStyle: TextStyle(color: Colors.black54),
|
|
border: InputBorder.none),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(
|
|
width: 15,
|
|
),
|
|
FloatingActionButton(
|
|
onPressed: messageTextController.text.trim().isNotEmpty?() {
|
|
print(_messege);
|
|
sendMessage();
|
|
}:null,
|
|
child:const Icon(
|
|
Icons.send,
|
|
color: Colors.white,
|
|
size: 18,
|
|
),
|
|
backgroundColor: MyTheme.app_accent_color,
|
|
elevation: 0,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
chatShimmer(){
|
|
return SingleChildScrollView(
|
|
reverse: true,
|
|
child: Container(
|
|
margin:const EdgeInsets.only(bottom: 60),
|
|
child: ListView.builder(
|
|
reverse: true,
|
|
itemCount: 10,
|
|
shrinkWrap: true,
|
|
padding: const EdgeInsets.only(top: 10, bottom: 10),
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
itemBuilder: (context, index) {
|
|
//print(_messages[index+1].year.toString());
|
|
return Container(
|
|
padding:
|
|
const EdgeInsets.only(left: 14, right: 14, top: 10, bottom: 10),
|
|
//margin: EdgeInsets.only(right: messages[index].messageType == "receiver"?0:50,left:messages[index].messageType == "receiver"? 50:0),
|
|
child: Align(
|
|
alignment: (index.isOdd
|
|
? Alignment.topRight
|
|
: Alignment.topLeft),
|
|
child: smsShimmer(index),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget smsShimmer(int index) {
|
|
return Shimmer.fromColors(
|
|
baseColor: MyTheme.shimmer_base,
|
|
highlightColor: MyTheme.shimmer_highlighted,
|
|
child: Container(
|
|
constraints: BoxConstraints(
|
|
minWidth: 150,
|
|
maxWidth: DeviceInfo(context).getWidth()/1.6,
|
|
),
|
|
padding: const EdgeInsets.only(top: 8, bottom: 3, right: 10, left: 10),
|
|
decoration: BoxDecoration(
|
|
border: Border.all(width: 1,color:index.isOdd? MyTheme.app_accent_color: MyTheme.grey_153),
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(16),
|
|
topRight: Radius.circular(16),
|
|
bottomLeft:
|
|
index.isOdd? Radius.circular(16) : Radius.circular(0),
|
|
bottomRight:
|
|
index.isOdd? Radius.circular(0) : Radius.circular(16),
|
|
),
|
|
color: (index.isOdd
|
|
? MyTheme.app_accent_color
|
|
: MyTheme.app_accent_color_extra_light),
|
|
),
|
|
child: Stack(
|
|
children: [
|
|
Positioned(
|
|
bottom: 2,
|
|
right: index.isOdd ? 2 : null,
|
|
left: index.isOdd ? null : 2,
|
|
child: Text(
|
|
" ",
|
|
style: TextStyle(fontSize: 8, color: (index.isOdd
|
|
? MyTheme.light_grey
|
|
: MyTheme.grey_153),
|
|
),
|
|
)),
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 15.0),
|
|
child: Text(" ",
|
|
style: TextStyle(fontSize: 12, color: (index.isOdd
|
|
? MyTheme.white
|
|
: Colors.black),
|
|
),
|
|
),)
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|