flutter - 如何在 flutter 中制作响应式容器

Question

我想让我的容器响应图像大小，但不知何故它不起作用。

下面是我制作的容器-:

Container(
              height: size.height * 0.7,
              width: size.width * 0.95,
              decoration: BoxDecoration(
                // borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10)),
                image: DecorationImage(
                  image: AssetImage('assets/vir.gif'),//widget.user.imgUrl),
                  fit: BoxFit.contain,
                ),
              ),
              child: Container(
                decoration: BoxDecoration(
                  // borderRadius: BorderRadius.circular(10),
                  boxShadow: [
                    BoxShadow(color: Colors.black12, spreadRadius: 0.5),
                  ],
                ),
              ),
            ),

在这里，如果图像的高度与容器的高度相同，则很好，但如果高度小于容器，则我能够看到我不想要的背景。

即使我在容器中添加了任何信息，高度仍然是固定的并且不会调整到内容。

下面是另一个例子-:

 Container(
              height: size.height * 0.2,
              width: size.width * 0.95,
              decoration: BoxDecoration(
                color: Colors.pink[100],
              ),
              child: Column(
                children: [

                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 15),
                    child: Wrap(
                        spacing: 10,
                        children: [

                          Chip(
                            elevation: 5,
                            label: Text('Height'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            deleteIcon: Icon(Icons.height),
                            // labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),

                          Chip(
                            elevation: 5,
                            label: Text('Active'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),

                          Chip(
                            elevation: 5,
                            label: Text('Start Sign'),
                            labelStyle: TextStyle(
                              color: Colors.white,
                              fontSize: 17,
                            ),
                            backgroundColor: Colors.pinkAccent,
                            labelPadding: EdgeInsets.symmetric(horizontal: 10),
                          ),


                        ]
                    ),
                  )



                ],
              ),
            ),

在这里，如果我添加或删除任何内容，那么我必须手动增加或减少大小。谁能帮我解决这个问题？

Answer 1

您无需提供高度或身份。容器适应 child 的大小。

Docs :

Otherwise, the widget has a child but no height, no width, noconstraints, and no alignment, and the Container passes theconstraints from the parent to the child and sizes itself to match thechild.

Flutter Widget of the week