Flutter MaterialButton边框

833 阅读1分钟

//边框 1椭圆无边框 绿色的背景色

MaterialButton(
  onPressed: (){},
  color: Colors.green,
  child: Text('查询',style: TextStyle(color: Colors.white),),
  shape: StadiumBorder(side: BorderSide.none),
)

2 会随着数字变大 50和1的效果一样 20左右会是矩形边框的圆角

MaterialButton(
  onPressed: (){},
  color: Colors.green,
  child: Text('查询',style: TextStyle(color: Colors.white),),
  shape: RoundedRectangleBorder(//50和1的效果一样 20左右会是矩形边框的圆角
    side: BorderSide.none,
    borderRadius: BorderRadius.all(Radius.circular(50))
  ),
)

3无背景 圆角边框

MaterialButton(
  onPressed: (){},
  color: Colors.green,
  child: Text('查询',style: TextStyle(color: Colors.white),),
  shape: RoundedRectangleBorder(//无背景 圆角边框
    side: BorderSide(color: colorGray203,width: 1,style:BorderStyle.solid),
    borderRadius: BorderRadius.all(Radius.circular(5))
  ),
)

4矩形边框

MaterialButton(
  onPressed: (){},
  color: Colors.green,
  child: Text('查询',style: TextStyle(color: Colors.white),),
  shape: Border.all(color: colorGray155,width:1,style:  BorderStyle.solid),//矩形边框
)