Flutter : Applying One Gradient For Full Background

Question

How can i apply a gradient like here to the app background? Can you see the gradient moving down on that the app bar and the scaffold body just like they were one widget and not 2 widgets that each has his own color?

Answer 1

You need to use container as background to your scaffold to add a gradient. You can use Opacity widget as well to make container or any widget transparent. But here is the exact solution what you are looking for:

Scaffold(
  body: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    decoration: BoxDecoration(
      gradient: LinearGradient(
          colors: [Color(0xFF282a57), Colors.black],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter),
    ),
    child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.fromLTRB(20, 50, 20, 0),
          child: Container(
            child: Row(
              children: <Widget>[
                Icon(Icons.menu,color: Colors.white,),
                Spacer(),
                Text("Expense",style: TextStyle(color: Colors.white,fontSize: 18,)),
                Spacer(),
                Icon(Icons.clear, color: Colors.white,)
              ],
            ),
          ),
        ),
      ],
    ),
  )