Flutter listtile leading image size

by

Flutter ListTile Leading Image Size

In Flutter, the size of the leading image in ListTile can be adjusted using the Container widget and its properties. The leading image is typically displayed on the left-hand side of the ListTile.

Here’s an example demonstrating how to adjust the size of the leading image in ListTile: 

    
      ListTile(
        leading: Container(
          width: 40, // adjust the width as per your requirement
          height: 40, // adjust the height as per your requirement
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              fit: BoxFit.cover,
              image: NetworkImage('https://example.com/my-image.jpg'), // replace with your own image URL
            ),
          ),
        ),
        title: Text('ListTile Title'),
        subtitle: Text('ListTile Subtitle'),
        onTap: () {
          // handle tap event
        },
      )

In the example above, the leading image is wrapped inside a Container widget, allowing us to specify the desired width and height. The shape: BoxShape.circle property is used to achieve a circular shape for the image. The fit: BoxFit.cover property ensures that the image covers the entire container. Replace the URL inside the NetworkImage widget with your own image URL.

Leave a comment