Merge the 2 distinct "Like this app?" widgets into only one

[monsieurtanuki]

Merge the 2 distinct "Like this app?" widgets into only one

[Smit56R]

Okay, I will do that.

[Smit56R]

@monsieurtanuki Okay. I will do it that way. How should I handle the case when the axis is horizontal in the _buildActions() function?

[Smit56R]

Hey! Can I work on this issue?

[monsieurtanuki]

Hey! Can I work on this issue?

@Smit56R Sure!
Basically the idea is to have a dialog (screenshot 1) that somehow looks like screenshot 2.
Easy step 1: a dialog with 3 vertical buttons with the same labels and actions as screenshot 2.
Please send a screenshot before actually sending a PR.

[g123k]

I'm not sure this is a nice idea to merge things, as here, yes, they do the same thing, but that's not the expected behavior.

The one on the carousel is a returning message VS a one-time message for the one in the login.

[monsieurtanuki]

@g123k I sort of agree with you, the "merge" wording is not correct, the goal is not a unique widget used in both cases.
My point was to use the same labels and the same 3 possible choices - which is not the case currently.
That's why I suggested a dialog with 3 vertical buttons for a quick fix.
Do we agree on that, or do you consider that the "ask me later" choice is not relevant when logging in?

[Smit56R]

@g123k @monsieurtanuki While you decide, I have altered the SmoothAlertDialog to have a parameter for delayAction which renders the dialogue in the proposed UI, if provided as an argument. It switches to a three-row layout or two-row layout according to the screen size.

Here is the code snippet for SmoothAlertDialog:

class SmoothAlertDialog extends StatelessWidget {
  const SmoothAlertDialog({
    this.title,
    required this.body,
    this.positiveAction,
    this.negativeAction,
    this.delayAction,
    this.actionsAxis,
    this.actionsOrder,
    this.close = false,
    this.margin,
    this.contentPadding,
  })  : assert(
          body is! LayoutBuilder,
          "LayoutBuilder isn't supported with Dialogs",
        ),
        assert(
          delayAction == null ||
              (positiveAction != null || negativeAction != null),
          "Delay action isn't supported without positive action and negative action",
        );

  final String? title;
  final bool close;
  final Widget body;
  final SmoothActionButton? positiveAction;
  final SmoothActionButton? negativeAction;
  final SmoothActionButton? delayAction;
  final Axis? actionsAxis;
  final SmoothButtonsBarOrder? actionsOrder;
  final EdgeInsets? margin;
  final EdgeInsetsDirectional? contentPadding;

  /// Default value [_defaultInsetPadding] in dialog.dart
  static const EdgeInsets defaultMargin = EdgeInsets.symmetric(
    horizontal: 40.0,
    vertical: 24.0,
  );

  static const EdgeInsetsDirectional _smallContentPadding =
      EdgeInsetsDirectional.only(
    start: SMALL_SPACE,
    top: MEDIUM_SPACE,
    end: SMALL_SPACE,
    bottom: SMALL_SPACE,
  );

  static const EdgeInsetsDirectional _contentPadding =
      EdgeInsetsDirectional.only(
    start: 22.0,
    top: VERY_LARGE_SPACE,
    end: 22.0,
    bottom: 22.0,
  );

  @override
  Widget build(BuildContext context) {
    final Widget content = _buildContent(context);
    final EdgeInsetsDirectional padding =
        contentPadding ?? defaultContentPadding(context);

    return AlertDialog(
      scrollable: false,
      elevation: 4.0,
      insetPadding: margin ?? defaultMargin,
      contentPadding: EdgeInsets.zero,
      shape: const RoundedRectangleBorder(borderRadius: ROUNDED_BORDER_RADIUS),
      content: ClipRRect(
        borderRadius: ROUNDED_BORDER_RADIUS,
        child: Scrollbar(
          child: SingleChildScrollView(
            child: Padding(
              padding: padding,
              child: Column(
                children: <Widget>[
                  content,
                  if (hasActions) _buildBottomBar(padding),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  Padding _buildBottomBar(EdgeInsetsDirectional padding) {
    final bool singleButton = (positiveAction != null &&
            negativeAction == null &&
            delayAction == null) ||
        (negativeAction != null &&
            positiveAction == null &&
            delayAction == null) ||
        (delayAction != null &&
            positiveAction == null &&
            negativeAction == null);

    return Padding(
      padding: EdgeInsetsDirectional.only(
        top: padding.bottom,
        start: (actionsAxis == Axis.horizontal || singleButton)
            ? SMALL_SPACE
            : 0.0,
        end: positiveAction != null &&
                negativeAction != null &&
                delayAction != null
            ? 0.0
            : SMALL_SPACE,
      ),
      child: SmoothActionButtonsBar(
        positiveAction: positiveAction,
        negativeAction: negativeAction,
        delayAction: delayAction,
        axis: actionsAxis,
        order: actionsOrder,
      ),
    );
  }

  bool get hasActions =>
      positiveAction != null || negativeAction != null || delayAction != null;

  Widget _buildContent(final BuildContext context) => DefaultTextStyle.merge(
        style: const TextStyle(height: 1.5),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            if (title != null) _SmoothDialogTitle(label: title!, close: close),
            body,
          ],
        ),
      );

  static EdgeInsetsDirectional defaultContentPadding(BuildContext context) {
    return (context.isSmallDevice() ? _smallContentPadding : _contentPadding);
  }
}

Is this how you want it to work?

[monsieurtanuki]

@Smit56R Please just add a neutralAction and display them according to the axis (vertically in this case), which will look like your first screenshot. This way the issue will be solved, the simpler the better.