Title


Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Title


Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Button
Title


Headline
Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
Button
Button
BottomSheet(
sheetState = sheetState,
title = title,
headline = "Headline",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
sheetContent = BottomSheetContentType.Icon( icon = BottomSheetIconType.Drawable(
currentImage
)
),
mainContent = content,
)

BottomSheet(
sheetState = sheetState,
title = title,
headline = "Headline",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
sheetContent = BottomSheetContentType.Icon( icon = BottomSheetIconType.Drawable(
currentImage
)
),
buttonLabel = "Save",
onClick = { Toast.makeText(context, "Save",
Toast.LENGTH_SHORT).show()
},
mainContent = content,
)

BottomSheet(
sheetState = sheetState,
title = title,
headline = "Headline",
description = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
sheetContent = BottomSheetContentType.Icon( icon = BottomSheetIconType.Drawable(
currentImage
)
),
primaryButtonLabel = "Save",
secondaryButtonLabel = "Cancel",
primaryOnClick = {
Toast.makeText(context, "Save",
Toast.LENGTH_SHORT).show()
},
secondaryOnClick = {
Toast.makeText(context, "Cancel",
Toast.LENGTH_SHORT).show()
},
buttonsDirection =
BottomSheetButtonDirection.vertical //or
BottomSheetButtonDirection.horizontal
,
mainContent = content
)

Preview

Code

Title

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

showModalBottomSheet<void>(
  context: context,
  isDismissible: true,
  enableDrag: true,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (sheetContext) {
    return DlBottomSheet(
      headerTitle: 'title',
      contentTitle: 'Headline',
      contentDescription: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
      contentMedia: Center(
        child: SizedBox(
          width: 120,
          height: 120,
          child: Image.asset(
            'assets/images/badge_photo.png',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  },
);

Copy

Usage

Add this code example to your project to see how the component works.

showModalBottomSheet<void>(
  context: context,
  isDismissible: true,
  enableDrag: true,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (sheetContext) {
    return DlBottomSheet(
      headerTitle: 'title',
      contentTitle: 'Headline',
      contentDescription: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
      contentMedia: Center(
        child: SizedBox(
          width: 120,
          height: 120,
          child: Image.asset(
            'assets/images/badge_photo.png',
            fit: BoxFit.cover,
          ),
        ),
      ),
      buttons: [
        DlButton(
          label: 'Button',
          type: DlButtonType.primary,
          fullWidth: true,
        ),
      ],
    );
  },
);

Copy

API Reference

DlBottomSheet is a configurable modal sheet component with a centered header, optional content text blocks, optional media area and selectable action layouts.

Prop

Type

Default

headerTitle

String

required

contentTitle

String?

null

contentDescription

String?

null

contentMedia

Widget?

null

buttons

List<DlButton>

const [ ]

Examples

Without label

Preview

Code

Title

Headline

Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Button

showModalBottomSheet<void>(
  context: context,
  isDismissible: true,
  enableDrag: true,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (sheetContext) {
    return DlBottomSheet(
      headerTitle: 'title',
      contentTitle: 'Headline',
      contentDescription: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
      contentMedia: Center(
        child: SizedBox(
          width: 120,
          height: 120,
          child: Image.asset(
            'assets/images/badge_photo.png',
            fit: BoxFit.cover,
          ),
        ),
      ),
      buttons: [
        DlButton(
          label: 'Button',
          type: DlButtonType.primary,
          fullWidth: true,
        ),
      ],
    );
  },
);

Copy

Discover more content

Figma

Github

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version