custom_sheet 0.1.1+4

  • Readme
  • Changelog
  • Example
  • Installing
  • 67

custom_sheet #

This package aims to help you displaying a quick colored modal bottom sheet. You can use it to display a few types: loading; title and body; title, body and buttons; customized. The main role of this package is to create a modal bottom sheet with a custom color and the colors of the text and the buttons will be based on the luminance of the color provided (or your current ascent color from your theme, if the color is not provided).

Getting Started #

How to use? #

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

Flutter version >=1.17 (current stable)

dependencies:
  custom_sheet:0.1.1+4

Flutter version <1.17

dependencies:
  custom_sheet:0.1.1+3

Import it:

import 'package:custom_sheet/custom_sheet.dart';

To use it create an instance of the CustomSheet class (the context is required) and set the optional parameters (if you want):

CustomSheet(context,
    Color sheetColor,
    Color secondColor,
    Color textColor,
    Color subTextColor,
    double secondColorPercent
);

You can set some custom parameters:

ParameterDescription
Color sheetColorThe sheetColor is the color of your modal bottom sheet. If it is not set it will be your current ascent color from your theme.
Color secondColorThe secondColor is the color of the buttons and the body (optional). By default will be a color sligthly darker or lighter than the color provided on the sheetColor. This color is computed based on the luminance of the sheetColor. Otherwise it will be the color provided.
Color textColorThe textColor is the text color of the title. By default will be black if the luminance of the sheetColor is light or white if its luminance is dark. Otherwise it will be the color provided.
Color subTextColorThe subTextColor is the text color of your buttons and body (optional). By default it will be black if the luminance of the secondColor is light or white if its luminance is dark. Otherwise it will be the color provided.
double secondColorPercentThe secondColorPercent is how much darker/lighter the second color will be. You can pick a value between 0 and 0.49. The default value is 0.1.

In order to show the modal bottom sheet you'll have to call the method according to what you want to display. There are a few options parameters as well: | Parameter | Description | |---|---| |bool isDismissible | The isDismissible specifies whether the bottom sheet will be dismissed when user taps outside of the bottom sheet. | |bool blockBackButton | The blockBackButton will block when android users use the back button. | |bool enableDrag | The enableDrag specifies whether the bottom sheet can be dismissed by swiping downwards. |

The default value of these parameters may be different for some methods, for instance when displaying a loading I want to make the bottom sheet undissmissable, block the back button and disable the drag. For the other methods it will be the opposite, but you can change it as you wish.


Display a Loading

void showLoading({
    String loadingMsg= "Loading ...", 
    bool isDismissible=false, 
    bool block=true, 
    bool enableDrag=false
});

// ----------------------------------------------------------------------------
// #1
// Create a simple loading with your current ascent color (theme)
// if the loading is not dismissable, has the back bottom blocked and the drag is disabled the only way to dismiss it is using the dismiss function or using Navigator.of(context).pop()
final cSheet = CustomSheet(context);
cSheet.showLoading();
// do something and then dismiss it...
cSheet.dismiss(milliseconds:2000);
// ----------------------------------------------------------------------------
//#2
// Create a simple loading with custom text [wait for it], custom text color [yellow] and custom sheet color [red]
final cSheet2 = CustomSheet(context,sheetColor: Colors.red,textColor: Colors.yellow);
cSheet2.showLoading(loadingMsg: "Wait for it ...");
// do something and then dismiss it...
cSheet2.dismiss(milliseconds:2000);
// ----------------------------------------------------------------------------
//#3
// create a loading style which can only be dismissed by swipping downward. i.e. pressing back button or clickin outside of the bottom sheet won't dismiss it
CustomSheet(context).showLoading(loadingMsg: "swipe-down to dismiss",enableDrag: true);

#1#2#3

Title and body

Future<void> showTitleBody({
    String title,
    String body,
    bool isDismissible = true,
    bool blockBackButton = false,
    bool enableDrag = true,
    bool bodySecondColorEnabled = false
});
// ----------------------------------------------------------------------------
// #4
// Create Title and Body with your current ascent color (theme)
CustomSheet(context).showTitleBody(
    title:"Welcome",
    body:"Lorem ...."
);
// ----------------------------------------------------------------------------
//#5
// Create a Title and Body witch custom sheet color [black]
// the text color will change according to its luminance, so it will be white right now.
CustomSheet(context,sheetColor: Colors.black).showTitleBody(
    title:"Welcome",
    body:"Lorem ...."
);
// ----------------------------------------------------------------------------
//#6
// Create a Title and Body witch custom sheet color [black] and custom body color [white]
// the text color will change according to its luminance, so it will be white for the title and black for the body.
CustomSheet(context,sheetColor: Colors.black,secondColor: Colors.white).showTitleBody(
    title:"Welcome",
    body:_"Lorem ....",
    bodySecondColorEnabled: true // the second color is used for the button colors, but we can change the body color setting this parameter to true
);
// ----------------------------------------------------------------------------
//#7
// Create a Title and Body witch custom sheet color [black], title color green, custom body color [white] and body text color red.
CustomSheet(context,sheetColor: Colors.black,secondColor: Colors.white,textColor: Colors.green,subTextColor: Colors.red).showTitleBody(
    title:"Welcome",
    body: "Lorem ...."
    bodySecondColorEnabled: true 
);

#4#5#6#7

Title, body and buttons

Future<T2> showTitleBodyButtons<T1,T2>(
    {String title,
    String body,
    List<T1> options,
    double buttonHeight,
    bool isDismissible = true,
    bool blockBackButton = false,
    bool enableDrag = true,
    bool bodySecondColorEnabled = false
});
// ----------------------------------------------------------------------------
// #8
// Create Title and Buttons with your current ascent color (theme) and show the option selected on a snackbar
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
CustomSheet(context).showTitleBodyButtons(
    title:"Welcome",
    options: <OptionButton>[
    OptionButton("option 1",(){}),
    OptionButton("option 2",()=>Navigator.of(context).pop(true)),
    OptionButton("option 3",()=>Navigator.of(context).pop("3"))
    ]
)// do something with the popped value
.then((value) =>scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("$value",style:TextStyle(fontSize: 150)),duration: Duration(milliseconds: 750))));

// ----------------------------------------------------------------------------
// #9
// Create Title and Buttons with your current ascent color (theme), button color as blue grey, 150px button height and show the option selected on a snackbar
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
CustomSheet(context,secondColor: Colors.blueGrey).showTitleBodyButtons(
    title:"Welcome",
    options: <OptionButton>[
    OptionButton("option 1",(){}),
    OptionButton("option 2",()=>Navigator.of(context).pop(true)),
    OptionButton("option 3",()=>Navigator.of(context).pop("3"))
    ],
    buttonHeight: 150
)// do something with the popped value
.then((value) =>scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("$value",style:TextStyle(fontSize: 150)),duration: Duration(milliseconds: 750))));

// ----------------------------------------------------------------------------
//#10
// Create a Title and Body witch custom sheet color [black] with custom buttons
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
// You can create a custom widget or use an existing one, do it as you wish...
class MyCustomButton extends StatelessWidget{ 
      final Color color;
      final String text;
      final VoidCallback onTap;
  MyCustomButton(this.color, this.text, this.onTap);
  @override
  Widget build(BuildContext context) {
    return Container(
      color:color,
      width:double.infinity,
      height:100,
      child:FlatButton(
        child: Text(text) ,
        onPressed: onTap,)
    );
  }
}
// thenn invoke the modal bottom sheet using your class MyCustomButton or whatever widget you want (Text,RaisedButton, etc)
CustomSheet(context,sheetColor: Colors.black).showTitleBodyButtons(
      title:"Welcome",
      options: <MyCustomButton>[
        MyCustomButton(Colors.red,"option 1",(){}),
        MyCustomButton(Colors.green,"option 2",()=>Navigator.of(context).pop(true)),
        MyCustomButton(Colors.purple,"option 3",()=>Navigator.of(context).pop("3")),
      ]
)// do something with the popped value
.then((value) =>scaffoldKey.currentState.showSnackBar(SnackBar(content: Text("$value",style:TextStyle(fontSize: 150)),duration: Duration(milliseconds: 750))));

#8#9#10

Custom

Future<T2> showBS<T1,T2>({
    Widget top,
    Widget body,
    List<T1> options,
    bool isDismissible = true,
    bool blockBackButton = false,
    bool enableDrag = true,
    double buttonHeight=65
});

You can also customize the whole bottom sheet as you wish...

CustomSheet(context).showBS(
    top: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Icon(Icons.ac_unit)),
    body: Text("THIS IS A CUSTOM LAYOUT..."),
    options: <SizedBox>[
        SizedBox(width:double.infinity,child:Icon(Icons.create,size: 100,)),
        SizedBox(width:double.infinity,child:Text("IT IS",textAlign: TextAlign.center)),
        SizedBox(width:double.infinity,child:Text("UP TO YOU!!",textAlign: TextAlign.end,)),
    ]
);

| -- |

0.1.1+4 #

  • flutter stable version 1.17 fixed the onDrag, so we don't need to fix it ...

0.1.1+3 #

  • fixed readme ...

0.1.1+2 #

  • workaround to flutter stable version

0.1.1+1 #

  • Fixed readme on pub.dev

0.1.1 #

  • Fixed formatting.

0.1.0 #

  • Initial release

example/lib/main.dart

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: ExampleHome());
  }
}

class ExampleHome extends StatelessWidget {
  const ExampleHome({Key key}) : super(key: key);

  void _showLoading(BuildContext context,
      {String text,
      Color color,
      Color textColor,
      bool dissmissable = false,
      bool draggable = false,
      bool block = true}) async {
    var customSheet =
        CustomSheet(context, sheetColor: color, textColor: textColor);
    customSheet.showLoading(
        isDismissible: dissmissable,
        loadingMsg: text,
        enableDrag: draggable,
        block: block);
    if (!(dissmissable || draggable)) customSheet.dismiss(milliseconds: 3000);
  }

  void _showBottomSheetTitle(BuildContext context,
      {bool showSecondColor = false, Color secondColor}) {
    CustomSheet(context, secondColor: secondColor)
      ..showTitleBody(
          title: "HI",
          body: "My name is Joe Doe",
          bodySecondColorEnabled: showSecondColor);
  }

  void _showBottomSheetTitleButton(BuildContext context,
      {String title,
      String body,
      bool showSecondColor = false,
      Color secondColor,
      double buttonHeight}) {
    CustomSheet(context, secondColor: secondColor).showTitleBodyButtons(
        bodySecondColorEnabled: showSecondColor,
        buttonHeight: buttonHeight,
        title: title,
        body: body,
        options: <OptionButton>[
          OptionButton("do nothing", () {}),
          OptionButton("bye", () => Navigator.of(context).pop()),
        ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(title: Text("Custom Sheet Example"), centerTitle: true),
      body: ListView(
        children: [
          FlatButton(
              onPressed: () => _showLoading(context), child: Text("Loading")),
          FlatButton(
              onPressed: () => _showLoading(context, textColor: Colors.black),
              child: Text("Loading Text black")),
          FlatButton(
              onPressed: () => _showLoading(context, color: Colors.red),
              child: Text("Loading red")),
          FlatButton(
              onPressed: () => _showLoading(context,
                  text: "Click outside the bottom sheet to dismiss",
                  dissmissable: true),
              child: Text("Loading dismissable")),
          FlatButton(
              onPressed: () => _showLoading(context,
                  text: "Swipe downward to dismiss the bottom sheet",
                  draggable: true),
              child: Text("Loading draggable")),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20.0),
            child: Divider(),
          ),
          FlatButton(
              onPressed: () => _showBottomSheetTitle(context),
              child: Text("Show bottom sheet with title and body")),
          FlatButton(
              onPressed: () =>
                  _showBottomSheetTitle(context, showSecondColor: true),
              child: Text(
                  "Show bottom sheet with title and body with second color")),
          FlatButton(
              onPressed: () => _showBottomSheetTitle(context,
                  showSecondColor: true, secondColor: Colors.red),
              child: Text(
                  "Show bottom sheet with title and body with custom second color")),
          FlatButton(
              onPressed: () => _showBottomSheetTitleButton(context,
                  title: "HELLO", body: "My name is Joe Doe"),
              child: Text("Show bottom sheet with title body and buttons")),
          FlatButton(
              onPressed: () => _showBottomSheetTitleButton(
                    context,
                    title: "HELLO",
                  ),
              child: Text("Show bottom sheet with title and buttons")),
          FlatButton(
              onPressed: () => _showBottomSheetTitleButton(context,
                  body: "My name is Joe Doe"),
              child: Text("Show bottom sheet with body and buttons")),
          FlatButton(
              onPressed: () => _showBottomSheetTitleButton(context,
                  body: "My name is Joe Doe", buttonHeight: 200),
              child: Text(
                  "Show bottom sheet with body and buttons with custom height")),
          FlatButton(
              onPressed: () => _showBottomSheetTitleButton(context,
                  body: "My name is Joe Doe", secondColor: Colors.black),
              child: Text("Show bottom sheet with body and colored buttons ")),
          FlatButton(
              onPressed: () => CustomSheet(context).showTitleBodyButtons(
                      title: "HEY",
                      body: "YOU",
                      options: <SizedBox>[
                        SizedBox(
                            width: double.infinity,
                            child: RaisedButton(
                                child: Text("BUTTON 1"), onPressed: () {})),
                        SizedBox(
                            width: double.infinity,
                            child: RaisedButton(
                                child: Text("BUTTON 2"), onPressed: () {})),
                      ]),
              child: Text("Show bottom sheet with custom buttons ")),
          FlatButton(
              onPressed: () => CustomSheet(context).showBS(
                  top: Icon(Icons.ac_unit), body: Text("My name is Joe Doe")),
              child: Text("Show bottom sheet with custom title and body ")),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  custom_sheet: ^0.1.1+4

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:custom_sheet/custom_sheet.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
34
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
67
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform Linux

Because:

  • package:custom_sheet/custom_sheet.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform Web

Because:

  • package:custom_sheet/custom_sheet.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform Windows

Because:

  • package:custom_sheet/custom_sheet.dart that declares support for platforms: Android, iOS

Package does not support Flutter platform macOS

Because:

  • package:custom_sheet/custom_sheet.dart that declares support for platforms: Android, iOS

Package not compatible with SDK dart

Because:

  • custom_sheet that is a package requiring null.

Health issues and suggestions

Document public APIs. (-1 points)

15 out of 15 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.

Dependencies

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