Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.2.0

combos

Combo Widgets for Flutter. Includes Combo, AwaitCombo, ListCombo, SelectorCombo, TypeaheadCombo, MenuItemCombo

pub.dev API documentation Source code
30-day downloads
58
Likes
21
Pub points
40

Install package

flutter pub add combos

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Combos is a Flutter package that provides a collection of specialized combo widgets designed to simplify common UI patterns, particularly for dropdown and selection-based interactions. It includes widgets like Combo, AwaitCombo, ListCombo, SelectorCombo, TypeaheadCombo, and MenuItemCombo, each tailored for specific use cases such as asynchronous data loading, list rendering, and type-ahead search functionality. These components enhance developer productivity by offering reusable, consistent, and customizable solutions for form inputs and navigation menus in Flutter applications.

Use cases

  • Form inputs with dynamic options
  • Type-ahead search fields
  • Asynchronous data loading in dropdowns
  • Customizable menu item rendering
  • List-based selection interfaces
  • Dynamic form field dependencies

Key features

  • Pre-built combo widgets for common patterns
  • Support for async data via AwaitCombo
  • Typeahead input with filtering
  • Flexible list and selector integration
  • Reusable and composable design
  • Clean, consistent API across widgets

Suitable for

  • Developers building forms with complex dropdowns
  • Teams needing reusable selection components
  • Apps requiring searchable or dynamic lists
  • Flutter projects focused on UX consistency
  • Developers wanting to reduce boilerplate for combos

Considerations

  • Limited platform-specific customization
  • No built-in theming support
  • Requires understanding of Flutter widget composition
  • May increase bundle size slightly
  • Not optimized for very large datasets without pagination

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Combos

About

Combo widgets for Flutter.

Install instructions

Docs

Online Samples

alt text

Includes:

  • Combo - Simple combo widget for custom child and popup content.
  • AwaitCombo - Combo widget with delayed popup content builder for loading data with the progress indication
  • ListCombo - Combo widget for displaying items list
  • SelectorCombo - Combo widget for displaying items list with selected value
  • TypeaheadCombo - Typeahead widget with the text input and custom 'search' method
  • MenuItemCombo - Menu item widget for displaying popup menus
Examples
  • Combo
Combo(
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Combo child'),
  ),
  popupBuilder: (context, mirrored) => const Material(
    elevation: 4,
    child: Padding(
      padding:
          EdgeInsets.symmetric(vertical: 48, horizontal: 16),
      child: Center(child: Text('Combo popup')),
    ),
  ),
)
  • AwaitCombo
AwaitCombo(
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Combo child'),
  ),
  popupBuilder: (context) async {
    await Future.delayed(const Duration(milliseconds: 500));
    return const Material(
      elevation: 4,
      child: Padding(
        padding:
            EdgeInsets.symmetric(vertical: 48, horizontal: 16),
        child: Center(child: Text('Combo popup')),
      ),
    );
  },
)
  • ListCombo
ListCombo<String>(
  child: const Padding(
    padding: EdgeInsets.all(16),
    child: Text('Combo child'),
  ),
  getList: () async {
    await Future.delayed(const Duration(milliseconds: 500));
    return ['Item1', 'Item2', 'Item3'];
  },
  itemBuilder: (context, parameters, item) => ListTile(title: Text(item)),
  onItemTapped: (item) {},
)
  • SelectorCombo
String _item;

...

SizedBox(
  width: 200,
  child: SelectorCombo<String>(
    selected: _item,
    getList: () async {
      await Future.delayed(const Duration(milliseconds: 500));
      return ['Item1', 'Item2', 'Item3'];
    },
    itemBuilder: (context, parameters, item) =>
        ListTile(title: Text(item ?? '<Empty>')),
    onItemTapped: (item) => setState(() => _item = item),
  ),
)
  • TypeaheadCombo
String _item;

...

SizedBox(
  width: 200,
  child: TypeaheadCombo<String>(
    selected: _item,
    getList: (text) async {
      await Future.delayed(const Duration(milliseconds: 500));
      return ['Item1', 'Item2', 'Item3'];
    },
    itemBuilder: (context, parameters, item) =>
        ListTile(title: Text(item ?? '<Empty>')),
    onItemTapped: (item) => setState(() => _item = item),
    getItemText: (item) => item,
    decoration: const InputDecoration(labelText: 'Typeahead'),
  ),
)
  • MenuItemCombo
MenuItemCombo<String>(
  item: MenuItem(
      'File',
      () => [
            MenuItem('New'),
            MenuItem.separator,
            MenuItem('Open'),
            MenuItem('Save'),
            MenuItem('Save As...'),
            MenuItem.separator,
            MenuItem(
                'Recent',
                () => [
                      MenuItem('Folders', () async {
                        await Future.delayed(
                            Duration(milliseconds: 500));
                        return [
                          MenuItem('Folder 1'),
                          MenuItem('Folder 2'),
                          MenuItem('Folder 3'),
                        ];
                      }),
                      MenuItem('Files', () async {
                        await Future.delayed(
                            Duration(milliseconds: 500));
                        return [
                          MenuItem('File 1'),
                          MenuItem('File 2'),
                          MenuItem('File 3'),
                        ];
                      }),
                    ]),
            MenuItem.separator,
            MenuItem('Exit'),
          ]),
  itemBuilder: (context, parameters, item) => Padding(
    padding: const EdgeInsets.all(16),
    child: Text(item.item),
  ),
  onItemTapped: (value) {
    final dialog =
        AlertDialog(content: Text('${value.item} tapped!'));
    showDialog(context: context, builder: (_) => dialog);
  },
)

Categories

Dropdown

Source repository

Projects using this package

No data available yet.