corneilleedi/sweetsheet

Show beautiful bottom sheet as confirmation dialog quickly and easily.

sweetsheet's Issues

SweetSheet improvement - 3/3 :Provide proper async/await handling for returning data

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 
      }

Prevent Clicking Off the Alert

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.

SweetSheet improvement - 2/3 : Allow for a root navigator

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,

Cannot change button text colour once set the icon

@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, )

SafeArea horizontal issue

On testing with my app, the sheet is not aware of safe area and displaying like this

how can i use 'custom light' for flutter web?

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.

Custom SweetSheetType

It would be nice if we can create our own SweetSheetType, or at least define our own colour branding.

Custom padding support for different screens

Custom padding is important for the support of different screens. It can be very useful if we add the support.

SweetSheet improvement - 1/3 : Do not use Strings for Title and Description

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')),
....
)