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

Posted 2021-03-19

我使用下面的代码来绘制矩形的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',
        ),
      ),);
    }
  }

上面的代码给出了这样的下拉菜单

我想要这样的输出，可以吗？

答案

试试这个，让我知道你的想法。

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