dropdown_sheet 0.0.1

A customizable dropdown sheet widget for Flutter with search functionality and multiple selection support.

Dropdown Sheet

A customizable dropdown sheet widget for Flutter with search functionality and multiple selection support.

Features

• 🎯 Customizable Design: Easy to customize colors, borders, and styling
• 🔍 Search Functionality: Built-in search capability for large datasets
• ✅ Multiple Selection: Support for both single and multiple item selection
• 📱 Responsive: Adapts to different screen sizes and orientations
• ⚡ Loading States: Built-in loading indicators and state management
• 🎨 Material Design: Follows Material Design principles
• 🔄 Dynamic Values: Support for dynamic data loading

Getting started

Add this to your package's pubspec.yaml file:

dependencies:
  dropdown_sheet: ^0.0.1

Usage

Basic Usage

import 'package:dropdown_sheet/dropdown_sheet.dart';

// Create a ValueNotifier to hold the selected value
final ValueNotifier<SheetModel?> selectedValue = ValueNotifier(null);

// Sample data
final List<SheetModel> options = [
  SheetModel(id: '1', name: 'Option 1'),
  SheetModel(id: '2', name: 'Option 2'),
  SheetModel(id: '3', name: 'Option 3'),
];

// Use the widget
DropdownSheet<SheetModel>(
  title: 'Select an option',
  values: options,
  notifier: selectedValue,
  onChanged: () {
    print('Selected: ${selectedValue.value?.name}');
  },
)

With Search Functionality

DropdownSheet<SheetModel>(
  title: 'Select an option',
  values: options,
  notifier: selectedValue,
  showSearch: true, // Enable search
  onChanged: () {
    print('Selected: ${selectedValue.value?.name}');
  },
)

With Loading State

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

DropdownSheet<SheetModel>(
  title: 'Select an option',
  values: options,
  notifier: selectedValue,
  loadingNotifier: isLoading,
  onChanged: () {
    print('Selected: ${selectedValue.value?.name}');
  },
)

With Dynamic Values

DropdownSheet<SheetModel>(
  title: 'Select an option',
  dynamicValues: () => fetchDataFromAPI(), // Function that returns data
  notifier: selectedValue,
  onChanged: () {
    print('Selected: ${selectedValue.value?.name}');
  },
)

Required Field

DropdownSheet<SheetModel>(
  title: 'Select an option',
  values: options,
  notifier: selectedValue,
  isRequired: true, // Mark as required
  onChanged: () {
    print('Selected: ${selectedValue.value?.name}');
  },
)

API Reference

DropdownSheet Properties

Property	Type	Required	Description
title	String	Yes	The title displayed above the dropdown
values	List<dynamic>?	No*	Static list of options
dynamicValues	List<dynamic>? Function()?	No*	Function that returns dynamic options
notifier	ValueNotifier<SheetModel?>	Yes	Notifier to track selected value
onChanged	Function?	No	Callback when selection changes
isRequired	bool	No	Whether the field is required (default: false)
isLoading	bool	No	Loading state (default: false)
loadingNotifier	ValueNotifier<bool>?	No	Notifier for loading state
showSearch	bool	No	Enable search functionality (default: false)

*Either values or dynamicValues must be provided.

SheetModel

class SheetModel {
  final String id;
  final String name;
  
  SheetModel({
    required this.id,
    required this.name,
  });
}

Examples

Check out the /example folder for complete working examples.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.