Flutter: How to make dropdownbutton resize according to what was selected

user_2561417 0
Viewed 340

I'm trying to make a dropdown button resize its width according to either what item was selected in the dropdown or the width of the "hint" text. How can I do this I'm totally lost. The dropdown button is being placed inside of a ListView that is horizontally scrollable.

class FilterDropdown extends StatelessWidget {
  final Text? hint;
  final String? value;
  final List<DropdownMenuItem<String>>? items;
  final Function(String?)? onChanged;
  final Key? key;
  final IconData? iconData;

  FilterDropdown(
      {this.key,
      this.hint,
      this.value,
      this.items,
      this.onChanged,
      this.iconData});

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.white),
          borderRadius: BorderRadius.circular(8.0),
          color: const Color(0xff161F25),
        ),
        child: Padding(
          padding: const EdgeInsets.fromLTRB(21, 0, 21, 0),
          child: DropdownButtonHideUnderline(
              child: DropdownButton<String>(
            selectedItemBuilder: (BuildContext context) {
              return items!.map<Widget>((DropdownMenuItem<String> item) {
                Text innerWidget = item.child as Text;
                return Align(
                    alignment: Alignment.centerLeft,
                    child: Text(
                      innerWidget.data!,
                      style: TextStyle(color: Colors.white),
                    )
                    // style: const TextStyle(color: Colors.white)),
                    );
              }).toList();
            },
            style: const TextStyle(
              color: Colors.black,
              fontSize: 16,
            ),
            key: key,
            hint: Align(
              alignment: Alignment.centerLeft,
              child: hint,
            ),
            value: value,
            icon: const Icon(Icons.arrow_drop_down),
            items: items,
            onChanged: onChanged,
          )),
        ));
  }
}
dart flutter
2 Answers
Expanded(
    child: new Column(
    children: <Widget>[
        new DropdownButton(
            items: [
                new DropdownMenuItem(child: new Text("Abc")),
                new DropdownMenuItem(child: new Text("Xyz")),
            ],
            hint: new Text("Select City"),
            onChanged: null
          )
       ]
    ),
    flex: 1,
)

Use Column

user_84800690

you can do like this:

Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.only(left: 8, right: 3, top: 0, bottom: 0),
          child: DropdownButtonHideUnderline(
            child: DropdownButton(
              icon: widget.icon,
              isExpanded: true,
              onChanged: (value) {},
              value: 0,
              items:
                    new DropdownMenuItem(child: new Text("1")),
                    new DropdownMenuItem(child: new Text("2")),
            ),
          ),
        )
user_25917140
Related