在 RaisedButton 内放置一个 CircularProgressIndicator 保持大小

Question

我想将 a 放在 aCircularProgressIndicator内RaisedButton，但是当我这样做时，CircularProgressIndicator该按钮不适合按钮并伸出它。

我想缩小CircularProgressIndicator，使其适合于RaisedButton，我知道我可以使用 a 来做到这一点，SizedBox但我希望它是自动的，而不是我给它我想要的大小。我试过了，FittedBox但它的所有选项都没有任何区别。

这是我的按钮代码：

RaisedButton(
    onPressed: () => print('hi'),
    shape: StadiumBorder(),
    color: Theme.of(context).primaryColor,
    child: Row(
      children: <Widget>[       
      Padding(
          padding: const EdgeInsets.only(right: 12, top: 6, bottom: 6),
          child: CircularProgressIndicator(
            backgroundColor: Colors.white,
            strokeWidth: 2,
          ),
        ),        
        Text('Loading'),
      ],
    ),
),

这就是它的样子：

当我添加Padding它时，按钮会增长：

有没有办法自动实现这一目标？

---

编辑：

为了说清楚，我想要的最终效果是这样的：

用户按下按钮前后：

我希望高度自动保持不变，在SizedBox.

Answer 1

这是完全有可能的。您将CircularProgressIndicatora 包裹在内部SizedBox以将其限制为该大小。还可以使用MainAxisSize.Minin 来Row防止按钮尝试扩展到无限大小。

ElevatedButton(
        onPressed: (){},
        style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.blue)),
        child: isLoading
            ? Padding(
                padding: const EdgeInsets.all(5.0),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text("Loading"),
                    SizedBox(
                      width: 5,
                    ),
                    SizedBox(
                      height: 20,
                      width: 20,
                      child: CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation(Colors.white),
                        backgroundColor: Colors.blue,
                        strokeWidth: 3,
                      ),
                    )
                  ],
                ),
              )
            : Text("Not Loading"))

这为您提供了以下内容

Answer 2

查看CircularProgressIndicator源代码，我可以发现硬编码的最小尺寸为 36.0 高度/宽度，因此无法自动变小。