How to center the Title of a ListTile in Flutter

Question

I have been trying again today to center the title of a Flutter ListTile. Over the past few days I have spent an hour or two Googling and trying things then loosing my cool and giving up.

I am just learning Flutter and love the concept but can find no video training courses (Lynda.com, uDemy.com etc). I have read through the relevant documentation but cannot get rid of all the red lines that appear when I try to apply them to my code.

There must be logic in the syntax but after 2 weeks I have not worked it out yet.

Back to the problem, I have tried

List<Widget> list = <Widget>[
  new ListTile(
    new child: Center (
      title:
          new Text('Title 1',
            style: new TextStyle(
                fontWeight: FontWeight.w500,
                color: Colors.deepOrangeAccent,
                fontSize: 25.0)),
    )
  ),
];


List<Widget> list = <Widget>[
  new ListTile(
    title:
            new child: Center (
          new Text('Title 2',
            style: new TextStyle(
                fontWeight: FontWeight.w500,
                color: Colors.deepOrangeAccent,
                fontSize: 25.0)),
    )
  ),
];


List<Widget> list = <Widget>[
  new ListTile(
    child: Center 
            title: (
                new Text('Title 3',
                    style: new TextStyle(
                            fontWeight: FontWeight.w500,
                            color: Colors.deepOrangeAccent,
                fontSize: 25.0)),
    )
  ),
];


List<Widget> list = <Widget>[
  new ListTile(
        title: Center
                new Text('Title 4',
                    style: new TextStyle(
                            fontWeight: FontWeight.w500,
                            color: Colors.deepOrangeAccent,
                            fontSize: 25.0)),
    )
  ),
];

Please help me with this problem and also where to find a video course on Flutter?

On the upside, if this continues I will no longer be grey, I will be bald instead.

I thought I worked it out when I added 'textAlign: TextAlign.center,' to the text object. There were no red lines but the text was still left aligned.

Answer 1

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.

Using Center widget:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("ListTile Example"),),
      body: new ListView(
        children: new List.generate(7, (int index) {
          return new ListTile(
            title: new Center(child: new Text("Centered Title#$index",
              style: new TextStyle(
                  fontWeight: FontWeight.w500, fontSize: 25.0),)),
            subtitle: new Text("My title is centered"),
          );
        }),
      ),
    );
  }

Using Row widget:

 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("ListTile Example"),),
      body: new ListView(
        children: new List.generate(7, (int index) {
          return new ListTile(
            title: new Row(children: <Widget>[new Text("Centered Title#$index",
              style: new TextStyle(
                  fontWeight: FontWeight.w500, fontSize: 25.0),)
            ], mainAxisAlignment: MainAxisAlignment.center,),
            subtitle: new Text("My title is centered"),
          );
        }),
      ),
    );
  }

However, your problem is not about centering the title, it is about you are trying to insert too big of a Text inside a small area, that is why you are getting the red lines, so one solution is choose a smaller fontSize, a better solution is to get rid of ListTile and build your own custom widget, since a ListTile is

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

So it should not be used if you are using bigger widgets.

This is simple example of how to create a custom widget that resembles ListTile, but is more flexible and customizable when dealing with larger items:

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("ListTile Example"),),
        body: new ListView(
          children: new List.generate(7, (int index) {
            return new Container(
              padding: const EdgeInsets.symmetric(
                  vertical: 10.0, horizontal: 20.0),
              child: new Column(
                children: <Widget>[
                  new Align (child: new Text("Centered Title $index",
                    style: new TextStyle(fontSize: 40.0),), //so big text
                    alignment: FractionalOffset.topLeft,),
                  new Divider(color: Colors.blue,),
                  new Align (child: new Text("Subtitle $index"),
                    alignment: FractionalOffset.topLeft,),
                  new Divider(color: Colors.blue,),
                  new Align (child: new Text("More stuff $index"),
                    alignment: FractionalOffset.topLeft,),
                  new Row(mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[ //add some actions, icons...etc
                      new FlatButton(onPressed: () {}, child: new Text("EDIT")), 
                      new FlatButton(onPressed: () {},
                          child: new Text("DELETE",
                            style: new TextStyle(color: Colors.redAccent),))
                    ],),
                ],
              ),
            );
          }),
        )
    );
  }