如何在 flutter 中并排设置两个渐变

Question

我想并排放置两个线性渐变，而不是将它们分别放在不同的 Container() 中

我的代码：

      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),
        )),
      ),

我得到的是

我要的是

Answer 1

您只需使用 Column 即可按照您在评论中描述的方式放置小部件，无需担心定位小部件。使用 Stack 和两个 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: [
                   
                  ],
                ),
              )
            ],
          );
        },
      ),
    );