在 flutter 中制作 CheckBoxListTile 的 DropDownButton

Question

I want to make some DropdownButtons that filter data to show a specific result. I made the DropdownButton and insert the items as DropdownMenuItem, and the child of it it's CheckboxListTile..

But unfortunately it shows me this error

There should be exactly one item with [DropdownButton]'s value: checked. 
Either zero or 2 or more [DropdownMenuItem]s were detected with the same value
'package:flutter/src/material/dropdown.dart':
Failed assertion: line 882 pos 15: 'items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1'

This is my code:

import 'package:flutter/material.dart';

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

  @override
  _SendingMessagesState createState() => _SendingMessagesState();
}

class _SendingMessagesState extends State<SendingMessages> {
  String checkBoxDropped = 'Azaz';
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'إرسال إشعارات',
          style: TextStyle(fontSize: 24.0),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Padding(padding: EdgeInsets.only(top: 20.0)),
              Container(
                child: Center(
                  child: DropdownButton<String>(
                    icon: const Icon(Icons.arrow_circle_down_sharp),
                    items: [
                      DropdownMenuItem(
                        child: CheckboxListTile(
                          value: isChecked,
                          onChanged: (newValue) {
                            isChecked = newValue!;
                          },
                        ),
                        value: 'Azaz',
                      ),
                      DropdownMenuItem(
                        child: CheckboxListTile(
                          value: isChecked,
                          onChanged: (newValue) {
                            isChecked = newValue!;
                          },
                        ),
                        value: 'Sarmada',
                      ),
                    ],
                    value: checkBoxDropped,
                    onChanged: (value) {
                      setState(() {
                        checkBoxDropped = value!;
                      });
                    },
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

So.. Is there anyway to solve this, or anything can help with a DropDownButton that has multiple choice options?

Answer 1

Here you go!, This should do the trick,

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

  @override
  _SendingMessagesState createState() => _SendingMessagesState();
}

class _SendingMessagesState extends State<SendingMessages> {
  List<String> items = ['Azaz', 'Sarmada'];
  String? _selectedItem;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            'إرسال إشعارات',
            style: TextStyle(fontSize: 24.0),
          ),
          centerTitle: true,
        ),
        body: ListView(children: [
          Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Padding(padding: EdgeInsets.only(top: 20.0)),
                Container(
                    child: Center(
                  child: DropdownButton<String>(
                      icon: const Icon(Icons.arrow_circle_down_sharp),
                      value: _selectedItem,
                      items:
                          items.map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Container(
                              width: 100,
                              child: Text(
                                value,
                                style: TextStyle(
                                  fontSize: 15,
                                ),
                              )),
                        );
                      }).toList(),
                      onChanged: (String? value) {
                        if (value != null) {
                          setState(() {
                            _selectedItem = value;
                          });
                        }
                      }),
                ))
              ])
        ]));
  }
}

Answer 2

实际上，我通过制作一个特殊的 dropDownMenu 解决了这个问题，它具有自己制作的完整特殊选项。