customizable_bottom_sheet #

A highly customizable Flutter bottom sheet with built-in search functionality. Perfect for item selection, country pickers, and any searchable list interface.

Features #

✨ Real-time Search - Instant filtering as you type
🎨 Highly Customizable - 30+ customization options
✅ Checkbox Support - Built-in selection indicators
🔧 Edit/Delete Actions - Per-item action buttons
📱 Keyboard Aware - Adjusts for keyboard automatically
🎭 Smooth Animations - Fade-in animation out of the box
🎯 Empty States - Custom widgets for empty/no results
🌈 Theme Integration - Respects Material Design theme
⚡ Zero Dependencies - Only requires Flutter

Preview #

Installation #

Add to your pubspec.yaml:

dependencies:
  customizable_bottom_sheet: ^1.0.0

Then run:

flutter pub get

Usage #

Basic Example #

import 'package:customizable_bottom_sheet/customizable_bottom_sheet.dart';

// Show bottom sheet and get selected item
final country = await CustomizableBottomSheet.show<Country>(
  context: context,
  data: countries,
  hint: 'Search country',
  itemBuilder: (country) => Text(country.name),
  searchFilter: (country, query) =>
    country.name.toLowerCase().contains(query.toLowerCase()),
);

if (country != null) {
  print('Selected: ${country.name}');
}

Complete Example with All Features #

final product = await CustomizableBottomSheet.show<Product>(
  context: context,
  data: products,
  hint: 'Search products',
  title: 'Select a Product',

  // Item builder
  itemBuilder: (product) => Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(product.name, style: TextStyle(fontWeight: FontWeight.bold)),
      Text('\$${product.price}', style: TextStyle(color: Colors.grey)),
    ],
  ),

  // Search filter
  searchFilter: (product, query) =>
    product.name.toLowerCase().contains(query.toLowerCase()) ||
    product.category.toLowerCase().contains(query.toLowerCase()),

  // With checkboxes
  showCheckbox: true,
  isChecked: (product) => selectedProducts.contains(product),

  // With actions
  onEdit: (product, index) {
    // Handle edit
    print('Edit: ${product.name}');
  },
  onDelete: (product, index) {
    // Handle delete
    print('Delete: ${product.name}');
  },

  // Custom trailing
  trailingBuilder: (product) => product.isNew
    ? Chip(label: Text('NEW'))
    : null,

  // Sort items
  sortItems: (products) => products..sort((a, b) => a.name.compareTo(b.name)),

  // Customization
  backgroundColor: Colors.white,
  borderRadius: 24.0,
  maxHeightFraction: 0.9,
  autoCapitalize: true,
);

Simple List Selection #

final fruit = await CustomizableBottomSheet.show<String>(
  context: context,
  data: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'],
  hint: 'Search fruit',
  title: 'Select Fruit',
  itemBuilder: (fruit) => Text(fruit),
  searchFilter: (fruit, query) =>
    fruit.toLowerCase().contains(query.toLowerCase()),
);

Custom Empty State #

await CustomizableBottomSheet.show<Item>(
  context: context,
  data: items,
  hint: 'Search',
  itemBuilder: (item) => Text(item.name),
  searchFilter: (item, query) => item.name.contains(query),

  // Custom empty state
  emptyWidget: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.inventory, size: 64, color: Colors.grey),
      SizedBox(height: 16),
      Text('No items in inventory'),
      ElevatedButton(
        onPressed: () => addNewItem(),
        child: Text('Add Item'),
      ),
    ],
  ),

  // Custom no results state
  noResultsWidget: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.search_off, size: 64),
      Text('No matching results'),
    ],
  ),
);

Show Custom Widget #

await CustomizableBottomSheet.showCustom(
  context: context,
  child: MyCustomBottomSheetContent(),
  borderRadius: 20,
  maxHeightFraction: 0.8,
);

API Reference #