如何在 flutter 上连接 Container 与框阴影之间的空间？

Question

I had a problem with my project, i'm trying make container with box shadow on bottom. below that container i want make to new container but they are some separate space between container, i think its because box shadow. so the question is how to make they connect ith no space but the shadow still visible. pic

here my code:

    return Scaffold(
      body: SafeArea(
        child: Container(
          child: ListView(
            physics: BouncingScrollPhysics(),
            children: <Widget>[
              Container(
                child: Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.zero,
                      topRight: Radius.zero,
                    ),
                    child: Container(
                      height: 70.0,
                      margin: const EdgeInsets.only(
                          bottom: 6.0), //Same as `blurRadius` i guess
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(5.5),
                          bottomRight: Radius.circular(5.5),
                          topLeft: Radius.zero,
                          topRight: Radius.zero,
                        ),
                        color: kDarkGreenColor,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey,
                            offset: Offset(0.0, 1.0), //(x,y)
                            blurRadius: 6.0,
                          ),
                        ],
                      ),
                      child: ListView.builder(
                          padding: EdgeInsets.only(left: 10, right: 5),
                          itemCount: planticos.length,
                          physics: BouncingScrollPhysics(),
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index) {
                            return Container(
                              margin: EdgeInsets.only(right: 15, bottom: 6),
                              height: 40,
                              width: 70,
                              decoration: BoxDecoration(
                                color: kMainColor.withOpacity(0),
                                image: DecorationImage(
                                  image: AssetImage(planticos[index].image),
                                ),
                              ),
                            );
                          }),
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 0),
                height: 200,
                color: kMainColor,
              ),
            ],
          ),
        ),
      ),
    );
}

Answer 1

use stack .

2nd Container will be visible over 1st Container . for example...

    Stack(
        children: <Widget>[
          Container(
            height: 400,
            decoration: BoxDecoration(
              color: Colors.green,
            ),
          ),
          Container(
            height: 200,
            decoration: BoxDecoration(
              color: Colors.green,
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  offset: Offset(0.0, 1.0), //(x,y)
                  blurRadius: 6.0,
                ),
              ],
            ),
          ),
        ],
      ),

Answer 2

You should use the stack widget, see this example:

Stack(
  children:[
    Container() //which you wanna be under the shadow.
    Container() //which you wanna make it's shadow visible.
  ]
)

Tip: Use Positioned() under the stack to specify the position of containers.