DropDownButton widget not showing up on mobile

I have a flutter widget that uses a DropDownButton and it shows up on my Linux computer but not my Android emulator or Pixel. I have no clue where to start and cant really find anything on Google, Here is the code


class WidgetDropdown extends StatefulWidget {
  final String text;
  final IconData PickedIcon; // add IconData type
  final List<Widget> children;

  const WidgetDropdown(
      {Key? key,
      required this.text,
      required this.PickedIcon,
      required this.children}) // add this keyword
      : super(key: key);

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

class TextPair extends StatelessWidget {
  final String text1;

  const TextPair({Key? key, required this.text1}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.baseline,
      textBaseline: TextBaseline.alphabetic,
      children: [
        Text(
          text1[0],
          style: TextStyle(
            fontSize: 30,
            color: Colors.white,
          ),
        ),
        // SizedBox(width: 8.0),
        Text(
          text1.substring(1),
          style: TextStyle(
            fontSize: 18,
            color: Colors.white,
          ),
        ),
      ],
    );
  }
}

class _WidgetDropdownState extends State<WidgetDropdown>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  bool _isExpanded = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 160),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0.0, end: 0.5).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _toggle() {
    setState(() {
      _isExpanded = !_isExpanded;
      if (_isExpanded) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          InkWell(
            onTap: _toggle,
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Icon(
                    widget.PickedIcon,
                    color: formiconcolor,
                  ),
                  Expanded(
                    // add this line
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8.0),
                      child: Text(widget.text),
                    ),
                  ), // add this line
                  // or change this line
                  // child: Text(widget.text, textAlign: TextAlign.left), // add this parameter
                  RotationTransition(
                    turns: _animation,
                    child: Icon(
                      Icons.arrow_drop_down,
                      color: formiconcolor,
                    ),
                  ),
                ],
              ),
            ),
          ),
          if (_isExpanded)
            Padding(
              padding: const EdgeInsets.only(top: 8),
              child: Column(
                children: widget.children,
              ),
            ),
        ],
      ),
    );
  }
}

And how it is used.

SizedBox(width: double.infinity, child: DropdownList(items: getNickNames(), icon: Icons.restore_from_trash, hint: "Select a car", controller: carcontroller))

I tried changing the style properties and adding padding but neither of those worked.

I use this cutome global drop down widget

class CustomDropdownButton<T> extends StatefulWidget {
  final List<T> items;
  final T? value;
  final ValueChanged<T?> onChanged;
  final Widget Function(T) itemBuilder;
  final Widget? lable;
  final EdgeInsetsGeometry? contentPadding;
  final String? Function(T?)? validator;
  final String? hint;

  const CustomDropdownButton({
    super.key,
    required this.items,
    this.value,
    required this.onChanged,
    required this.itemBuilder,
    this.lable,
    this.contentPadding,
    this.validator,
    this.hint,
  });

  @override
  CustomDropdownButtonState<T> createState() => CustomDropdownButtonState<T>();
}

class CustomDropdownButtonState<T> extends State<CustomDropdownButton<T>> {
  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField<T>(
      value: widget.value,
      validator: widget.validator,
      style: TextStyle(fontSize: 12.sp),
      hint: widget.hint == null
          ? null
          : Text(
              widget.hint!,
              style: const TextStyle(
                fontSize: 13,
                fontWeight: FontWeight.w600,
              ),
            ),
      onChanged: widget.onChanged,
      dropdownColor: Colors.white,
      focusColor: Colots.blue,
      items: widget.items.map<DropdownMenuItem<T>>((T value) {
        return DropdownMenuItem<T>(
          value: value,
          child: widget.itemBuilder(value),
        );
      }).toList(),
    );
  }
}

and I use it any where i need like that

Theme(data: Theme.of(context).copyWith(
                      buttonTheme: ButtonTheme.of(context).copyWith(
                    alignedDropdown: true,
                  )),
                  child:CustomDropdownButton<CustomeType>(
                    value: initVaue,
                    hint: 'hint',
                    items: [listOfItems]<CustomeType>,
                    itemBuilder: (CustomeType item) => Text(item.name!),
                    onChanged: (CustomeType? item) {
                      // TODO selected Item
                    },
                    validator: (Government? value) {
                // TODOYour Validator
                   },
                  ),),

and Theme Widget To Customize the style of it

enter image description here

I used your code snippet, which worked for me on a pixel device. I just changed some points

change this

_WidgetDropdownState createState() => _WidgetDropdownState();

to
State<WidgetDropdown> createState() => _WidgetDropdownState();

If this didn’t work, please check the rest of the widget tree in case of overflow error.

Leave a Comment