skip to Main Content

I am trying to create a button similar to this one, I don’t have exact colors so using yellow and black.

Want this

enter image description here

My Code Output

enter image description here

here is my code:

class CustomButton extends StatelessWidget {
  final String? text;
  double width;
  final Function()? onPressed;
  CustomButton({this.width = 0.8, this.text, this.onPressed});
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        child: Center(
            child: CustomTextWidget(
          text: text!,
          textColor: AppColors.BLACK_COLOR,
          fontWeight: FontWeight.bold,
          fontSize: 1.1,
        )),
        height: ScreenSize.heightSize * 0.08,
        width: width.sw,
        decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.yellow, Colors.black],
              begin: Alignment.topRight,
              end: Alignment.topRight,
              stops: [0.7, 0.8],
              tileMode: TileMode.repeated,
            ),
            borderRadius: BorderRadius.circular(4)),
      ),
    );
  }
}

Kindly help how to do this.

3

Answers


  1. Try below code hope its help to you and used FractionalOffset

    GestureDetector(
      onTap: () {},
      child: Container(
        alignment: Alignment.center,
        height: 44.0,
        width: 100,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.yellow,
              Colors.black,
            ],
            begin: FractionalOffset.bottomCenter,
            end: FractionalOffset.topCenter,
          ),
        ),
        child: const Text('SIGN UP'),
      ),
    ),
    

    Result-> image

    Login or Signup to reply.
  2. You can modify your Linear Gradient like this:

    LinearGradient(
       colors: [
           Color.fromARGB(100, 137, 90, 11),
           Color.fromARGB(255, 252, 208, 72)
       ],
       begin: Alignment.topCenter,
       end: Alignment.center,
       stops: [0.0, 0.3],
    ),
    

    Output:

    Result

    IMO, It looks better.

    P.S. You can change colors & stops property as per your need.

    Login or Signup to reply.
  3. Use this code for Gradient color in Elevated Button

    Container(
            height: 44.0,
            decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.orange, Colors.green])),
            child: ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(primary: Colors.transparent, shadowColor: Colors.transparent),
              child: Text('Elevated Button'),
            ),
          )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search