在 flutter 中设计矩形下拉小部件

Question

I am using below code to draw rectangular DropDownWidget

  class DropDownWidget extends StatelessWidget {
    final List<String> _dropdownValues = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five"
    ]; //The list of values we want on the dropdown

    @override
    Widget build(BuildContext context) {
      return Container(
        padding: EdgeInsets.symmetric(horizontal: 10.0),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(15.0),
          border: Border.all(
              color: Colors.red, style: BorderStyle.solid, width: 0.80),
        ),
        child: DropdownButtonHideUnderline(
          child: DropdownButton(
            hint: Text('Enter'),
          items: _dropdownValues
              .map((value) => DropdownMenuItem(
                    child: Text(value),
                    value: value,
                  ))
              .toList(),
          onChanged: (String value) {},
          isExpanded: true,
          value: 'One',
        ),
      ),);
    }
  }

Above code gives dropdown like

I want output like this, is it possible?

Answer 1

Try this out and let me know what you think

 Material(
        elevation: 6,
        color: Colors.white,
        borderRadius: BorderRadius.circular(10.0),
        child: Padding(
          padding: EdgeInsets.fromLTRB(10, 0, 10, 20),
          child: DropdownButtonHideUnderline(
            child: DropdownButton<String>(
              hint: ListTile(
                title: Text(
                  'Goal for activation',
                  style: TextStyle(color: Colors.grey[600], fontSize: 14),
                ),
                subtitle: Text(
                  '- Choose Option -',
                  style: TextStyle(color: Colors.black, fontSize: 18),
                  textAlign: TextAlign.left,
                ),
              ),
              items: _dropdownValues
                  .map((value) => DropdownMenuItem<String>(
                        child: Text(value),
                        value: value,
                      ))
                  .toList(),
              onChanged: (String value) {},
              isExpanded: true,
            ),
          ),
        ),
      ),