Home > database >  How to solve the leading overflow problem in ListTile?
How to solve the leading overflow problem in ListTile?

Time:01-27

I'm having leading overflow issues with ListTile:

Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget (see https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4)

'package:flutter/src/material/list_tile.dart':

package:flutter/…/material/list_tile.dart:1

Failed assertion: line 1204 pos 7: 'tileWidth != leadingSize.width || tileWidth == 0.0'

How can I solve it?

I referred to enter image description here

CodePudding user response:

It is because the way ListTile is constrained.

The heights of the leading and trailing widgets are constrained according to the Material spec. An exception is made for one-line ListTiles for accessibility. Note that leading and trailing widgets can expand as far as they wish horizontally, so ensure that they are properly constrained.

In your code the you are making CircleAvatar of 17.5 radius, so its diameter would be 35 which would probably greater than ListTile constrained height of leading.

So try wrapping in SizedBox of desired height, to overcome the error.


Edit: After you requested the code I figured out that the radius is not causing the issue, issue is actually cause because you are specifying both the radius and maxRadius or minRadius.

Flutter compiler gets confused either to use radius or to use max min Radius properties. So the following error is thrown.

radius == null || (minRadius == null && maxRadius == null)': is not true.

So you need to either specify radius or minRadius and maxRadius

Change your code either to

  leading: CircleAvatar(
        // radius: 17.5,            
  • Related