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

▲
23
▼

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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
flutter
dart
containers
gradient
asked on Stack Overflow Nov 21, 2018 by dan • edited Jul 29, 2020 by Quick learner

5 Answers

▲
19
▼

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

child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
        ..
answered on Stack Overflow Nov 21, 2018 by anmol.majhail
▲
16
▼

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

awesome app bar preview

new Scaffold(
      appBar: AppBar(
        title: Center(child: Text('Awesome AppBar')),
        flexibleSpace: Container(
          decoration: new BoxDecoration(
            gradient: new 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),
          ),
        ),
      ),
      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.

Hope this helps.

answered on Stack Overflow Feb 17, 2019 by tharindu_DG • edited Feb 17, 2019 by tharindu_DG
▲
5
▼

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
            ],
          ),
        ),
      ),
    ),
answered on Stack Overflow Jul 18, 2019 by developerSumit • edited Jul 18, 2019 by Shayki Abramczyk
▲
2
▼

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 on Stack Overflow Nov 2, 2019 by Shubham_Narkhede
▲
1
▼

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,
                )),
          ),
        ),
      );
answered on Stack Overflow Mar 7, 2020 by Quick learner • edited Jul 29, 2020 by Quick learner

User contributions licensed under CC BY-SA 3.0