如何在flutter中为下拉按钮制作圆形边框?

时间:2018-11-05 07:46:19

标签: drop-down-menu flutter spinner flutter-layout

如何添加圆角矩形边框? 以下代码未在屏幕上显示任何边框。

Container(margin: EdgeInsets.only(top: 10.0, right: 10.0, left: 10.0),
 width: double.infinity,
 // decoration: ShapeDecoration(
 //  shape: RoundedRectangleBorder(
 //   borderRadius:BorderRadius.all(Radius.circular(5.0)),
 //                             ),

 child: DropdownButtonHideUnderline(
  child: Container(
   margin: EdgeInsets.only(
    left: 10.0, right: 10.0),
     child: new DropdownButton<UserTest>(...),
                           ),
                          ),
                   ),

7 个答案:

答案 0 :(得分:12)

对于表单字段变体,您可以使用OutlineInputBorder InputBorder,通常用于输入文本字段:

DropdownButtonFormField(
  ...
  decoration: const InputDecoration(
    border: const OutlineInputBorder(),
  ),
),

可以复制表单字段执行此操作的方式,并与常规DropdownButton一起使用:

InputDecorator(
  decoration: const InputDecoration(border: const OutlineInputBorder()),
  child: DropdownButtonHideUnderline(
    child: DropdownButton(
      ...
    ),
  ),
),

Border preview

答案 1 :(得分:6)

您需要指定side:属性。默认情况下为BorderSide.none

      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
          side: BorderSide(width: 1.0, style: BorderStyle.solid),
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
        ),
      ),

答案 2 :(得分:3)

Sample Output

Envoy

答案 3 :(得分:1)

将其包裹在 Material 中并移除 DropDown 边框

var VAR = db.YourModel.Where(x => x.YourColumn  == YourString/Value).ToList();

答案 4 :(得分:0)

Container(width: 200.0,
          height: 50.0,
          decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(7.0),
          border: Border.all(color: Colors.blueGrey)),
                         child: DropdownButton<String>(
                         hint: Text("Messaging"),
                         items: <String>['Messaging', 'Chating', 'No Longer Interested', 'Document Request'].map((String value) {
                            return new DropdownMenuItem<String>(
                              value: value,
                              child: new Text(value),
                            );
                          }).toList(),
                          onChanged: (_) {},
                      ),
                      )

答案 5 :(得分:0)

如果您想要的是这个

enter image description here

那你就去

@Entity
@Access(AccessType.FIELD)
@Table(name = "HA2_SECTIONS")
public class Section implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 5682256903402500234L;


    @ManyToOne(fetch = FetchType.EAGER)
    private Event event;
    private int anzahl;

    @OneToMany(cascade = CascadeType.ALL, orphanRemoval = true, fetch = FetchType.EAGER, mappedBy = "section")
    private Collection<Ressourcenbuchung> schueler;

礼貌inducesmile

快乐编码。...

答案 6 :(得分:0)

Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      border: Border.all(
        color: HexColor('#C88A3D'),
        width: 3.0
      )
    ),
    child: Container(
      decoration: new BoxDecoration(borderRadius:
      BorderRadius.circular(20.0),
      color: Colors.white,),
    )
  ),