Create Gradient on Top Right of the page in Flutter

Question

Hy everyone,

I need to know, how can I create gradient on top right of the page like this picture?

I tried with this code, but it's still not working for me:

Scaffold(
  backgroundColor: Colors.white,
  body: SafeArea(
    child: Stack(
      children: [
        Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.center,
              stops: [
                0.01,
                0.3,
                0.4,
              ],
              colors: [
                Color(0xff2DBA61),
                Colors.yellow,
                Colors.white,
              ],
            ),
          ),
        ),
      ],
    ),
  ),
),

here is the result

Thank you. any kind of help will be appreciated!

Answer 1

Just wrap your Scaffold inside a DecoratedBox or a Container and set its backgroundColor property to Colors.transparent.

Code sample

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DecoratedBox(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.center,
          stops: [0.01, 0.3, 0.4],
          colors: [
            Color(0xff2DBA61),
            Colors.yellow,
            Colors.white,
          ],
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          elevation: 0,
          backgroundColor: Colors.transparent,
          leading: const BackButton(color: Colors.black),
        ),
      ),
    );
  }
}

Result

Try the full example on DartPad