How to use two colours (wave gradient) as background in Flutter

Question

I am trying to make a background like this picture.

Answer 1

you can make stack as your Root Widget, Now in the children put a container with background Color as your first child in stack.

The second child should be Container with clipPath Widget, you can use flutter_custom_clippers to make it easier to get the shape you want

The code :

  Widget build(BuildContext context) {
return Scaffold(
  body: Stack(
    children: [
      //! backgroun
      Container(
        color: Colors.amber,
      ),
      //! clipPath
      Align(
        alignment: Alignment.bottomCenter,
        child: ClipPath(
          clipper: WaveClipperTwo(reverse: true),
          child: Container(
            height: 320,
            color: Colors.blue,
          ),
        ),
      ),
     // reset of your code
    ],
  ),
);
}

Answer 2

I achieved it using Stack and Column with Row.

Code:

{
body: Stack(
        children: [
          Row(
            children: [
              Expanded(
                child: Container(
                  height: double.infinity,
                  width: 200,
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(205),
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  height: double.infinity,
                  width: 200,
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(205),
                    ),
                    color: Colors.green,
                  ),
                ),
              ),
            ],
          ),
          Column(
            children: [
              Expanded(
                child: Container(
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomRight: Radius.circular(205),
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(205),
                    ),
                    color: Colors.green,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
}

Result Image