I have a problem with knowing how to detect if the text is over the maxlines that is set. I want to implement this to the Notification List Item widget where when the text is more than 3 lines a button with the label "Read More" will appear.
The only catch is that I am not using a normal Text widget, I am using the flutter_html package. and I set the maxlines to 3 in the "*".
Here is the widget code:
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:vecinoportal/component/preloader/multiline_preloader_box.dart';
import 'package:vecinoportal/component/preloader/preloader_box.dart';
import 'package:vecinoportal/config/app_colors.dart';
class NotificationListItem extends StatelessWidget {
final String? header;
final String? message;
final String? unit;
final String? time;
const NotificationListItem({
Key? key,
this.header,
this.message,
this.unit,
this.time,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
// TODO: OPEN NOTIF FUNCTION
print('notif');
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Icon(Icons.file_copy_rounded),
((header != null && message != null))
? Image.asset(
'asset/notification/notification.png',
height: 40,
width: 40,
)
: const PreloaderBox(
height: 40,
width: 40,
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
(header != null)
? Text(
header!,
style: const TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
),
)
: const PreloaderBox(height: 20, minWidth: 48, maxWidth: 128),
const SizedBox(height: 2),
Row(
children: [
// const Text(
// 'UNIT',
// ),
// const PreloaderBox(height: 14, minWidth: 48, maxWidth: 64),
// Padding(
// padding: EdgeInsets.symmetric(horizontal: 4, vertical: 4),
// child: (time != null)
// ? const Text('•')
// : const PreloaderBox(height: 14, width: 8),
// ),
(time != null)
? Text(
time!,
style: const TextStyle(
fontSize: 15,
color: AppColors.lightGray01,
),
)
: const PreloaderBox(height: 14, minWidth: 48, maxWidth: 64),
],
),
const SizedBox(height: 16),
(message != null)
? Html(
data: message!,
style: {
'*': Style(
margin: EdgeInsets.zero,
fontSize: const FontSize(17),
padding: EdgeInsets.zero,
maxLines: 3,
),
'b': Style(fontWeight: FontWeight.w600),
'strong': Style(fontWeight: FontWeight.w600),
'ul': Style(
padding: EdgeInsets.zero,
alignment: Alignment.centerLeft,
textAlign: TextAlign.left,
),
'li': Style(
padding: const EdgeInsets.symmetric(vertical: 2),
alignment: Alignment.centerLeft,
textAlign: TextAlign.left,
),
},
)
: const MultilinePreloaderBox(
lines: 3,
height: 14,
minWidth: 192,
maxWidth: 320,
),
// TODO: ADD "READ MORE BUTTON" IF TEXT IS MORE THAN 3 LINES
],
),
)
],
),
),
);
}
}
How do I detect the if the text in the html package is more than the maxline of 3? so I can show a button with "Read More"