如何在 RaisedButton 中将渐变应用于整个按钮长度？答案

【问题标题】：How to apply gradient to full button length in RaisedButton?如何在 RaisedButton 中将渐变应用于整个按钮长度？
【发布时间】：2021-05-24 11:23:19
【问题描述】：

这是我的代码：

ButtonTheme(
              minWidth: ScreenUtil().screenWidth,
              height: 0.06.sh,
              child: Padding(
                padding: const EdgeInsets.fromLTRB(20, 30, 20, 0),
                child: RaisedButton(
                    color: _BMIyellow,                  
                  child: Container(
                    width: ScreenUtil().screenWidth,
                    height: 0.06.sh,
                    decoration: ShapeDecoration(
                        shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(8.0)
                        ),
                        gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [_BMIyellow, Colors.black45]
                        )
                    ),
                    child: Center(
                      child: Text("What is my BMI",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'San francisco',
                        fontSize: 20.0.ssp,
                      ),
                      ),
                    ),
                  ),
                    shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(8.0)
                    ),
                    onPressed: (){
                      debugPrint("Your BMI is...");
                    }
                    ),
              ),
            )

这是按钮，，但我希望渐变完全应用于按钮的全长。

我尝试将 RasiedButton 包装在一个容器中，但没有成功。请仔细查看

【问题讨论】：

stackoverflow.com/questions/52243364/…
创建了一个自定义的凸起按钮并且它有效。 !@Shubham Narkhede 仍然困扰着我，我的代码出了什么问题

标签： flutter flutter-layout flutter-dependencies

【解决方案1】：

你需要添加

  padding: EdgeInsets.zero,

致RaisedButton

ButtonTheme(
              minWidth: ScreenUtil().screenWidth,
              height: 0.06.sh,
              child: Padding(
                padding: const EdgeInsets.fromLTRB(20, 30, 20, 0),
                child: RaisedButton(
                padding: EdgeInsets.zero, // this one
                    color: _BMIyellow,                  
                  child: Container(
                    width: ScreenUtil().screenWidth,
                    height: 0.06.sh,
                    decoration: ShapeDecoration(
                        shape: RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(8.0)
                        ),
                        gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [_BMIyellow, Colors.black45]
                        )
                    ),
                    child: Center(
                      child: Text("What is my BMI",
                      style: TextStyle(
                        color: Colors.black,
                        fontFamily: 'San francisco',
                        fontSize: 20.0.ssp,
                      ),
                      ),
                    ),
                  ),
                    shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(8.0)
                    ),
                    onPressed: (){
                      debugPrint("Your BMI is...");
                    }
                    ),
              ),
            )

【讨论】：

我将填充从 ``` padding: const EdgeInsets.fromLTRB(20, 30, 20, 0), ``` 更改为 padding: EdgeInsets.zero 但没有运气，结果相同。现在按钮已扩展到屏幕宽度。