How to have multiple background colors in a scaffold?

Question

I want to have a background with alternating colors of brown and white like this

I am currently using containers to set the alternating colors but this would require me to use Stacks a lot as the design I'm working with has a lot of images placed such that they are in between the two different colored containers.

Is there any way to work around this?

class AppScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.only(top: 20),
        child: ListView(
          shrinkWrap: true,
          children: [
            Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Stack(
                    clipBehavior: Clip.none,
                    children: [
                      Container(
                        height: screenSize.height*0.75,
                        padding: EdgeInsets.all(50),
                        color: kPrimaryLight,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Column(
                            children: [
                                ConstrainedBox(
                                    constraints:
                                    BoxConstraints(maxWidth: screenSize.width * 0.15),
                                    child: AutoSizeText(
                                      'BUYERS',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontFamily: 'PlayfairDisplay',
                                          fontWeight: FontWeight.bold,
                                          fontSize: 40,
                                          color: kPrimaryDark),
                                    )),
                                SizedBox(height: 30,),
                                ConstrainedBox(
                                    constraints:
                                    BoxConstraints(maxWidth: screenSize.width * 0.25),
                                    child: AutoSizeText(
                                      'With our comprehensive explore page, find all the food you love here',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontFamily: 'PlayfairDisplay',
                                          fontSize: 30,
                                          color: kBlack),
                                    )),
                              ],
                            ),
                          ],
                        ),
                      ),
                      Positioned(
                          left: screenSize.width*0.2,
                          bottom: -(screenSize.height*0.05),
                          child: Image.asset('assets/phone1.png'))
                    ],
                  ),
                  Stack(
                    clipBehavior: Clip.none,
                    children: [
                      Container(
                          height: screenSize.height*0.75,
                          padding: EdgeInsets.all(50),
                          child: Row(
                            //mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Column(
                                children: [
                                  SizedBox(height: 60,),
                                  ConstrainedBox(
                                      constraints:
                                      BoxConstraints(maxWidth: screenSize.width * 0.15),
                                      child: AutoSizeText(
                                        'SELLERS',
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                            fontFamily: 'PlayfairDisplay',
                                            fontWeight: FontWeight.bold,
                                            fontSize: 40,
                                            color: kPrimaryDark),
                                      )),
                                  ConstrainedBox(
                                      constraints:
                                      BoxConstraints(maxWidth: screenSize.width * 0.25),
                                      child: AutoSizeText(
                                        'With our seamless and easy-to-use business tools, focus on the things you love the most while we take care of the rest. ',
                                        textAlign: TextAlign.center,
                                        style: TextStyle(
                                            fontFamily: 'PlayfairDisplay',
                                            fontSize: 30,
                                            color: kBlack),
                                      )),
                                ],
                              )
                            ],
                          )
                      ),
                      Positioned(
                          right: screenSize.width*0.2,
                          top: -(screenSize.height*0.1),
                          child: Image.asset('assets/phone1.png'))
                    ],
                  )
                ],
              ),
            ),
            Footer()
          ],
        ),
      ),
    );
  }
}

Answer 1

Use LinearGradient:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Multiple background scaffold')),
      body: Container(
        height: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.white, Colors.brown],
            stops: [0.5, 0.5],
          ),
        ),
        child: Container(), // your body content.
      ),
    );
  }