Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ListTile Heading, Trailing are not Centered

Tags:

flutter

dart

So this seems basic but I can't figure it out. I have a ListTile that has a leading checkbox, a title, and a trailing icon. With the last Flutter update, the checkbox and icon are no longer centered for some reason. I want them centered vertically. I tried adding Center(), Align(), Expanded(), and Flexible() in various ways to the checkbox but it just pushes the title off the screen or does nothing.

Any tips? Any help is appreciated.

ListTile(         leading: Checkbox(           value: item.checked,           onChanged: (bool newValue) {             setState(() {               item.checked = newValue;             });             firestoreUtil.updateList(user, taskList);           },           activeColor: Theme.of(context).primaryColor,         ),         title: InkWell(             onTap: () {               editTask(item);             },             child: Text(               item.task,               style: TextStyle(fontSize: 18),             )),         trailing: ReorderableListener(           child: Container(               padding: EdgeInsets.only(right: 16),               child: Icon(Icons.drag_handle)),         ),         contentPadding: EdgeInsets.all(8),       ), 

Debug mode: screenshot of ListTile

like image 532
Jared Avatar asked Mar 14 '19 17:03

Jared


People also ask

How do you center a ListTile title?

Show activity on this post. I am not sure what have you tried, but you in order to center the title of the ListTile you can use a center widget like you did in your code, or wrap your text within a Row widget and set mainAxisAlignment: MainAxisAlignment. center .

How do you center a title in list tile flutter?

How to Center the Title of a ListTile In Flutter ? Center Widget is a widget that centers its child within itself or in other words we can say that it will wrap any widget to center to its parent widget.

Is a 3 Line a flutter?

By default, the ListTile in flutter can display only 2 lines. The Title and the SubTitle. In case there is a third line of text to be displayed, the isThreeLine is set to true and can allow another line to be present. The subtitle will be taking care of giving the 3rd line of text.


1 Answers

Use Column inside the leading, and set the MainAxisAlignment to center

  leading: Column(     mainAxisAlignment: MainAxisAlignment.center,     children: <Widget>[       Icon(leadingnIcon, color: Colors.blueGrey,),     ],    ), 
like image 164
Isaac Avatar answered Sep 19 '22 17:09

Isaac