I want to have two linear gradients side by side without putting them inside a different Container() each

My code:

      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              // Instead of two different colors here I want to have the two other Linear gradients
              // with each having two other different colors that go from top to bottom
              Color(0xff5a0dbe),
              Color(0xff004773),
            ],
            stops: [0.5, 0.5],
            tileMode: TileMode.clamp,
          ),
        ),
        child: const Center(
            child: Text(
          "sds",
          style: TextStyle(color: Colors.white),
        )),
      ),

What I got is

What I want is

CodePudding user response：

You can just use a Column to place the widgets as you described on comment, no need to worry about positioning widget. Using Stack with two Container

 return Scaffold(
      body: LayoutBuilder(
        //for future purpose if needed
        builder: (context, constraints) {
          return Stack(
            alignment: Alignment.topCenter, // defult topLeft
            children: [
              Row(
                children: [
                  Expanded(
                    child: Container(
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color(0xff5a0dbe),
                            Color(0xff004773),
                          ],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          // stops: [0.5, 0.5],
                          // tileMode: TileMode.clamp,
                        ),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      decoration: const BoxDecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color(0xff00436D),
                            Color(0xff031420),
                          ],
                          // stops: [0.5, 0.5],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter,
                          // tileMode: TileMode.clamp,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                // dont need it, 
                width: constraints.maxWidth,
                height: constraints.maxHeight,
                child: Column(
                  // do everything on column
                  children: [
                   
                  ],
                ),
              )
            ],
          );
        },
      ),
    );