I have a chat function in which I pass text and it is displayed in a chat bubble for question and answer. The chat function passes answers which could sometimes be large amount of text( just like in Whatsapp) so need a Read more functionality so that only if they want to read, they can click on the button and read it. But the below code, doesn't dynamically change the size of chat bubble when i click on read more.
Widget _buildChatBubble(String text, {required bool isQuestion}) {
final double borderRadiusValue = 20.0;
final int maxTextLengthToShow = 200;
bool isTextTooLong = text.length > maxTextLengthToShow;
bool showFullText = false;
return Consumer<ThemeProvider>(
builder: (context, themeProvider, _) {
final String avatarImage = themeProvider.isIconSelected
? 'images/chatbot_icon4.jpg'
: 'images/chatbot_icon4.jpg';
if (!isQuestion) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Container(
margin: EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.centerLeft,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.only(left: 12.0, right: 5.0),
child: CircleAvatar(
radius: 20,
backgroundImage: AssetImage(avatarImage),
backgroundColor: Colors.transparent,
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.7,
child: Container(
constraints: BoxConstraints(
maxWidth: 230.0,
),
padding: const EdgeInsets.all(12.0),
decoration: BoxDecoration(
color: themeProvider.themeData.colorScheme.onError,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(borderRadiusValue),
bottomRight: Radius.circular(borderRadiusValue),
topRight: Radius.circular(borderRadiusValue),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text.length > maxTextLengthToShow
? text.substring(0, maxTextLengthToShow) +
"..."
: text,
style: TextStyle(
color: CustomColor.whiteColor,
fontSize: 16.0,
),
),
if (isTextTooLong)
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {
print('Read More button pressed');
setState(() {
showFullText = !showFullText;
});
},
child: Text(
showFullText ? 'Read Less' : 'Read More',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
IconButton(
onPressed: () {
_copyToClipboard(text);
},
icon: const Icon(
size: 20.0,
Icons.content_copy_rounded,
color: Colors.white,
),
),
IconButton(
onPressed: () {
_speak(text);
},
icon: Icon(
size: 20.0,
Icons.volume_up_sharp,
color: Colors.white,
),
),
],
),
],
),
),
),
],
),
),
Row(
children: [
SizedBox(width: MediaQuery.of(context).size.width * 0.12),
Padding(
padding: EdgeInsets.symmetric(horizontal: 12.0),
child: Text(
DateFormat.yMd().add_jm().format(DateTime.now()),
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black,
fontSize: 12.0,
),
),
),
],
),
SizedBox(height: MediaQuery.of(context).size.height * 0.02),
],
);
} else {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
SizedBox(height: MediaQuery.of(context).size.height * 0.01),
Container(
margin: EdgeInsets.symmetric(vertical: 5.0),
alignment: Alignment.centerRight,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: SizedBox(
width: MediaQuery.of(context).size.width * 0.75,
child: Container(
constraints: BoxConstraints(
maxWidth: 230.0,
),
padding: const EdgeInsets.all(12.0),
decoration: BoxDecoration(
color: themeProvider
.themeData.colorScheme.onBackground,
borderRadius: BorderRadius.only(
topRight: Radius.circular(borderRadiusValue),
bottomRight:
Radius.circular(borderRadiusValue * 0.1),
bottomLeft: Radius.circular(borderRadiusValue),
topLeft: Radius.circular(borderRadiusValue),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
text,
style: TextStyle(
color: themeProvider
.themeData.colorScheme.onPrimary,
fontSize: 16.0,
),
),
],
),
),
),
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 12.0),
child: Text(
DateFormat.yMd().add_jm().format(DateTime.now()),
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black,
fontSize: 12.0,
),
),
),
],
);
}
},
);
}
Please let me know what you guys would do to solve this? Would really appreciate it!!:-)
I have used the max length of text is more than 200, then shorten the chat bubble,which works. The issue is when i click on 'read more' it doesn't resize so that i can read the whole text container. I want it to change dynamically for the 'read more' and 'read less' option.