buildByMaterial method

@override Widget buildByMaterial(BuildContext context)

build on material mode

Implementation

@override
Widget buildByMaterial(BuildContext context) {
  final theme = Theme.of(context);
  final opts = valueOf('options', options);
  final selIdx = valueOf('selectedIndex', selectedIndex);
  final divIndices = valueOf('dividerIndices', dividerIndices);
  final w = valueOf('width', width);
  final h = valueOf('height', height);
  final pfx = valueOf('prefix', prefix);
  final btnStyle = valueOf('buttonStyle', buttonStyle);

  return PopupMenuButton<int>(
    itemBuilder: (context) {
      final items = <PopupMenuEntry<int>>[];
      for (int i = 0; i < opts.length; i++) {
        items.add(
          PopupMenuItem<int>(
            value: i,
            child: Text(opts[i]),
          ),
        );
        // Add dividers at specified indices
        if (divIndices.contains(i) && i < opts.length - 1) {
          items.add(const PopupMenuDivider());
        }
      }
      return items;
    },
    onSelected: valueOf('onSelected', onSelected),
    child: InkWell(
      onTap: () {}, // Empty tap handler to ensure ink response
      child: Container(
        height: h,
        constraints: w != null
            ? BoxConstraints(minWidth: w, maxWidth: w)
            : const BoxConstraints(minWidth: 120), // Increased minimum width
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
        decoration: BoxDecoration(
          color: _getBackgroundColor(theme, btnStyle),
          borderRadius: BorderRadius.circular(8),
          border: btnStyle == CNButtonStyle.bordered
              ? Border.all(color: valueOf('tint', tint) ?? theme.colorScheme.primary)
              : null,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.max, // Changed from min to max to fill available space
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Flexible( // Wrap text section in Flexible to allow it to shrink if needed
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  if (pfx != null) ...[
                    Text(
                      pfx,
                      style: TextStyle(
                        color: _getTextColor(theme, btnStyle),
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    const SizedBox(width: 4),
                  ],
                  Flexible( // Allow option text to shrink if needed
                    child: Text(
                      opts[selIdx],
                      style: TextStyle(
                        color: _getTextColor(theme, btnStyle),
                      ),
                      overflow: TextOverflow.ellipsis, // Handle very long text gracefully
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(width: 8),
            Icon(
              Icons.arrow_drop_down,
              color: _getTextColor(theme, btnStyle),
              size: 20,
            ),
          ],
        ),
      ),
    ),
  );
}