Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can i create menu items with exactly height for each element #264

Open
brunos0 opened this issue May 2, 2024 · 0 comments
Open

How can i create menu items with exactly height for each element #264

brunos0 opened this issue May 2, 2024 · 0 comments

Comments

@brunos0
Copy link

brunos0 commented May 2, 2024

Hello.

I'm try to use Dropdown Button 2, but I having an issue about items heights. I have a list of strings with different length like:

ITEM 1
ITEM 2 AND ANOTHER DETAIL
ITEM 3 AND ANOTHER SO LONG DETAIL
ITEM 4 DETAIL
ITEM 5 D3T41L
ITEM 6
ITEM 7 AND ANOTHER AMAZING SO LOOOOONGGGGG DETAIL DESCRIPTION

I`m trying to calculate the height for each item, but even much similar description the height gets different and the result looks like:

ITEM 1
-------

ITEM 2 AND ANOTHER
DETAIL
-------
ITEM 3 AND ANOTHER
SO LONG DETAIL
-------
ITEM 4 DETAIL
-------
ITEM 5 D3T41L

-------

.....

It's very difficult calculate the precise height for each element.

I'm create DropdownMenuItem like this:

List<DropdownMenuItem<String>> _addDividersAfterItems(
   List<UniqueKey> keys,
   bool isSmallScreen,
 ) {
   final menuItems = <DropdownMenuItem<String>>[];

   for (var index = 0; index < values.length; index++) {
     menuItems.addAll(
       [
         DropdownMenuItem<String>(
           key: keys[index],
           value: values[index]['id'],
           child: Text(
             values[index]['nome'] ?? '',
             style: const TextStyle(
               fontSize: 14,
             ),
             softWrap: true,
           ),
         ),
         //If it's last item, we will not add Divider after it.
         if (index != values.length - 1)
           const DropdownMenuItem<String>(
             enabled: false,
             child: Divider(),
           ),
       ],
     );
   }

   return menuItems;
 }

And calculate the height like this:

  List<double> _getCustomItemsHeights(
    double textScaleFactor,
    bool isSmallScreen,
  ) {
    final itemsHeights = <double>[];
    var itemIndex = 0;
    for (var i = 0; i < (values.length * 2) - 1; i++) {
      if (i.isEven) {
        final textSpan = TextSpan(
          text: values[itemIndex]['nome'],
          style: const TextStyle(fontSize: 14),
        );

        final textPainter = TextPainter(
          text: textSpan,
          textDirection: TextDirection.ltr,
          textScaleFactor: textScaleFactor,
          textWidthBasis: TextWidthBasis.longestLine,
        );

        double height;
        int lineCount;

        if (isSmallScreen) {
          textPainter.layout(maxWidth: 250);
          lineCount = textPainter.computeLineMetrics().length;

          height = textScaleFactor >= 1.3
              ? 14 * lineCount * textScaleFactor
              : 14 * lineCount * textScaleFactor;
        } else {
          textPainter.layout(maxWidth: maxLineWidth(textScaleFactor));
          lineCount = textPainter.computeLineMetrics().length;

          height = textScaleFactor >= 1.3
              ? 13 * lineCount * textScaleFactor
              : 25 * lineCount * textScaleFactor;
        }

        if (itemIndex == 0 && lineCount == 1) {
          height += 10;
        }
        itemsHeights.add(height);
        itemIndex++;
      }
      //Dividers indexes will be the odd indexes
      if (i.isOdd) {
        itemsHeights.add(10);
      }
    }
    return itemsHeights;
  }

Ps. maxLineWidth function is a custom method to give me the maxWidth for the current textScaleFactor.

But I think that I a solve this problem in scale 1.0, another scales works fine too.

Exist a better way to calculate the line height or just shirink the container for
DropdownMenuItem shows only Text and divider?

Sorry about my English.

Kind Regards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant