CODEWITHSUNDEEP
flutterflutter-layoutflutter-dependencies
ghost deathrider
ghost deathrider

Reputation: 151

How to apply gradient to full button length in RaisedButton?

This is my code:

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...");
                    }
                    ),
              ),
            )

This is the button, BMI Button but I want the gradient to apply fully to the button full length.

I tried to wrap the RasiedButton in a container and tried but no luck. Please look into it

Upvotes: 0

Views: 68

Answers (1)

Nagual
Nagual

Reputation: 2088

you need to add

  padding: EdgeInsets.zero,

to 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...");
                    }
                    ),
              ),
            )

Upvotes: 4

Related Questions