How to Center the Title of a ListTile In 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. so in this article, we will go through how to center the Title of a ListTile in Flutter ??

Are you ready for the same? Let’s get started.

What is ListTile In Flutter ??

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

How to Center the Title of a ListTile In Flutter ??

Using Center Widget like a below:

@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"),
         );
       }),
     ),
   );
 }

This is a simple example of how to create a custom widget that resembles ListTile but is more flexible and customizable when dealing with larger items. The code snippet will look like the below:

@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),))
                    ],),
                ],
              ),
            );
          }),
        )
    );
  }

Output:

We will get output like the below:

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, We have been through How to center the Title of a ListTile In Flutter ??

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.