How do I add a gradient as a background to the body of my flutter web app?

Question

This is what I tried:

body: Container(
          height: MediaQuery.of(context).size.height,
         width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
            gradient:
            LinearGradient(colors: [Color(0xFFc2e59c), Color(0xFF64b3f4)]),
          )

I tried without specifying width and height too but the end result is always a gradient that won't fill the body entirely -

Answer 1

Try wrapping the code in Scaffold. Here is the snippet:

 Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          gradient:
          LinearGradient(colors: [Color(0xFFc2e59c), Color(0xFF64b3f4)]),
        )
      ),
   }

Answer 2

Code Snippet:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [
                Color(0xFFF6A064),
                Color(0xFFF24223),
                Color(0xFFEA7A6C),
                Color(0xFF27823),
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.0, 0.3, 0.6, 1.0],
              tileMode: TileMode.clamp),
        ),
        child: Center(
          child: Text(
           'Hello',
            style: TextStyle(fontSize: 29),
          ),
        ),
      ),
    );
  }

Image Output: