[Solved] I'm getting a value selection error in the dropdownmenu

Question

Asked by mesutio on November 22, 2021 (source).

When I tap the add new document button in the app, I wanted the dropdown menu to be reset always. But the value of dropdown items are sync work. When I'm clicking the add new document button as below image.

Normally, it should reset itself when ever creating a new container.

  //@dart=2.9

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(MainPage());

class MainPage extends StatelessWidget {
  const MainPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: SwearPage());
  }
}

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

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

class _SwearPageState extends State<SwearPage> {
  TextEditingController _phoneController = TextEditingController();
  bool basildi = false;
  int index = 0;

  // we initialize the list with same elements
  List<Map<String, dynamic>> variables = List.generate(
      5,
      (index) => {
            "rdValue": [0, 0, 0],
            "cbValue": [false, false, false],
          });
  List<bool> dosyaDili = [false, false, false, false, false];

  List<String> dropdownValue = [null, null, null, null, null];
  final List<String> items = [
    "passport conversion",
    "family wallet conversion",
    "University diploma conversion",
    "Conversion of high school diploma",
    "Vize conversation"
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      dropdownValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Translation Page",
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.orange,
      ),
      body: ListView(
        children: <Widget>[
          SizedBox(
            height: 20,
          ),
          SizedBox(
            height: 20,
          ),
          addContainer(0),
          dosyaDili[0] == true ? addContainer(1) : SizedBox(),
          dosyaDili[1] == true ? addContainer(2) : SizedBox(),
          dosyaDili[2] == true ? addContainer(3) : SizedBox(),
          dosyaDili[3] == true ? addContainer(4) : SizedBox(),
          SizedBox(
            height: 20,
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                index++;

                if (index == 0) {
                  dosyaDili[0] = true;
                } else if (index == 1) {
                  dosyaDili[1] = true;
                } else if (index == 2) {
                  dosyaDili[2] = true;
                } else if (index == 3) {
                  dosyaDili[3] = true;
                } else if (index == 4) {
                  dosyaDili[4] = true;
                }
              });
            },
            child: Container(
              margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.orange,
              ),
              width: 100,
              height: 40,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(
                    width: 20,
                  ),
                  Icon(
                    Icons.add_circle,
                    color: Colors.black,
                    size: 30,
                  ),
                  SizedBox(
                    width: 70,
                  ),
                  Text(
                    "Add New Document",
                    style: TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget addContainer(int indx) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            height: 10,
          ),
          adddropDown(index)
        ],
      ),
    );
  }

  Row adddropDown(int i) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        SizedBox(
          width: 5,
        ),
        Text(
          "Document Type",
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
        ),
        SizedBox(
          width: 20,
        ),
        Container(
          width: 270,
          height: 45,
          decoration:
              BoxDecoration(border: Border.all(color: Colors.orange, width: 2)),
          child: DropdownButton<String>(
            iconSize: 30,
            icon: Icon(Icons.arrow_drop_down, color: Colors.black),
            isExpanded: true,
            value: dropdownValue[i],
            items: items.map(buildMenuItem).toList(),
            onChanged: (value) {
              this.dropdownValue[i] = value;
              setState(() {});
            },
          ),
        )
      ],
    );
  }

  DropdownMenuItem<String> buildMenuItem(String item) => DropdownMenuItem(
      value: item,
      child: Text(
        item,
        style: TextStyle(fontSize: 20),
      ));
}

Answer

Question answered by Yeasin S (source).

The issue is coming from typo mistake on

  Widget addContainer(int indx) { ///< here passing `indx`
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            height: 10,
          ),
          adddropDown(index) //< but using class level index
        ],
      ),
    );
  }

Simply rename int indx to int index like Widget addContainer(int index) {}

I prefer different names for method's parameters, so that we can avoid this type of situation.

Video Answers on YouTube

DART FLUTTER FLUTTER-DROPDOWNBUTTON FLUTTER-LAYOUT
SHARE: