Home > Back-end >  Trying to build a layout with stacking widgets
Trying to build a layout with stacking widgets

Time:12-15

Trying to get a similar layout with this

enter image description here

Also with this, I am using the ExpansionTile to try and recreate it with a scrollable list. For the children of it, is it possible to use a ListView to make it scrollable? Here's my code for the container.

Here's my attempt but I keep getting overflowed RenderBox errors

Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(
                          color: active.withOpacity(.4), width: .5),
                      boxShadow: [
                        BoxShadow(
                            offset: Offset(0, 6),
                            color: lightGrey.withOpacity(.1),
                            blurRadius: 12)
                      ],
                      borderRadius: BorderRadius.circular(8),
                    ),
                    width: _width - _width / 1.3,
                    height: _height / 2,
                    margin: const EdgeInsets.all(10.0),
                    child: Material(
                      child: ExpansionTile(
                        title: Text('Details'),
                        children: [
                          ListView(
                            itemExtent: 70,
                            padding: const EdgeInsets.all(8),
                            children: [
                              Row(
                                children: [
                                  CustomText(text: "Status :\nComplete"),
                                ],
                              ),
                              Row(
                                children: [
                                  CustomText(text: "Status :\nComplete"),
                                ],
                              ),
                              Row(
                                children: [
                                  CustomText(text: "Status :\nComplete"),
                                ],
                              ),
                              Row(
                                children: [
                                  CustomText(text: "Status :\nComplete"),
                                ],
                              ),
                                                                              
                              )
                            ],
                          ),
                        ],
                      ),
                    ))

CodePudding user response:

Use shrinkWrap: true, in ListView

 ListView(
         shrinkWrap: true,
         itemExtent: 70,

CodePudding user response:

--> Try This Code

 Container(
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                  color: Colors.blue.withOpacity(.4), width: .5),
              boxShadow: [
                BoxShadow(
                    offset: Offset(0, 6),
                    color: Colors.red.withOpacity(.1),
                    blurRadius: 12)
              ],
              borderRadius: BorderRadius.circular(8),
            ),
            margin: const EdgeInsets.all(10.0),
            child: Material(
              child: ExpansionTile(
                title: Text('Details'),
                children: [
                  ListView(
                    shrinkWrap: true,
    
                      padding: const EdgeInsets.all(8),
                      children: [
                  Row(
                  children: const [
                  Text( "Status :\nComplete"),
                ],
              ),
    
              Row(
                children: const [
                  Text( "Status :\nComplete"),
                ],
              ),
                        Row(
                          children: const [
                            Text( "Status :\nComplete"),
                          ],
                        ),
    
    
            ],
          ),
          ],
        ),
        )),
  • Related