Flutter dropdown with getX not working properly on some devices

Question

I'm using getx for state management,here's the video of the problem https://drive.google.com/file/d/1tm2M46pkXVnGuf4vyh9rNs2HY2TdtBD8/view?usp=sharing

here is my code

class ActivitiesController extends GetxController {
   late List<String> statusList = ["All", "Approved", "Unapproved"];
   var selectedStatus = "Approved".obs;
}

@override
ActivitiesController get controller => Get.put(ActivitiesController());

in view:

const RequiredText(text: "Status"),
const SizedBox(height: Constants.defaultPadding / 2),
Obx(
   () => GlobalDropDownContainer(
   hintText: "All",
   items: controller.statusList.toList(),
   onChange: (value) {
      controller.selectedStatus(value);
   },
   selectedValue: controller.selectedStatus.value,
)),

Here is the "GlobalDropDownContainer" code

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

class GlobalDropDownContainer extends StatelessWidget {
  final String hintText;
  final List<String> items;
  final double? width;
  final Color? isNotValid;
  final Function(String?) onChange;
  final String? selectedValue;

  const GlobalDropDownContainer({
    Key? key,
    required this.hintText,
    required this.items,
    this.width,
    this.isNotValid,
    required this.onChange,
    this.selectedValue,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = Get.size;
    return Container(
        width: width != null ? (size.width * width!) : Get.width,
        padding: const EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
            border: Border.all(
              width: 1,
              color: isNotValid ??
                  Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
            ),
            color:Theme.of(context).colorScheme.background,
            borderRadius: BorderRadius.circular(5)),
        child: DropdownButton<String>(
          dropdownColor: Theme.of(context).colorScheme.background,
          value: selectedValue != null && selectedValue!.isNotEmpty
              ? selectedValue
              : null,
          isExpanded: true,
          underline: const SizedBox(),
          hint: Text(
            hintText,
            style: const TextStyle(
              color: Color(0xFF666666),
            ),
          ),
          style: TextStyle(
            color: Theme.of(context).colorScheme.onBackground,
          ),
          items: items.map((String value) {
            return DropdownMenuItem<String>(
              value: value != null && value.isNotEmpty ? value : null,
              child: Text(
                value,
                style: TextStyle(
                    color: Theme.of(context).colorScheme.onBackground),
              ),
            );
          }).toList(),
          onChanged: onChange,
        ));
  }
}

I searched for a day and i didn't find anything, i tried debug the code but it gives no warning or error. Can Anyone help me?

score 0 · Answer 1 · answered Jan 28 '23 at 05:01

Try this one

Make an instance of a controller, which i presumed u have done already.

final controller = Get.put(yourgetxcontrollername());

The Widget code

           Obx(
              () => DropdownButton<String>(
                isExpanded: true,
                value: controller.selectedStatus.value,
                icon: const Icon(Icons.arrow_drop_down),
                iconSize: 24,
                elevation: 16,
                style: const TextStyle(
                  color: Colors.blue,
                  fontSize: 14,
                ),
                onChanged: (value) {
                  controller.selectedStatus(
                    value,
                  );
                },
                items: controller.statusList.map<DropdownMenuItem<String>>(
                  (String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(
                        value,
                        style: const TextStyle(
                          color: Colors.black,
                        ),
                      ),
                    );
                  },
                ).toList(),
              ),
            )

Have you checked this https://github.com/flutter/flutter/issues/22075#issuecomment-557506186. — Ninad7N, Jan 28 '23 at 06:01

Flutter dropdown with getX not working properly on some devices

1 Answers1