如何在颤动中为高架按钮提供圆形边框？答案

【问题标题】：How to give Rounded Border to Elevated Button in flutter?如何在颤动中为高架按钮提供圆形边框？
【发布时间】：2021-04-19 09:38:39
【问题描述】：

由于 RaisedButton 和 OutlineButton 已被弃用，flutter 团队引入了一个新的 ElevatedButton。但我不知道如何让 ElevatedButton 的边框像下图那样圆润。


ElevatedButton(
  onPressed: () {},
  child: Text('Testing'),
),

【问题讨论】：

标签： flutter button flutter-layout

【解决方案1】：

你可以这样做：

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    ),
  ),
  child: Text(' Elevated Button')
)

【讨论】：

【解决方案2】：

 ElevatedButton(
              style: ButtonStyle(
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                      side: BorderSide(color: Colors.green)),
                ),
              ),
              onPressed: () {},
              child: Text('test'),
        )

【讨论】：

【解决方案3】：

这就是你如何使用新的 Ele 按钮

ElevatedButtonThemeData(
      style: ButtonStyle(
        shape: MaterialStateProperty.resolveWith<OutlinedBorder>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return ContinuousRectangleBorder(borderRadius: BorderRadius.circular(10));
            }
            return ContinuousRectangleBorder(borderRadius: BorderRadius.circular(10)); //CHoose any shape you want
          },
        ),
        backgroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return greyColor;
            }
            return selectedPrimaryColor; 
          },
        ),
        foregroundColor: MaterialStateProperty.resolveWith<Color>(
          (Set<MaterialState> states) {
            if (states.contains(MaterialState.disabled)) {
              return Colors.black;
            }
            return selectedPrimaryColor; 
          },
        ),
      ),
    ),

【讨论】：