ListTile Background Overflow Problem in ListView

30 Views Asked by At

I've the same problem like the one shown here: example1 or here: example2

Although mine is a bit different. The design I use has border radius: the design I got

Hence if I apply Card or Material widget to ListTile, it won't be rounded anymore: result of my code

As you can see, even if I apply Colors.transparent.withOpacity(0) or trying to clip it with BorderRadius, it actually does 'clip it' although it will use the layer's color behind it but not dynamically. If the layer behind it changes because of movement, the colour won't be changed after rendered once.

What I'm looking for here, is a way to clip it.

Here's a code sample of the ListBuilder:

ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            padding:
                const EdgeInsets.only(top: 0.0, left: 0, right: 0, bottom: 0),
            itemCount: notifications[differentDays].length,
            itemBuilder: (context, index) {
              return Dismissible(
                resizeDuration: const Duration(milliseconds: 500),
                key: UniqueKey(),
                onResize: () {
                  //Some code
                    setState(() {});
                  }
                  debugPrint('resized');
                },
                onDismissed: (direction) {},
                direction: DismissDirection.endToStart,
                background: Material(
                  clipBehavior: Clip.antiAlias,
                  color: Colors
                      .transparent,
                  child: Container(
                    margin: const EdgeInsets.symmetric(vertical: 8),
                    child: Padding(
                      padding: const EdgeInsets.only(
                          right: 0.0, left: 32, top: 0, bottom: 0),
                      child: Ink(
                        decoration: BoxDecoration(
                          color: globals.ColorPalette.Secondary,
                          borderRadius: const BorderRadius.all(
                            Radius.circular(12),
                          ),
                        ),
                        child: Align(
                          alignment: Alignment.centerRight,
                          child: Padding(
                            padding: const EdgeInsets.only(right: 20.0),
                            child: Image.asset(
                              'assets/images/trash.png',
                              height: 33,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(left: 32.0, bottom: 4, top: 4),
                  //Here's the added Card. Without this line, the rounded corner issue is gone, however the initial 'ListTile Background Overflow Problem in ListView' problem will occur 
                  child: Card( 
                    elevation: 0,
                    margin: const EdgeInsets.all(0),
                    child: ListTile(
                      minVerticalPadding: 0,
                      tileColor: globals.ColorPalette.Secondary,
                      shape: ShapeBorder.lerp(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(12),
                        ),
                        1,
                      ),
                      style: ListTileStyle.list,
                      title: notifications[differentDays][index],
                      contentPadding: const EdgeInsets.only(
                          left: 0.0, right: 0, top: 0, bottom: 0),
                    ),
                  ),
                ),
              );
            },
          ),

I've tried the mentioned two option, although I ended up with different problems each time.

0

There are 0 best solutions below