Selecting multiple options from a dropdown list is a common requirement in Flutter app development. While plugins like flutter_custom_selector can simplify the process, let’s explore how to create a beautiful multiple select dropdown list without relying on external plugins. In your Flutter project, you might need a dropdown list that allows users to select multiple languages. Let’s enhance your existing code and provide a more elegant solution.

import 'package:flutter/material.dart';

class MultipleSelectDropdown extends StatefulWidget {
  const MultipleSelectDropdown({Key? key}) : super(key: key);

  @override
  State<MultipleSelectDropdown> createState() => _MultipleSelectDropdownState();
}

class _MultipleSelectDropdownState extends State<MultipleSelectDropdown> {
  List<String> availableLanguages = [
    "Chinese",
    "Spanish",
    "Hindi",
    "Arabic",
    "Bengali",
    "Portuguese",
    "Russian",
    "Japanese",
    "Indonesian",
    "Sinhala",
    "Tamil",
    "Mandarin",
    "Thai",
  ];

  List<String> selectedLanguages = [];

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return Container(
      width: width * 0.8,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Select Your Languages',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 10),
          Container(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey),
              borderRadius: BorderRadius.circular(8),
            ),
            child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
                isExpanded: true,
                value: selectedLanguages.isEmpty
                    ? null
                    : selectedLanguages.join(', '),
                hint: Text('Choose Languages'),
                items: availableLanguages.map((String language) {
                  return DropdownMenuItem<String>(
                    value: language,
                    child: Text(language),
                  );
                }).toList(),
                onChanged: (String? value) {
                  setState(() {
                    if (value != null) {
                      if (selectedLanguages.contains(value)) {
                        selectedLanguages.remove(value);
                      } else {
                        selectedLanguages.add(value);
                      }
                    }
                  });
                },
              ),
            ),
          ),
          SizedBox(height: 10),
          Text(
            'Selected Languages: ${selectedLanguages.join(', ')}',
            style: TextStyle(fontSize: 16),
          ),
        ],
      ),
    );
  }
}

Dropdown UI Enhancement:

We’ve wrapped the dropdown in a container for a cleaner look.

Added styling to the dropdown container for better aesthetics.

Multi-Select Functionality:

Modified the dropdown to allow multiple selections.

Display selected languages dynamically below the dropdown.

Improved User Experience:

Included a hint in the dropdown for better user guidance.

Removed the unnecessary Padding and Column in the original code.