CODEWITHSUNDEEP
flutterflutter-web
cmd_prompter
cmd_prompter

Reputation: 1680

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

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 -

enter image description here

Upvotes: 2

Views: 6831

Answers (2)

Nisha Jain
Nisha Jain

Reputation: 757

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:

Gradient Background

Upvotes: 3

ZPrime
ZPrime

Reputation: 403

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)]),
        )
      ),
   }

Upvotes: 5

Related Questions