Detect maxlines in html package - flutter

93 views Asked by At

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"

0

There are 0 answers