CODEWITHSUNDEEP
flutter
Michael Amir
Michael Amir

Reputation: 255

Flutter : Applying One Gradient For Full Background

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?

Upvotes: 6

Views: 11570

Answers (1)

Simran Singh
Simran Singh

Reputation: 2899

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

Upvotes: 19

Related Questions