icon_bottomsheet
This is a customized class for bottomsheet with dynamic icon(widget) on top with various shapes. It uses the default bottomsheet imported from package:flutter/material.dart
. The IconBottomSheet class then creates a tranaparent border for the iconWidget. The size of the padding is defined by iconPadding. The iconSize is the size of the iconWidget and iconShape is the shape of the iconWidget. There are various shapes for iconWidget as circle
, square
, circleTop
, circleBottom
. Below are the images for the various iconShapes of IconBottomSheet.
Arguments
Argument | Description |
---|---|
child | This is the child widget that will be displayed in the bottomsheet. |
iconWidget | Widget displayed on top of bottomsheet. |
iconSize | Height/Width of the iconWidget. Defaults to 50 (height and width are same). |
iconPadding | Transparent border padding around the iconWidget. Defaults to 16. Use 0 when not requried. |
position | Helps to position your iconWidget on left, right or center. Defaults to center. |
iconBackgroundColor | Defines the background color of your iconWidget. Defaults to white. In order to show no color use Colors.transparent. |
childBackgroundColor | Defines the background color of your child widget. Defaults to white. |
Position
Argument | Description |
---|---|
Position.center | Aligns the iconWidget to center of the bottomsheet. It is set by default if no position is passed as a param. |
Position.left | Aligns the iconWidget to left of the bottomsheet. |
Position.right | Aligns the iconWidget to right of the bottomsheet. |
IconShape
Argument | Description |
---|---|
IconShape.circle | Creates circle shape background of iconWidget. |
IconShape.circleTop | Creates circle shape from top and square shape from bottom for background of iconWidget. |
IconShape.circleBottom | Creates circle shape from bottom and square shape from top for background of iconWidget. |
IconShape.square | Creates square shape background of iconWidget. |
Getting started
Add the package icon_bottomsheet
to your pubspec.yaml file and do pub get.
Usage
Firstly you need to change the canvas color in the theme of your material app so that you bottomsheet has transparent background.
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
canvasColor: Colors.transparent,
),
home: const MyHomePage(title: 'Icon BottomSheet'),
);
After that import showModalBottomSheet from material.dart
and then import the IconBottomSheet
from package:icon_bottomsheet/icon_bottomsheet.dart
and pass the arguments as described above.
showModalBottomSheet<int>(
context: context,
builder: (context) {
return const IconBottomSheet(
iconWidget: Icon(
Icons.cancel_outlined,
color: Colors.white,
size: 100,
),
iconShape: IconShape.square,
position: Position.right,
iconBackgroundColor: Colors.redAccent,
//childBackgroundColor: Colors.grey,
iconSize: 120,
iconPadding: 20,
child: PaymentFailed(),
);
},
);
Contributor
Contribute
If you have any ideas for extending this package or have found a bug, please contribute!
- You'll need a GitHub account.
- Fork the icon_bottomsheet repository.
- Work on your feature/bug.
- Create a pull request.
- Star this project. ⭐
- Become a hero!! 🎉