How to make dropdown with a circular border in Flutter?-CodePudding

I want to make a combo/dropdown with the circular border which looks like this. How to design this in Flutter?

CodePudding user response：

You can achieve this with this code.

         Container(
            padding: EdgeInsets.symmetric(horizontal: 20.0),
            width: displayWidth(context) * 0.8,
            height: 40.0,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.black,  //Change the border color as your choice
              ),
              borderRadius: BorderRadius.circular(20),
            ),
            child: DropdownButton<String>(
              value: dropdownValue,
              isExpanded: true,
              icon: const Icon(Icons.keyboard_arrow_down),
              elevation: 16,
              style: const TextStyle(color: Colors.deepPurple),
              onChanged: (String? value) {
                // This is called when the user selects an item.
                setState(() {
                  dropdownValue = value!;
                });
              },
              items: list.map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
          ),

CodePudding user response：

In Flutter, you can create a combo with a circular border using the Container widget and setting the decoration property to a BoxDecoration with a shape of BoxShape.circle.

Here's an example:

Container(
   width: 100,
   height: 100,
   decoration: BoxDecoration(
     shape: BoxShape.circle,
     border: Border.all(width: 2, color: Colors.blue)
   ),
   child: ... // add the combo content here
)

You can customize the border width and color by adjusting the width and color properties of the Border object, respectively.