Search code examples
flutterdartflutter-layoutgradient

How to have two gradients side by side in flutter


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

enter image description here

What I want is

enter image description here


Solution

  • 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: [
                       
                      ],
                    ),
                  )
                ],
              );
            },
          ),
        );