CODEWITHSUNDEEP
flutterdart
Anna Kegley
Anna Kegley

Reputation: 59

How do I center an icon in the leading attribute of a list tile?

I am creating a Flutter app need to center the icon in the "leading" attribute of this list tile. I have already tried wrapping the icon in Center(), which centers it in the middle of the tile instead of the leading space. Here is my Dart code and screenshot:

Widget _contentListView() {
    return ListView.builder(
      itemCount: _listItems.length,
      itemBuilder: (context, index) => Card(
        child: ListTile(
          leading: _listItems[index].icon,
          title: Text(
            _listItems[index].title,
            style: TextStyle(fontSize: 18),
          ),
          subtitle:
              Text(_listItems[index].subtitle, style: TextStyle(fontSize: 16)),
          onTap: () {
            dataEdited(index);
          },
        ),
      ),
    );
  }

enter image description here

Upvotes: 1

Views: 3918

Answers (2)

Joe
Joe

Reputation: 1

Instead of @niceumang answer, you can do the following:

dense: true,
leading: Align(
  widthFactor: 1,
  alignment: Alignment.topCenter, 
  child: Icon(Icons.check_box_outline_blank_rounded),
),

Upvotes: 0

niceumang
niceumang

Reputation: 1432

    Widget _contentListView() {
        return ListView.builder(
          itemCount: _listItems.length,
          itemBuilder: (context, index) => Card(
            child: ListTile(
              leading: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       crossAxisAlignment: CrossAxisAlignment.center,
                       children: <Widget>[
                           _listItems[index].icon,
                       ],
               ),//add here
              title: Text(
                _listItems[index].title,
                style: TextStyle(fontSize: 18),
              ),
              subtitle:
                  Text(_listItems[index].subtitle, style: TextStyle(fontSize: 16)),
              onTap: () {
                dataEdited(index);
              },
            ),
          ),
        );
      }

Upvotes: 4

Related Questions