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

[monsieurtanuki]

What

• We have a couple of "Like this app?" widgets, with different wordings/UI.
• For consistency and maintenance reasons, we would be better off with only one.
• I have a preference for the "carousel" version, with 3 possible answers (and a better UI)

Screenshot/Mockup/Before-After

The first time we log-in (successfully) (login_page.dart)	Random access in carousel (smooth_product_carousel.dart)

[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.

[Smit56R]

Okay, I will do that.

[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.

[Smit56R]

@monsieurtanuki Okay. I will do it that way.

[Smit56R]

@monsieurtanuki I have completed the code. I just need clarification on a few things.

1. How should I handle the reverse logic in the function _buildActions() inside smooth_alert_dialog.dart when all three buttons are provided?
2. Do you want me to use the flat button for neutral and negative actions or do you want me to give them borders?

[monsieurtanuki]

@Smit56R Please put the neutral button between positive and negative, and display neutral identical to the current negative button display.