sweetsheet 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 85

sweetsheet #

Show beautiful bottom sheet as confirmation dialog quickly and easily.

nicewarning
nicewarning
successdanger
successdanger

and since version 0.2.0 , it is fully customisable.

custom darkcustom light
successdanger

Getting Started #

With increasingly large smartphones, it has become almost impossible to have good ergonomics in an application using confirmation dialogs. The SweetSheet package allows you to show beautiful bottoms sheets to replace your confirmation dialogs and maintain a good user experience.

How to use? #

Add this to your package's pubspec.yaml file:

dependencies:
  sweetsheet: ^0.2.0

And import it:

import 'package:sweetsheet/sweetsheet.dart';

to start using the sheets, you have to create the instance of the SweetSheet class first.

final SweetSheet _sweetSheet = SweetSheet();

Now you can show the bottom sheet by calling the method show() on the instance. This is the signature of the show method

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

This is the signature of the SweetSheetAction widget.

class SweetSheetAction extends StatelessWidget {
  final String title;
  final VoidCallback onPressed;
  final IconData icon;
  final Color color;

  SweetSheetAction({
    @required this.title,
    @required this.onPressed,
    this.icon,
    this.color = Colors.white,
  });  
}

Attention : At least one action is required and the icons are IconData for uniformity purpose.

The SweetSheetColor is a class which have four static values and it determine the color of the sheet by creating a CustomSheetColor:

  • SweetSheetColor.SUCCESS (green)
  • SweetSheetColor.DANGER (red)
  • SweetSheetColor.WARNING (orange)
  • SweetSheetColor.NICE (blue)

Customisation #

To customise, create a new instance of CustomSheetColor and pass it to the argument color when calling the method show. signature of CustomSheetColor:

class CustomSheetColor {
  Color main;
  Color accent;
  Color icon;

  CustomSheetColor({@required this.main, @required this.accent, this.icon});
}

To customise the action, pass a new color to color argument of SweetSheetAction.

Example: #

Warning

_sweetSheet.show(
    context: context,
    title: Text("Attention"),
    description: Text(
        'Your app is not connected to internet actually, please turn on Wifi/Celullar data.'),
    color: SweetSheetColor.WARNING,
    icon: Icons.portable_wifi_off,
    positive: SweetSheetAction(
      onPressed: () {
        Navigator.of(context).pop();
      },
      title: 'OPEN SETTING',
      icon: Icons.open_in_new,
    ),
    negative: SweetSheetAction(
      onPressed: () {
        Navigator.of(context).pop();
      },
      title: 'CANCEL',
    ),
);

Custom Light

_sweetSheet.show(
    context: context,
    description: Text(
      'Place your order. Please confirm the placement of your order : Iphone X 128GB',
      style: TextStyle(color: Color(0xff2D3748)),
    ),
    color: CustomSheetColor(
      main: Colors.white,
      accent: Color(0xff5A67D8),
      icon: Color(0xff5A67D8),
    ),
    icon: Icons.local_shipping,
    positive: SweetSheetAction(
      onPressed: () {
        Navigator.of(context).pop();
      },
      title: 'CONTINUE',
    ),
    negative: SweetSheetAction(
      onPressed: () {
        Navigator.of(context).pop();
      },
      title: 'CANCEL',
  ),
);

That is all. Have fun! #

0.1.0 #

  • first release

0.1.1 #

  • Change SweetSheetAction icon type to IconData

0.1.2 #

  • Add more uniformity

0.1.3 #

  • Force white color for contents to prevent color changing by custom ThemeData

0.2.0 #

  • Breaking Change Change title and description to Text
  • Breaking Change Change type argument to color- make title optional
  • add color to icon
  • add color to action
  • add CustomSheetColor for Colors customisation

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:sweetsheet/sweetsheet.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SweetSheet',
      theme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: 'SweetSheet'),
    );
  }
}

class HomePage extends StatefulWidget {
  final String title;

  HomePage({this.title});

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final SweetSheet _sweetSheet = SweetSheet();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(16.0),
        child: ListView(
          children: <Widget>[
            LargeButton(
              context: context,
              text: 'Success sheet',
              onClick: () {
                _sweetSheet.show(
                  context: context,
                  title: Text("Lorem Ipsum"),
                  description: Text(
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. no you condimentum finibus ut ut lorem. Ut pellentesque mauris ut arcu rutrum, at tincidunt arcu tincidunt"),
                  color: SweetSheetColor.SUCCESS,
                  positive: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),
            LargeButton(
              context: context,
              text: 'Danger sheet with icon',
              onClick: () {
                _sweetSheet.show(
                  context: context,
                  title: Text("Delete this post?"),
                  description:
                      Text("This action will permanently delete this post."),
                  color: SweetSheetColor.DANGER,
                  icon: Icons.delete,
                  positive: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'DELETE',
                  ),
                  negative: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),
            LargeButton(
              context: context,
              text: 'Warning sheet with icon',
              onClick: () {
                _sweetSheet.show(
                  context: context,
                  title: Text("Attention"),
                  description: Text(
                      'Your app is not connected to internet actually, please turn on Wifi/Celullar data.'),
                  color: SweetSheetColor.WARNING,
                  icon: Icons.portable_wifi_off,
                  positive: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'OPEN SETTING',
                    icon: Icons.open_in_new,
                  ),
                  negative: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),
            LargeButton(
              context: context,
              text: "Nice sheet with icon",
              onClick: () {
                _sweetSheet.show(
                  context: context,
                  title: Text("Connect your watch"),
                  description: Text(
                      'To import your health data, you have to connect your smartwatch fist.'),
                  color: SweetSheetColor.NICE,
                  icon: Icons.watch,
                  positive: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CONNECT',
                    icon: Icons.open_in_new,
                  ),
                  negative: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),
            LargeButton(
              context: context,
              text: "Sheet with custom dark color",
              onClick: () {
                _sweetSheet.show(
                  context: context,
                  title: Text("Welcome back"),
                  description: Text(
                      'We are happy to see you again. We have some new things for you.'),
                  color: CustomSheetColor(
                      main: Colors.black12, accent: Colors.black87),
                  icon: Icons.bubble_chart,
                  positive: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'LET\'S GO',
                  ),
                );
              },
            ),
            LargeButton(
              context: context,
              text: "Sheet with custom light color",
              onClick: () {
                _sweetSheet.show(
                  context: context,
                  description: Text(
                    'Place your order. Please confirm the placement of your order : Iphone X 128GB',
                    style: TextStyle(color: Color(0xff2D3748)),
                  ),
                  color: CustomSheetColor(
                    main: Colors.white,
                    accent: Color(0xff5A67D8),
                    icon: Color(0xff5A67D8),
                  ),
                  icon: Icons.local_shipping,
                  positive: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CONTINUE',
                  ),
                  negative: SweetSheetAction(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    title: 'CANCEL',
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}


class LargeButton extends StatelessWidget {
  final BuildContext context;
  final String text;
  final VoidCallback onClick;

  const LargeButton(
      {Key key, @required this.context, @required this.text, this.onClick})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(bottom: 8.0),
      child: FlatButton(
        padding: const EdgeInsets.all(30),
        color: Colors.black45,
        onPressed: onClick,
        child: Container(
          width: double.infinity,
          child: Text(
            text,
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  sweetsheet: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:sweetsheet/sweetsheet.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
71
Health:
Code health derived from static analysis. [more]
98
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
85
Learn more about scoring.

We analyzed this package on Jun 5, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1

Health issues and suggestions

Document public APIs. (-0.00 points)

28 out of 29 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Fix lib/src/sheets.dart. (-1.99 points)

Analysis of lib/src/sheets.dart reported 4 hints:

line 13 col 27: Name non-constant identifiers using lowerCamelCase.

line 18 col 27: Name non-constant identifiers using lowerCamelCase.

line 23 col 27: Name non-constant identifiers using lowerCamelCase.

line 28 col 27: Name non-constant identifiers using lowerCamelCase.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test