anchored_dropdown_field 0.2.0

Animated, anchored Flutter dropdown fields with forms, single and multiple selection, local filtering, async search, and customizable menus.

example/lib/main.dart

import 'package:anchored_dropdown_field/anchored_dropdown_field.dart';
import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.teal),
      home: const DropdownExamplePage(),
    );
  }
}

class DropdownExamplePage extends StatefulWidget {
  const DropdownExamplePage({super.key});

  @override
  State<DropdownExamplePage> createState() => _DropdownExamplePageState();
}

class _DropdownExamplePageState extends State<DropdownExamplePage> {
  final _formKey = GlobalKey<FormState>();
  String? _role;
  String? _person;
  List<String> _skills = const [];

  static const _people = [
    ('ada', 'Ada Lovelace', 'Computing pioneer'),
    ('grace', 'Grace Hopper', 'Computer scientist'),
    ('margaret', 'Margaret Hamilton', 'Software engineer'),
    ('alan', 'Alan Turing', 'Mathematician'),
  ];

  Future<Iterable<DropdownItem<String>>> _searchPeople(String query) async {
    await Future<void>.delayed(const Duration(milliseconds: 500));
    final normalized = query.toLowerCase();
    return _people
        .where((person) => person.$2.toLowerCase().contains(normalized))
        .map(
          (person) => DropdownItem(
            value: person.$1,
            label: person.$2,
            description: person.$3,
          ),
        );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dropdown form fields')),
      body: Form(
        key: _formKey,
        child: ListView(
          padding: const EdgeInsets.all(24),
          children: [
            DropdownFormField<String>(
              value: _role,
              decoration: const InputDecoration(
                labelText: 'Role',
                border: OutlineInputBorder(),
              ),
              items: const [
                DropdownItem(
                  value: 'designer',
                  label: 'Designer',
                  description: 'Product and visual design',
                ),
                DropdownItem(
                  value: 'engineer',
                  label: 'Engineer',
                  description: 'Software engineering',
                ),
                DropdownItem(
                  value: 'manager',
                  label: 'Product manager',
                  description: 'Product strategy and delivery',
                ),
              ],
              search: const DropdownSearchConfig<String>(),
              validator: (value) => value == null ? 'Select a role' : null,
              onChanged: (value) => setState(() => _role = value),
            ),
            const SizedBox(height: 20),
            DropdownFormField<String>(
              value: _person,
              decoration: const InputDecoration(
                labelText: 'Person',
                border: OutlineInputBorder(),
              ),
              emptyText: 'No people found',
              search: DropdownSearchConfig<String>(
                onSearch: _searchPeople,
                minimumQueryLength: 2,
              ),
              onChanged: (value) => setState(() => _person = value),
            ),
            const SizedBox(height: 20),
            MultiDropdownFormField<String>(
              values: _skills,
              maxSelections: 3,
              decoration: const InputDecoration(
                labelText: 'Skills',
                border: OutlineInputBorder(),
              ),
              items: const [
                DropdownItem(value: 'dart', label: 'Dart'),
                DropdownItem(value: 'flutter', label: 'Flutter'),
                DropdownItem(value: 'design', label: 'Product design'),
                DropdownItem(value: 'testing', label: 'Testing'),
              ],
              search: const DropdownSearchConfig<String>(),
              onChanged: (values) => setState(() => _skills = values),
            ),
            const SizedBox(height: 24),
            FilledButton(
              onPressed: () => _formKey.currentState?.validate(),
              child: const Text('Validate'),
            ),
          ],
        ),
      ),
    );
  }
}