Skip to main content

BottomSheetAppi

A flexible function to display customizable bottom sheets and popup dialogs in Flutter apps with blur effects and loading states.

Features​

  • Modal Bottom Sheet: Displays content in a modal bottom sheet with rounded corners
  • Popup Dialog: Alternative popup mode for smaller content
  • Blur Background: Beautiful backdrop filter with blur effects
  • Loading States: Built-in loading indicator support
  • Responsive: Adapts to keyboard and screen size changes
  • Customizable: Full control over height, title, and content
  • Dismissible: User can dismiss by tapping outside or dragging down

Usage​

Basic Bottom Sheet​

bottomSheetAppi(
  context: context,
  height: 300,
  child: Column(
    children: [
      Text('Bottom Sheet Content'),
      ElevatedButton(
        onPressed: () => Navigator.pop(context),
        child: Text('Close'),
      ),
    ],
  ),
  load: ValueNotifier(false),
);

Bottom Sheet with Title​

bottomSheetAppi(
  context: context,
  title: 'Select Option',
  titleColor: Colors.blue,
  height: 400,
  child: ListView(
    children: [
      ListTile(
        title: Text('Option 1'),
        onTap: () => _handleOption1(),
      ),
      ListTile(
        title: Text('Option 2'),
        onTap: () => _handleOption2(),
      ),
    ],
  ),
  load: ValueNotifier(false),
);
bottomSheetAppi(
  context: context,
  popup: true,
  height: 250,
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.warning, size: 48, color: Colors.orange),
        SizedBox(height: 16),
        Text('Are you sure?'),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Cancel'),
            ),
            ElevatedButton(
              onPressed: () => _confirmAction(),
              child: Text('Confirm'),
            ),
          ],
        ),
      ],
    ),
  ),
  load: ValueNotifier(false),
);

With Loading State​

final ValueNotifier<bool> loadingNotifier = ValueNotifier(false);

bottomSheetAppi(
  context: context,
  height: 300,
  child: Column(
    children: [
      Text('Processing...'),
      ElevatedButton(
        onPressed: () async {
          loadingNotifier.value = true;
          await _performAsyncOperation();
          loadingNotifier.value = false;
          Navigator.pop(context);
        },
        child: Text('Submit'),
      ),
    ],
  ),
  load: loadingNotifier,
);

Parameters​

NameTypeDescriptionDefault
contextBuildContextRequired. The build context-
heightdoubleRequired. Height of the bottom sheet/dialog-
childWidgetRequired. Content widget to display-
loadValueNotifier<bool>Required. Loading state notifier-
titleString?Optional title for the bottom sheetnull
titleColorColor?Color for the title textnull
popupbool?Whether to show as popup dialog instead of bottom sheetfalse

Features Explained​

  • Displays content from the bottom of the screen
  • Rounded top corners for modern appearance
  • Backdrop blur effect for better focus
  • Drag handle indicator at the top
  • Dismissible by tapping outside or swiping down
  • Adapts to keyboard appearance
  • Centers content on screen
  • Fixed size (370x350) with rounded corners
  • Better for smaller content or confirmations
  • Modal overlay with blur background

Loading States​

  • Shows circular loading indicator when load.value is true
  • Prevents user interaction during loading
  • Automatically centers the loader

Blur Background​

  • Beautiful backdrop filter with sigma blur
  • Semi-transparent overlay
  • Enhances focus on the content

Best Practices​

  1. Height Management: Set appropriate height based on content
  2. Loading States: Always provide loading feedback for async operations
  3. Dismissal: Provide clear ways to close the bottom sheet
  4. Content Organization: Use proper spacing and layout in child widget
  5. Accessibility: Ensure content is accessible with proper semantics
  6. Keyboard Handling: Content automatically adjusts for keyboard appearance
  7. Mode Selection: Use popup mode for confirmations, bottom sheet for lists/forms

Examples​

Form Bottom Sheet​

bottomSheetAppi(
  context: context,
  title: 'Add New Item',
  height: 500,
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Form(
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: 'Name'),
          ),
          SizedBox(height: 16),
          TextFormField(
            decoration: InputDecoration(labelText: 'Description'),
            maxLines: 3,
          ),
          Spacer(),
          ElevatedButton(
            onPressed: _submitForm,
            child: Text('Save'),
          ),
        ],
      ),
    ),
  ),
  load: _formLoadingNotifier,
);

Selection Bottom Sheet​

bottomSheetAppi(
  context: context,
  title: 'Choose Category',
  height: 400,
  child: ListView.builder(
    itemCount: categories.length,
    itemBuilder: (context, index) {
      return ListTile(
        leading: Icon(categories[index].icon),
        title: Text(categories[index].name),
        onTap: () {
          _selectCategory(categories[index]);
          Navigator.pop(context);
        },
      );
    },
  ),
  load: ValueNotifier(false),
);

Confirmation Dialog​

bottomSheetAppi(
  context: context,
  popup: true,
  height: 200,
  child: Padding(
    padding: EdgeInsets.all(20),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          'Delete Item?',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 16),
        Text('This action cannot be undone.'),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text('Cancel'),
            ),
            ElevatedButton(
              onPressed: () {
                _deleteItem();
                Navigator.pop(context);
              },
              style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
              child: Text('Delete'),
            ),
          ],
        ),
      ],
    ),
  ),
  load: ValueNotifier(false),
);

See Also​