Multi Select

const fruits = [
  'Apple',
  'Banana',
  'Blueberry',
  'Grapes',
  'Lemon',
  'Mango',
  'Kiwi',
  'Orange',
  'Peach',
  'Pear',
  'Pineapple',
  'Plum',
  'Raspberry',
  'Strawberry',
  'Watermelon',
];
 
class MultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.rich(
      hint: 'Select favorite fruits',
      format: (s) => Text(s),
      children: [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
    );
}

class DetailedMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.rich(
    hint: Text('Type'),
    format: (s) => Text(s),
    children: [
      FSelectItem(
        prefix: const Icon(FIcons.bug),
        title: const Text('Bug'),
        subtitle: const Text('An unexpected problem or behavior'),
        value: 'Bug',
      ),
      FSelectItem(
        prefix: const Icon(FIcons.filePlus2),
        title: const Text('Feature'),
        subtitle: const Text('A new feature or enhancement'),
        value: 'Feature',
      ),
      FSelectItem(
        prefix: const Icon(FIcons.messageCircleQuestionMark),
        title: const Text('Question'),
        subtitle: const Text('A question or clarification'),
        value: 'Question',
      ),
    ],
  );
}

class SectionMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.rich(
    hint: Text('Select a timezone'),
    format: (s) => Text(s),
    children: [
      FSelectSection(
        label: const Text('North America'),
        items: {
          for (final item in [
            'Eastern Standard Time (EST)',
            'Central Standard Time (CST)',
            'Mountain Standard Time (MST)',
            'Pacific Standard Time (PST)',
            'Alaska Standard Time (AKST)',
            'Hawaii Standard Time (HST)',
          ])
            item: item,
        },
      ),
      FSelectSection(
        label: const Text('South America'),
        items: {
          for (final item in [
            'Argentina Time (ART)',
            'Bolivia Time (BOT)',
            'Brasilia Time (BRT)',
            'Chile Standard Time (CLT)',
          ])
            item: item,
        },
      ),
      FSelectSection(
        label: const Text('Europe & Africa'),
        items: {
          for (final item in [
            'Greenwich Mean Time (GMT)',
            'Central European Time (CET)',
            'Eastern European Time (EET)',
            'Western European Summer Time (WEST)',
            'Central Africa Time (CAT)',
            'Eastern Africa Time (EAT)',
          ])
            item: item,
        },
      ),
      FSelectSection(
        label: const Text('Asia'),
        items: {
          for (final item in [
            'Moscow Time (MSK)',
            'India Standard Time (IST)',
            'China Standard Time (CST)',
            'Japan Standard Time (JST)',
            'Korea Standard Time (KST)',
            'Indonesia Standard Time (IST)',
          ])
            item: item,
        },
      ),
      FSelectSection(
        label: const Text('Australia & Pacific'),
        items: {
          for (final item in [
            'Australian Western Standard Time (AWST)',
            'Australian Central Standard Time (ACST)',
            'Australian Eastern Standard Time (AEST)',
            'New Zealand Standard Time (NZST)',
            'Fiji Time (FJT)',
          ])
            item: item,
        },
      ),
    ],
  );
}

class DividerMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.rich(
    hint: Text('Select a level'),
    contentDivider: FItemDivider.none,
    format: (s) => Text(s),
    children: [
      FSelectSection(
        label: const Text('Level 1'),
        divider: FItemDivider.indented,
        items: {
          for (final item in ['A', 'B']) item: '1$item',
        },
      ),
      FSelectSection(
        label: const Text('Level 2'),
        items: {
          for (final item in ['A', 'B']) item: '2$item',
        },
      ),
      FSelectItem(title: Text('Level 3'), value: '3'),
      FSelectItem(title: Text('Level 4'), value: '4'),
    ],
  );
}

class SyncMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.searchBuilder(
    hint: Text('Select a fruit'),
    format: (s) => Text(s),
    filter: (query) => query.isEmpty ? fruits : fruits.where((f) => f.toLowerCase().startsWith(query.toLowerCase())),
    contentBuilder: (context, _, fruits) => [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
  );
}

class AsyncMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.searchBuilder(
    hint: Text('Select a fruit'),
    format: (s) => Text(s),
    filter: (query) async {
      await Future.delayed(const Duration(seconds: 1));
      return query.isEmpty ? fruits : fruits.where((fruit) => fruit.toLowerCase().startsWith(query.toLowerCase()));
    },
    contentBuilder: (context, _, fruits) => [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
  );
}

class AsyncLoadingMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.searchBuilder(
    hint: Text('Select a fruit'),
    format: (s) => Text(s),
    filter: (query) async {
      await Future.delayed(const Duration(seconds: 1));
      return query.isEmpty ? fruits : fruits.where((fruit) => fruit.toLowerCase().startsWith(query.toLowerCase()));
    },
    contentLoadingBuilder: (context, style) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text('Here be dragons...', style: style.textFieldStyle.contentTextStyle.maybeResolve({})),
    ),
    contentBuilder: (context, _, fruits) => [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
  );
}

class AsyncErrorMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.searchBuilder(
    hint: Text('Select a fruit'),
    format: (s) => Text(s),
    filter: (query) async {
      await Future.delayed(const Duration(seconds: 1));
      throw StateError('Error loading data');
    },
    contentBuilder: (context, _, fruits) => [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
    contentErrorBuilder: (context, error, trace) {
      final style = context.theme.selectStyle.iconStyle;
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Icon(FIcons.messageCircleX, size: style.size, color: style.color),
      );
    },
  );
}

class ClearableMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.rich(
    hint: Text('Select a fruit'),
    format: (s) => Text(s),
    clearable: true, 
    children: [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
  );
}

class FormatMultiSelectPage extends StatelessWidget {
  static const users = [
    (firstName: 'Bob', lastName: 'Ross'),
    (firstName: 'John', lastName: 'Doe'),
    (firstName: 'Mary', lastName: 'Jane'),
    (firstName: 'Peter', lastName: 'Parker'),
  ];
 
  @override
  Widget build(BuildContext context) => FMultiSelect<({String firstName, String lastName})>.rich(
    hint: Text('Select a user'),
    format: (s) => Text(s),
    format: (user) => '${user.firstName} ${user.lastName}',
    children: [for (final user in users) FSelectItem(title: Text(user.firstName), value: user)],
  );
}

class MinMaxMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.rich(
    hint: Text('Select a fruit'),
    format: (s) => Text(s),
    min: 1,
    max: 3
    children: [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
  );
}

class ScrollHandlesMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.rich(
    hint: Text('Select a fruit'),
    format: (s) => Text(s),
    contentScrollHandles: true,
    children: [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
  );
}

const fruits = [
  'Apple',
  'Banana',
  'Blueberry',
  'Grapes',
  'Lemon',
  'Mango',
  'Kiwi',
  'Orange',
  'Peach',
  'Pear',
  'Pineapple',
  'Plum',
  'Raspberry',
  'Strawberry',
  'Watermelon',
];
 
class SortedMultiSelectPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => FMultiSelect<String>.rich(
      hint: 'Select favorite fruits',
      format: (s) => Text(s),
      sort: (a, b) => a.compareTo(b),
      children: [for (final fruit in fruits) FSelectItem(title: Text(fruit), value: fruit)],
    );
}

class FormMultiSelectPage extends StatefulWidget {
 
  @override
  State<FormMultiSelectPage> createState() => _FormMultiSelectPageState();
}
 
class _FormMultiSelectPageState extends State<FormMultiSelectPage> with SingleTickerProviderStateMixin {
  static const _departments = ['Engineering', 'Marketing', 'Sales', 'Human Resources', 'Finance'];
 
  final _formKey = GlobalKey<FormState>();
  late final _departmentController = FMultiSelectController<String>(vsync: this);
 
  @override
  Widget build(BuildContext context) => Padding(
    padding: const EdgeInsets.all(30.0),
    child: Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          FMultiSelect<String>.rich(
            controller: _departmentController,
            label: const Text('Department'),
            description: const Text('Choose your dream department(s)'),
            hint: const Text('Select departments'),
            format: (s) => Text(s),
            validator: _validateDepartment,
            children: [for (final department in _departments) FSelectItem(title: Text(department), value: department)],
          ),
          const SizedBox(height: 25),
          FButton(
            child: const Text('Submit'),
            onPress: () {
              if (_formKey.currentState!.validate()) {
                // Form is valid, do something with departments.
              }
            },
          ),
        ],
      ),
    ),
  );
 
  String? _validateDepartment(Set<String> departments) {
    if (departments.isEmpty) {
      return 'Please select departments';
    }
    return null;
  }
 
  @override
  void dispose() {
    _departmentController.dispose();
    super.dispose();
  }
}