Flutter RaisedButton 未正确舍入

Question

我正在学习使用 Flutter，现在我在设置按钮样式时偶然发现了一个问题。即使遵循此处提出的指南和问题，我的样式按钮也会出现“错误”，可能是因为我的代码中存在问题。检查按钮现在的外观：

这是我的按钮代码（问题就在那里，因为它甚至只显示按钮），我认为问题出在我里面的容器中，这可能是错误的，但我无法做到发现问题：

 RaisedButton(
            onPressed: () {},
            textColor: Colors.white,
            shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(30.0),
            ),
            child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: <Color>[
                    Colors.purple,
                    Color.fromARGB(1, 247, 120, 150),
                  ],
                ),
              ),
              padding: const EdgeInsets.all(20.0),
              child: const Text('Empezar partida',
                  style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                      fontWeight: FontWeight.bold)),
            ),
          )

Answer 1

试试这个代码。

Container(
             height: 50.0,
             margin: EdgeInsets.all(10),
             child: RaisedButton(
               onPressed: () {},
               shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(80.0)),
               padding: EdgeInsets.all(0.0),
               child: Ink(
                 decoration: BoxDecoration(
                     gradient: LinearGradient(
                       colors: [Color(0xff374ABE), Color(0xff64B6FF)],
                       begin: Alignment.centerLeft,
                       end: Alignment.centerRight,
                     ),
                     borderRadius: BorderRadius.circular(30.0)),
                 child: Container(
                   constraints:
                       BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
                   alignment: Alignment.center,
                   child: Text(
                     "Gradient Button",
                     textAlign: TextAlign.center,
                     style: TextStyle(color: Colors.white, fontSize: 15),
                   ),
                 ),
               ),
             ),
           ),

使用 Ink 小部件在您的按钮中绘制渐变。 https://api.flutter.dev/flutter/material/Ink-class.html

Answer 2

检查此代码

RaisedButton(
 padding: const EdgeInsets.all(0.0),
   shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.circular(30.0),),
  onPressed: () {},
  textColor: Colors.white,
  child: Container(
    decoration: const BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.all(Radius.circular(30)),
      gradient: LinearGradient(
        colors: <Color>[
          Colors.purple,
          Color.fromARGB(1, 247, 120, 150),
        ],
      ),
    ),
    padding: const EdgeInsets.all(20.0),
    child: const Text('Empezar partida',
        style: TextStyle(
            fontSize: 20,
            color: Colors.white,
            fontWeight: FontWeight.bold)),
  ),
),

Answer 3

在@AshwithSaldanha 和@VarunKamani 的解决方案的帮助下（你有我的赞成票！），我设法找到了一个可以很好地解决我的问题的不同解决方案：我刚刚在我的 Container() 中使用了 EdgeInsets.only () 并提供以下参数来修复它：

padding: EdgeInsets.only(left: 27.0, top: 19, bottom: 19, right: 27)

这只有在 RaisedButton() 的填充为 0 时才有效：

padding: const EdgeInsets.all(0.0)

最终代码如下所示：

      RaisedButton(
        padding: const EdgeInsets.all(0.0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30.0),
        ),
        onPressed: () {},
        textColor: Colors.white,
        child: Container(
          decoration: const BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.all(Radius.circular(30)),
            gradient: LinearGradient(
              colors: <Color>[
                Colors.purple,
                Color.fromARGB(1, 247, 120, 150),
              ],
            ),
          ),
          padding:
              EdgeInsets.only(left: 27.0, top: 19, bottom: 19, right: 27),
          child: const Text('Empezar partida',
              style: TextStyle(
                  fontSize: 21,
                  color: Colors.white,
                  fontWeight: FontWeight.bold)),
        ),
      ),

这就是它的外观：