Can we prevent clicking off the alert itself? Would be nice to force user to click the button on the alert itself, or at least have a callback function if dismissing the alert anywhere other than the alert itself.

Hi ,

The show(...) method requires an additional argument to allow for root navigators.

Its advised to therefore extend the existing show :

show({
    @required BuildContext context,
    Text title,
    @required Text description,
    @required CustomSheetColor color,
    @required SweetSheetAction positive,
    SweetSheetAction negative,
    IconData icon,
  }) 

and change to :

  show({
    @required BuildContext context,
    Widget title,
    @required Widget description,
    @required CustomSheetColor color,
    @required SweetSheetAction positive,
    SweetSheetAction negative,
    bool useRootNavigator = false,
    IconData icon,
  }) {

Here you can see a rootNavigator has been added. You will then amend your showModalBottomSheet to make use of this boolean :

showModalBottomSheet(
      context: context,
      useRootNavigator: useRootNavigator,

i would like to use this for flutter web, but it will be appear at the bottom of the screen and covers the whole space. i tried to wrap it in center or other widgets but it is impossible.

thank you.

@override Widget build(BuildContext context) { return icon == null ? FlatButton( onPressed: onPressed, child: Text( title, style: TextStyle( color: color, ), ), ) : FlatButton.icon( onPressed: onPressed, label: Text( title, ), icon: Icon( icon, color: color, ), ); }

TextStyle is missing once set the icon, please kindly add it to the FlatButton if icon != null style: TextStyle( color: color, )

Hi

showModalBottomSheet provides a return value of Future. However - the current implementation of SweetSheet does not provide a provision to return action data choices (Return values when buttons are tapped). It is therefore suggested to correctly amend the signature of show() to capture return data.

Future<dynamic> show({
    @required BuildContext context,
    Widget title,
    @required Widget description,
    @required CustomSheetColor color,
    @required SweetSheetAction positive,
    SweetSheetAction negative,
    bool useRootNavigator = false,
    IconData icon,
  }) {
    var rv = showModalBottomSheet(...);
    return rv;
  }

And this can then be accessed as in a specific warning helper method that just wraps SweetSheetColor.WARNING & Associated Icon

  static Future<dynamic> warning(
      String title, String description, BuildContext context) async {
    assert(title != null);
    assert(description != null);
    var rv = await bottomDialog(context, Text(title),
        description: Text(description),
        color: SweetSheetColor.WARNING,
        icon: 'yourAssetFile.zip',
        useRootNavigator: true);
    return rv;
  }

An example of how the SweetSheet.bottomDialog can be called and how we now process the Navigator return values is :

var continueRunning = await SweetSheetHelper.bottomDialog(
          context, Text('This is your title'),
          description: Text(
              'This is your description'),
          color: SweetSheetColor.WARNING,
          icon: 'assets/lottie/warningWhiteCircle.zip',
          useRootNavigator: true,
          positive: SweetSheetAction(
            icon: MdiIcons.runFast,
            title: 'CONTINUE',
            onPressed: () =>
                Navigator.of(context, rootNavigator: true).pop(true),
          ),
          negative: SweetSheetAction(
            title: 'CANCEL',
            onPressed: () =>
                Navigator.of(context, rootNavigator: true).pop(false),
          ));

      /// And here you will be able to get the RETURN values from the navigators (true/false/null etc)
     
      if (continueRunning == null || !continueRunning) {
        return; // User tapped cancel or discarded the MODAL sheet 
      }

Hi there ...

Currently your Component has a method signature such that it expects Strings for Title and Description. This should be changed so that a Widget is supplied in-place of the Strings. You need this because your current component does not support accessibility meaning that the Text(...) widget that you internally use to render the Title & Description will take its TextScaleFactor for MediaQuery.

This can lead to overflow errors when the Bottom sheet is rendered.

Suggestion

Change the method :

show({ @required BuildContext context, Text title, @required Text description, @required CustomSheetColor color, @required SweetSheetAction positive, SweetSheetAction negative, IconData icon, }) {

To

show({ @required BuildContext context, Widget title, @required Widget description, @required CustomSheetColor color, @required SweetSheetAction positive, SweetSheetAction negative, IconData icon, }) {

This will allow callers of Show to handle their own Accessibility for both Title & Description and Since these will be changed to Widget, we can further use composition to wrap them , i.e

show(context:context,
           title:FixedSizedTitle(child:Text('My SweetTitle')),
description:FixedSizedTitle(child:Text('My Sweet description etc')),
....
)