Leading of list tile limitation

Question

I want to achieve a large circle avatar for leading using widget card in list tile properties. but I when i keep on expanding the radius, the circle avatar not become big size instead it keeps be at left, can suggest me any widget that allow me to make a big circle on leading?

I already wrap with sizedbox and elevatedbutton method but same thing happened.

 return Card(
     // elevation: 0,
      child: ListTile(
        dense: true, 
        visualDensity: VisualDensity(vertical: 4, horizontal: 4),
        leading: CircleAvatar(
          backgroundColor: const Color.fromARGB(255, 3, 80, 144),
          radius: 60,
          child: Icon(widget.leading, color: Colors.white, size: 30),
        ),

user_10157127 · Answer

You can get <=64 height on this case and can get 30px icon size will work fine. So when you keep increasing the size, it is aligning from left and shifting to the right.

It is better to create custom ListTile with rows and column for this case.

You can check this TileHeight method. This one provides the height.

 double get _defaultTileHeight {
    final bool hasSubtitle = subtitle != null;
    final bool isTwoLine = !isThreeLine && hasSubtitle;
    final bool isOneLine = !isThreeLine && !hasSubtitle;

    final Offset baseDensity = visualDensity.baseSizeAdjustment;
    if (isOneLine)
      return (isDense ? 48.0 : 56.0) + baseDensity.dy;
    if (isTwoLine)
      return (isDense ? 64.0 : 72.0) + baseDensity.dy;
    return (isDense ? 76.0 : 88.0) + baseDensity.dy;
  }

  @override
  double computeMinIntrinsicHeight(double width) {
    return math.max(
      _defaultTileHeight,
      title!.getMinIntrinsicHeight(width) + (subtitle?.getMinIntrinsicHeight(width) ?? 0.0),
    );
  }

You can try this

child: ListView.builder(
    itemCount: 33,
    itemBuilder: (context, index) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius:
              BorderRadius.circular(defaultBorderRadiusCircular),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: 20,
            ),
            Expanded(
              child: Container(
                padding: EdgeInsets.all(8.0),
                decoration: BoxDecoration(
                    color: Colors.cyanAccent,
                    borderRadius: BorderRadius.only(
                      bottomRight:
                          Radius.circular(defaultBorderRadiusCircular),
                      topRight:
                          Radius.circular(defaultBorderRadiusCircular),
                    )),
                child: Row(
                  children: [
                    Expanded(
                      child: Text(
                        "I managed to create the layout above (2 ListTile's). But as you can see, when the title property contains a large text as it is doing in the first (the green) tile, the height of the leading widget is not following as it should. The below code returns a ListTile given a Label which is a class of my own that simply contains text, textcolor and backgroundcolor.",
                        softWrap: true,
                        maxLines: 13,
                        style: TextStyle(),
                      ),
                    ),
                    Icon(Icons.menu),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    ),
  ),
),

Leading of list tile limitation

1 Answers