'How to make gradient button in Flutter

I am new to Flutter and I want to make like this gradient button in Flutter. you can also give tutorials to make this type of button.

I want that gradient on the right side, how to make it like in image. More I got from internet is just specifying 2 colors, that's all. but how to make gradient with in a different angle.

thanks.

Solution 1:^[1]

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _Examplestate();
  }
}

class _Examplestate extends State<Example> {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Stateful Widget'),
        ),
        body: Center(
          child: RadiantGradientMask(
            gradient: LinearGradient(
              colors: [
                Colors.pink,
                Colors.red,
                Colors.orange,
              ],
            ),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(primary: Colors.white),
              onPressed: () {},
              child: const Text(
                "Hello",
                style: TextStyle(color: Colors.black),
              ),
            ),
          ),
        ));
  }
}

class RadiantGradientMask extends StatelessWidget {
  const RadiantGradientMask({
    Key? key,
    required this.child,
    required this.gradient,
  }) : super(key: key);
  final Widget child;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      shaderCallback: (Rect bounds) {
        return gradient.createShader(bounds);
      },
      child: child,
    );
  }
}

Result ->

Solution 2:^[2]

DecoratedBox(
  decoration: BoxDecoration(gradient: LinearGradient(colors: [Colors.pink, Colors.green])),
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(primary: Colors.transparent),
    child: Text('Elevated Button'),
  ),
)

Solution 3:^[3]

have you tried to use begin, end Properties of LinearGradient (Source)

gradient: LinearGradient(
        begin: Alignment.topLeft, <--------
        end: Alignment(0.8, 0.0), <--------
           colors: <Color>[
             Color(0xffee0000),
             Color(0xffeeee00)
  ],
),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	DiyorbekDev
Solution 2	Mutegi E
Solution 3	Its_Murphy

'How to make gradient button in Flutter

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]