Flutter Dropdown Button #

A highly customizable dropdown package for Flutter with overlay-based rendering, smooth animations, and specialized variants for different content types.

Features #

• 🎨 Highly Customizable: Complete control over appearance and behavior
• 📱 Overlay-based Rendering: Better positioning and visual effects
• ✨ Smooth Animations: Scale and fade effects with configurable timing
• 🎯 Outside-tap Dismissal: Automatic closure when tapping outside
• 📏 Dynamic Width: Fixed, min/max width constraints, or content-based sizing
• 📝 Text Overflow Control: Ellipsis, fade, clip, or visible overflow options
• 🎭 Multiple Variants: Generic BasicDropdownButton and specialized TextOnlyDropdownButton
• 🎨 Shared Theme System: Consistent styling across all dropdown variants
• ♿ Accessibility Support: Screen reader friendly with proper semantics

Variants #

BasicDropdownButton #

Generic dropdown supporting any widget as items with complete customization.

TextOnlyDropdownButton #

Specialized dropdown for text content with precise text rendering control.

Quick Start #

Add to your pubspec.yaml:

dependencies:
  flutter_dropdown_button: ^1.0.1

Import the package:

import 'package:flutter_dropdown_button/flutter_dropdown_button.dart';

Basic Usage #

BasicDropdownButton #

BasicDropdownButton<String>(
  items: [
    DropdownItem(
      value: 'apple',
      child: Row(
        children: [
          Icon(Icons.apple),
          SizedBox(width: 8),
          Text('Apple'),
        ],
      ),
    ),
    DropdownItem(
      value: 'banana',
      child: Text('Banana'),
    ),
  ],
  value: selectedValue,
  hint: Text('Select a fruit'),
  onChanged: (value) {
    setState(() {
      selectedValue = value;
    });
  },
)

TextOnlyDropdownButton #

TextOnlyDropdownButton(
  items: [
    'Short',
    'Medium length text',
    'Very long text that demonstrates overflow behavior',
  ],
  value: selectedText,
  hint: 'Select an option',
  maxWidth: 200,
  config: TextDropdownConfig(
    overflow: TextOverflow.ellipsis,
    maxLines: 1,
  ),
  onChanged: (value) {
    setState(() {
      selectedText = value;
    });
  },
)

Advanced Features #

Custom Theme #

TextOnlyDropdownButton(
  // ... other properties
  theme: DropdownTheme(
    borderRadius: 12.0,
    animationDuration: Duration(milliseconds: 300),
    elevation: 4.0,
    backgroundColor: Colors.white,
  ),
)

Text Configuration #

TextOnlyDropdownButton(
  // ... other properties
  config: TextDropdownConfig(
    overflow: TextOverflow.fade,
    maxLines: 2,
    textStyle: TextStyle(fontSize: 16),
    textAlign: TextAlign.center,
  ),
)

Dynamic Width #

BasicDropdownButton<String>(
  // ... other properties
  maxWidth: 300,        // Maximum width constraint
  minWidth: 150,        // Minimum width constraint
  // OR
  width: 250,           // Fixed width
)

Documentation #

For detailed documentation and advanced usage examples, see:

• Complete API Reference
• Theming Guide
• Text Configuration Guide
• Migration from DropdownButton

Example #

Check out the example app for a comprehensive demonstration of all features and customization options.

Contributing #

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

License #

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

Changelog #

See CHANGELOG.md for a detailed list of changes and version history.