multi_functional_dropdown 0.0.7

Provides a versatile dropdown widget capable of handling both single and multi-selection modes.

example/lib/main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:multi_functional_dropdown/multi_functional_dropdown.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multi Functional Dropdown',
      theme: ThemeData(
        // This is the theme of your application.

        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Person> personList = [
    Person(name: 'Alice', age: 30),
    Person(name: 'Bob', age: 25),
    Person(name: 'Charlie', age: 40),
  ];
  List<Map<String, String>> itemsList = [
    {'id': '1', 'name': 'Apple'},
    {'id': '2', 'name': 'Mango'},
    {'id': '3', 'name': 'Grapes'},
    {'id': '4', 'name': 'Banana'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // TRY THIS: Try changing the color here to a specific color (to
        // Colors.amber, perhaps?) and trigger a hot reload to see the AppBar
        // change color while the other colors stay the same.
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              MultiDropdownDialog<Map<String, String>>(
                hint: 'Select a fruit',
                fillColor: Colors.white,
                borderColor: Colors.grey,
                itemsList: itemsList,fieldIconColor:Colors.grey,
                displayText: (item) {
                  if (kDebugMode) {
                    print("ITEM $item");
                  }
                  return item['name']!;
                },
                onChanged: (selectedItem) {
                  if (kDebugMode) {
                    print('Selected fruit: $selectedItem');
                  }
                },
              ),
              const SizedBox(
                height: 10,
              ),
              MultiDropdownDialog<Person>(
                hint: 'Select Names',
                fillColor: Colors.white,
                borderColor: Colors.grey,
                itemsList: personList,
                displayText: (item) {
                  if (kDebugMode) {
                    print("ITEM $item");
                  }
                  return item.name;
                },
                onChanged: (selectedItem) {
                  if (kDebugMode ) {
                    print('Selected Person: ${selectedItem}');
                  }
                },
                selectionType: SelectionType.multi,
              ),
            ],
          ),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class Person {
  final String name;
  final int age;

  Person({required this.name, required this.age});
}