wrapping Scaffold with Container for gradient background, How to set gradient to container background in flutter?

Question

I'd like to wrap a Scaffold with a Container in order to get a gradient background that's also underneath the AppBar. Basically a full screen gradient background. However, my attempt doesn't do anything. Is there another way of doing it, where I can keep the AppBar functionality but have it on top of a gradient that spans the whole screen?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: MyHomePage(title: 'Test'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          stops: [0.1, 0.5, 0.7, 0.9],
          colors: [
            Colors.yellow[800],
            Colors.yellow[700],
            Colors.yellow[600],
            Colors.yellow[400],
          ],
        ),
      ),
      child: Scaffold(
        appBar: AppBar(
          title: Icon(Icons.menu),
          backgroundColor: Color(0x00000000),
          elevation: 0.0,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'dummy text',
              ),
              Text(
                '5',
                style: Theme.of(context).textTheme.display1,
              ),
              FloatingActionButton(
                backgroundColor: Colors.white,
                foregroundColor: Colors.black45,
                elevation: 0.0,
                onPressed: () {},
                tooltip: 'Play',
                child: Icon(Icons.play_arrow),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

add `scaffoldBackgroundColor: Colors.transparent` inside `ThemeData( ...` — pskink, Nov 21 '18 at 10:04

score 97 · Answer 1 · edited Aug 17 '21 at 16:04

You can also add a gradient to the AppBar like this,

new Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Awesome AppBar')),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [
                  const Color(0xFF3366FF),
                  const Color(0xFF00CCFF),
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(1.0, 0.0),
                stops: [0.0, 1.0],
                tileMode: TileMode.clamp),
          ),
        ),
        child: ...,
      ),
      body: ...,
    );

LinearGradient parameters:

colors: an array of the colors to be used in the gradient, in this case, two shades of blue.
begin, end: position of the first color and the last color, in this case,
FractionalOffset allows us to treat the coordinates as a range from 0 to 1 both for x and y. As we want an horizontal gradient, we use same Y for both measures, and the x changes from 0.0 (left) to 1.0 (right).
stops: this array should have the same size than colors. It defines how the colors will distribute. [0.0, 1.0] will fill it from left to right. [0.0, 0.5] will fill the colors from left to half bar, etc.
tileMode: what to do if the stops do not fill the whole area. In this case, we added clamp (it will reuse the last color used), but as our gradient goes from 0.0 to 1.0, it’s not really necessary.

You can also add a child to the Container. e.g: some logo image

    child: Align(
          alignment: Alignment.center,
          child: Image.asset(
            "images/logo.png",
            width: 128,
            height: 128,
          )),
    ),

Hope this helps.

score 46 · Accepted Answer · answered Nov 21 '18 at 09:36

46

In Your Code - Under Scaffold add - backgroundColor: Colors.transparent,

child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
        ..

answered Nov 21 '18 at 09:36

anmol.majhail

48,256
14
136
105

1

I missed the Scaffold backgroundColor, thanks a lot! – dan Nov 21 '18 at 10:39
1

@dan This is the correct answer. Could you mark is as correct. Thanks! – Sabin Bajracharya Feb 12 '19 at 10:09

score 20 · Answer 3 · edited Jul 18 '19 at 08:03

20

Simply add FlexibleSpace in AppBar and Decorate the container. Then the app bar is a gradient in the background.

appBar: AppBar(

      title: Text('Flutter Demo'),
      flexibleSpace: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: <Color>[
              Colors.red,
              Colors.blue
            ],
          ),
        ),
      ),
    ),

edited Jul 18 '19 at 08:03

Shayki Abramczyk

36,824
16
89
114

answered Jul 18 '19 at 07:44

Sumit Singh

1,150
13
17

2

Shayki Abramczyk,. Why you vote down, whats wrong in this answer – Sumit Singh Jul 19 '19 at 09:08
because your answer exactly the same as above – Jul 21 '19 at 06:44
2

Something is different in above answer, i am simply define how to use.. – Sumit Singh Jul 21 '19 at 09:06

Quick learner · Answer 4 · 2020-07-29T06:49:42.413

I used this piece of code to set background color as a gradient

return MaterialApp(
        home: Scaffold(
          body: Container(
            decoration: new BoxDecoration(
                gradient: new LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                    Color.fromARGB(255, 25,178,238),
                    Color.fromARGB(255, 21,236,229)
                  ],
                )),
            child: Align(
                alignment: Alignment.center,
                child: Image.asset(
                  "images/app_logo.png",
                  width: 128,
                  height: 128,
                )),
          ),
        ),
      );

score 3 · Answer 5 · answered Nov 02 '19 at 16:16

3

You simply use FlexibleSpace in the appbar

      appBar: AppBar(
      centerTitle: true,
      title: Text(widget.title),
      flexibleSpace: Container(
           decoration: BoxDecoration(
           gradient: LinearGradient(
           begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: <Color>[
              Colors.red,
              Colors.blue
            ])
           ),
          ),
         ),

answered Nov 02 '19 at 16:16

Shubham Narkhede

2,002
1
5
13

Exact copy of [this answer](https://stackoverflow.com/a/57089477/12483095) – iDecode Nov 12 '20 at 10:07

Karan Vakharia · Answer 6 · 2021-03-05T12:24:51.893

You can use directly below code for gradient color of any container or view

class HomePage extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dashboard"),
      ),
      body: Container(
         alignment: Alignment.center,
         decoration: BoxDecoration(
         gradient: LinearGradient(colors: [Colors.red, Colors.blue, Colors.black])
         )
       ),
    );
  }
}

score 0 · Answer 7 · answered May 17 '23 at 19:21

You don't need to set the color twice in the appBar and in the Container, just set the appBar like this and they will have the same color:

appBar: AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0, //this will make the shadow of the appBar disappear and show the exact color of the background you setted.
  //and here put the rest of the configurations you need for the appBar.
)

wrapping Scaffold with Container for gradient background, How to set gradient to container background in flutter?

7 Answers7