Show dropdown boundary if focused-CodePudding

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,
          ),
        ),
      ),
    ),

CodePudding user response：

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,
  ),