When the page is scrolling the selected dropdown value will change in flutter

Question

I'll change a dropdown balue 1lakh to Rs. 6000 then I scroll the screen. The selected dropdown value will be changed.

refer to my Dropdown custom widget I'll pass on all details to the widget. title, DropdownMenuItems, the callback function, and also give a initially selected value.

import 'package:flutter/material.dart';
import 'package:insurance/widgets/common/colors.dart';

class DropdownWidget extends StatefulWidget {
  const DropdownWidget(
      {super.key,
      required this.title,
      required this.dropdownList,
      required this.selectedValue,
      required this.callback});
  final String title;
  final List<String> dropdownList;
  final String selectedValue;
  final Function callback;

  @override
  State<DropdownWidget> createState() => _DropdownWidgetState();
}

class _DropdownWidgetState extends State<DropdownWidget> {
  late String title = widget.title, selectedValue = widget.selectedValue;
  late List<String> dropdownList = widget.dropdownList;
  late Function callback = widget.callback;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50,
      width: double.infinity,
      child: ListTile(
        title: SizedBox(
          width: MediaQuery.of(context).size.width * 0.5,
          child: Row(
            children: [
              Text(
                title,
                style: const TextStyle(
                    fontSize: 14,
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.w600),
                overflow: TextOverflow.ellipsis,
              ),
              Visibility(
                  child: title == 'Seating Capacity'
                      ? Text(
                          ' *',
                          style: TextStyle(color: AppColor.red),
                        )
                      : const Text(''))
            ],
          ),
        ),
        trailing: Container(
          width: MediaQuery.of(context).size.width * 0.40,
          height: 50,
          padding: const EdgeInsets.only(left: 10),
          decoration: BoxDecoration(
              color: AppColor.white,
              borderRadius: const BorderRadius.all(Radius.circular(7))),
          child: DropdownButtonHideUnderline(
            child: DropdownButton(
              value: selectedValue,
              borderRadius: const BorderRadius.all(Radius.circular(7)),
              items: dropdownList.map((String value) {
                return DropdownMenuItem(
                  value: value,
                  child: SizedBox(
                    width: MediaQuery.of(context).size.width * 0.30,
                    child: Text(
                      value.toString(),
                      style: TextStyle(
                          fontSize: 14,
                          fontFamily: 'Montserrat',
                          color: AppColor.black,
                          fontWeight: FontWeight.w500),
                      overflow: TextOverflow.clip,
                    ),
                  ),
                );
              }).toList(),
              onChanged: (String? selectedData) {
                print('hello');
                callback(selectedData);

                setState(() {
                  selectedValue = selectedData!;
                });
              },
            ),
          ),
        ),
      ),
    );
  }
}

and also the same issue on the flutter switch button What should I do?

Answer 1

if you are using your custom Dropdown widget directly inside the ListView widget replace with SingleChildScrollview (child: Column( children: [ DropdownWidget]),