Show dropdown boundary if focused

Question

I am making an android TV app using Flutter. How to show the boundary on a dropdown widget if the dropdown is focused?

I tried wrapping the dropdown with focus but then I could not access dropdown items.

Focus(
      focusNode: _focusNode,
      child: Container(
        decoration: _focusNode.hasFocus
            ? BoxDecoration(border: Border.all(color: Colors.grey))
            : BoxDecoration(),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<Country>(
            icon: const Icon(
              Icons.keyboard_arrow_down,
              color: Color(0xFF707B89),
              size: 18.0,
            ),
            isDense: true,
            onChanged: (Country value) {
              setState(() {
                _selectedCountry = value;
                widget.onValuePicked(value);
              });
            },
            items: items,
            value: _selectedCountry,
          ),
        ),
      ),
    ),

welcome to the StackOverflow, consider including minimal snippet while asking question. More about [asking a good question](https://stackoverflow.com/help/how-to-ask) — Md. Yeasin Sheikh, Jan 04 '23 at 13:40
Please provide enough code so others can better understand or reproduce the problem. — Community, Jan 04 '23 at 13:54

score 0 · Accepted Answer · answered Jan 04 '23 at 14:05

You can use DropdownButtonFormField with OutlineInputBorder on decoration.

   final border = OutlineInputBorder(
      borderSide: BorderSide(color: Colors.yellow),
      borderRadius: BorderRadius.circular(8),
    );

DropdownButtonFormField<Country?>(
  decoration: InputDecoration(
    border: border,
    focusedBorder: border, //this is the one you are looking for,
    enabledBorder: border,
    errorBorder: border,
    disabledBorder: border,
    focusedErrorBorder: border,
  ),

Show dropdown boundary if focused

1 Answers1