Open Custom Sheet

The Open Custom Sheet widget allows you to display a customizable bottom sheet in your Flutter application. This widget is ideal for presenting modal content or additional options to the user in a non-intrusive manner. The sheet can be dismissed by the user and can be fully customized to fit the design and functionality of your app.

---

Constructor

OpenCustomSheet({
  Key? key,
  required Widget content,
  Color? backgroundColor,
  bool isDismissible = true,
  bool enableDrag = true,
  bool isScrollControlled = true,
})

Properties

Property	Type	Description
content	Widget	The main content of the bottom sheet. This can be any widget, such as text, buttons, forms, etc.
backgroundColor	Color?	The background color of the sheet.
isDismissible	bool	Determines whether the sheet can be dismissed by tapping outside of it. Defaults to true.
enableDrag	bool	Determines whether the sheet can be dragged to dismiss it. Defaults to true.
isScrollControlled	bool	Determines whether the sheet should take up the full height of the screen. Defaults to true.

---

Usage Example

Here’s a basic example of how to use the Open Custom Sheet in your Flutter app:

OpenCustomSheet(
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Text('This is a custom sheet'),
      ElevatedButton(onPressed: () {}, child: Text('Action')),
    ],
  ),
  backgroundColor: Colors.white,
  isDismissible: true,
  enableDrag: true,
);

Example with Full-Screen Scrollable Content

OpenCustomSheet(
  content: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        Text('Scrollable content here'),
        for (int i = 0; i < 20; i++) ListTile(title: Text('Item $i')),
      ],
    ),
  ),
  backgroundColor: Colors.grey[200],
  isDismissible: true,
  enableDrag: true,
  isScrollControlled: true,
);

---

Customization Tips

• Content: The content property can be any widget, allowing for a wide range of customization. You can include forms, lists, buttons, images, or any other widgets as needed.
• Dismissal: Control how the user interacts with the sheet using the isDismissible and enableDrag properties. This can help in cases where you want to enforce interaction with the sheet's content.
• Full-Screen Mode: Use isScrollControlled to make the sheet take up the full height of the screen, which is useful for longer content that requires scrolling.
• Background Color: Set the backgroundColor to ensure the sheet matches your app's theme and design.

---

Common Use Cases

• Modal Forms: Use the Open Custom Sheet to present forms that users can fill out without leaving the current screen.
• Action Sheets: Present a list of actions or options in a way that doesn’t interrupt the user’s workflow.
• Content Previews: Use the sheet to provide a preview of content, such as an image or document, with options to view more details or take further actions.

---

Advanced Example

For more complex use cases, such as displaying a form that users can interact with or a list of actions, consider using a SingleChildScrollView inside the OpenCustomSheet to allow for scrolling content.

OpenCustomSheet(
  content: Padding(
    padding: const EdgeInsets.all(16.0),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text('Edit Profile', style: TextStyle(fontSize: 18)),
        TextField(
          decoration: InputDecoration(labelText: 'Name'),
        ),
        TextField(
          decoration: InputDecoration(labelText: 'Email'),
        ),
        SizedBox(height: 20),
        ElevatedButton(onPressed: () {}, child: Text('Save')),
      ],
    ),
  ),
  backgroundColor: Colors.white,
  isDismissible: false,
  enableDrag: false,
);

This example shows how you can use the Open Custom Sheet to present a modal form that users must interact with before continuing.