how to use 'dropdownbutton'?-CodePudding

There was an error when I inserted the DropdownButton code into my code. Outside the code containing the body, they declared it as a class, and when I put the class declared in the code, an error message appeared as below.

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

Below is my code.

.....
....
onChanged: (_) {
                setState(() {});
              }
            ),

            SelectButton(),


          ],
          
         ),
        ),

class SelectButtonState extends State<SelectButton> {
  final List<String> _valueList = ['M', 'F'];
  String _selectedValue = 'sex';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: _selectedValue,
      items: _valueList.map((value) {
        return DropdownMenuItem(
          value: value,
          child: Text(value),
        );
      }).toList(),
      onChanged: (value) {
        setState(() {
          _selectedValue = value!;
        });
      },
    );
  }
}

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

  @override
  State<SelectButton> createState() => SelectButtonState();
}

I want to make sex select button...

CodePudding user response：

Your _valueList contains ['M', 'F'] only and you are creating a DropDownButton out of it. When compiler finds initial value as "Select Sex" which is not available in the _valueList array, you get NULL error.

Solution -> Use 'Select Sex' as dropdown hint. Keep _selectedValue as null in intial declaration so that hint will be displayed.

CodePudding user response：

Try this one

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: aa(),
        ),
      ),
    );
  }
}

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

  @override
  State<aa> createState() => _aaState();
}

class _aaState extends State<aa> {
  String selectedNumber = '1';
  List numberList = ['1', '2', '3', '4'];

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      decoration: BoxDecoration(
          color: Colors.white, borderRadius: BorderRadius.circular(8)),
      child: DropdownButton(
        style: const TextStyle(color: Colors.black),
        dropdownColor: Colors.white,
        underline: Container(),
        value: selectedNumber,
        onChanged: (value) {
          selectedNumber = value! as String;
          setState(() {});
        },
        items: numberList.map((itemone) {
          return DropdownMenuItem(
            value: itemone,
            child: Center(
              child: Text(
                itemone,
                style: const TextStyle(
                    color: Colors.black, fontWeight: FontWeight.w700),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }
}