CODEWITHSUNDEEP
flutterdart
Sam
Sam

Reputation: 99

Is it possible to give gradient color to Scaffold background without wrapping it in a Container?

Can we give a gradient background to the Scaffold without wrapping it in a Container?

Widget build(BuildContext context) {
return Scaffold(

  //-----------------------------------
  //main background
  backgroundColor: Colors.blue[400],

  body: PageView.builder(
    controller: pageController,
    onPageChanged: (val) {
      setState(() {
        currentIndex = val;
      });

Upvotes: 3

Views: 4071

Answers (2)

Stefano Amorelli
Stefano Amorelli

Reputation: 4854

We could create a custom Scaffold class to get it done:

class CustomScaffold extends StatelessWidget {
  CustomScaffold(this.body, this.gradient); // and maybe other Scaffold properties

  final Widget body;
  final LineGradient gradient;

  @override
  Widget build(BuildContext context) {
      return Scaffold(
         body: Container(child: this.body, decoration: BoxDecoration(gradient: this.gradient)),
      );
  }
}

And use it like that:

Widget build(BuildContext context) {
   LinearGradient _gradient = LinearGradient(colors: [gradientStart, gradientEnd],
       begin: const FractionalOffset(0.5, 0.0),
       end: const FractionalOffset(0.0, 0.5),
       stops: [0.0,1.0],
       tileMode: TileMode.clamp
   );
   return CustomScaffold(
     gradient: _gradient,
     body: PageView.builder(
       controller: pageController,
       onPageChanged: (val) {
               setState(() {
                 currentIndex = val;
               });
            },
         ),
      );
}

Upvotes: 5

rgisi
rgisi

Reputation: 942

No, the Scaffold's background attribute only accepts one Color. If you want to display a color gradient, I think that should be considered part of the Scaffold's body by definition. ;-)

But it's really easy to do, e.g. using this tutorial.

Upvotes: 1

Related Questions