Add the option for intrinsic height to FButton

[lukasengel]

Hey everyone,

Currently, an FButton extends to the maximum available width by default. In some situations, this might look out of place.
For example, in my application's settings screen:

My current workaround is a custom widget based on FButton.raw to achieve something like this:

I've drafted a solution, which gives the developer the option to override this behavior.

I've added the property intrinsicWidth to the Content class in button_contents.dart. Based on this flag, the row's main axis size is set to either MainAxisSize.min or MainAxisSize.max. Of course, it is set to false by default, in order not to break other parts of the code.

@internal
class Content extends StatelessWidget {
  final Widget? prefix;
  final Widget? suffix;
  final Widget label;
  final bool intrinsicWidth;

  const Content({required this.label, this.intrinsicWidth = false, this.prefix, this.suffix, super.key});

  @override
  Widget build(BuildContext context) {
    final FButtonData(style: FButtonStyle(:contentStyle), :enabled) = FButtonData.of(context);
    return Padding(
      padding: contentStyle.padding,
      child: DefaultTextStyle.merge(
        style: enabled ? contentStyle.enabledTextStyle : contentStyle.disabledTextStyle,
        child: FIconStyleData(
          style: FIconStyle(
            color: enabled ? contentStyle.enabledIconColor : contentStyle.disabledIconColor,
            size: contentStyle.iconSize,
          ),
          child: Row(
            mainAxisSize: intrinsicWidth ? MainAxisSize.min : MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            spacing: 10,
            children: [if (prefix case final prefix?) prefix, label, if (suffix case final suffix?) suffix],
          ),
        ),
      ),
    );
  }
}

The modified button.dart:

FButton({
  required this.onPress,
  required Widget label,
  this.style = Variant.primary,
  this.onLongPress,
  this.autofocus = false,
  this.focusNode,
  this.onFocusChange,
  Widget? prefix,
  Widget? suffix,
  bool intrinsicWidth = false,
  super.key,
}) : child = Content(prefix: prefix, suffix: suffix, label: label, intrinsicWidth: intrinsicWidth);

Now, it can be used like so:

FButton(
  prefix: FIcon(FAssets.icons.logOut),
  label: Text(SLocalizations.of(context)!.logOut),
   onPress: _onPressedLogOut,
   intrinsicWidth: true,
)

If you think this might be helpful, I'd really appreciate if you could take the time and implement something similar.
Otherwise, I can also create a pull request. :)

Thanks a lot for your efforts!

Best regards,
Lukas

[Pante]

I get where you're coming from, but I'm on the fence about adding a intrinsicWidth property as you can wrap a FButton in an IntrinsicWidth widget to achieve the same thing.

[lukasengel]

Okay sure. I just had this idea, because this would match the default behavior of Material buttons afaik. Thanks, though!👍🏻

[Pante]

Hmm, didn’t know material minimised button size by default. Thoughts on this @kawaijoe?

Might be worth introducing a breaking change for this.

[Pante]

We looked through this issue again and I think we'll be changing the default to be intrinsic, thanks for pointing this out!