Flutter - How to add border to ListTile

In flutter, ListTile is a very useful widget, ListTile is a UI element that displays related information. We can use ListTile to show a list of to-do items, emails, navigation options, and more. You can also receive the click event by tapping the ListTile.

Syntax :

ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
              trailing: Icon(Icons.more_vert),
            ),

We can add or customize borders using shape properties, we can use various shape types like RoundedRectangleBorder, StadiumBorder, and BeveledRectangleBorder.Let's take examples one by one

Example: Using RoundedRectangleBorder

 ListTile(
              shape: RoundedRectangleBorder(
                side: BorderSide(width: 2),
                borderRadius: BorderRadius.circular(20),
              ),
              leading: Icon(Icons.map),
              title: Text('Errorgram'),
              trailing: Icon(Icons.more_vert),
            ),

Example: Using StadiumBorder

ListTile(
              shape: StadiumBorder(
                side: BorderSide(width: 1)),
              leading: Icon(Icons.account_circle_rounded),
              title: Text('StadiumBorder'),
            ),

Example: Using BeveledRectangleBorder

 ListTile(
              shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.circular(10),
                side: BorderSide(width: 1),),
              leading: Icon(Icons.add_circle_outline),
              title: Text('BeveledRectangleBorder'),
            ),

Full Example

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Errorgram",style:TextStyle(color:Colors.black),),//Change color here
      ),
      body: Container(
        margin: EdgeInsets.only(left: 10,right: 10),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            ListTile(
              shape: RoundedRectangleBorder(
                side: BorderSide(width: 2),
                borderRadius: BorderRadius.circular(20),
              ),
              leading: Icon(Icons.map),
              title: Text('RoundedRectangleBorder'),
              trailing: Icon(Icons.more_vert),
            ),
            SizedBox(height: 10,),
            ListTile(
              shape: StadiumBorder(
                side: BorderSide(width: 1)),
              leading: Icon(Icons.account_circle_rounded),
              title: Text('StadiumBorder'),
            ),
            SizedBox(height: 10,),
            ListTile(
              shape: BeveledRectangleBorder(
                borderRadius: BorderRadius.circular(10),
                side: BorderSide(width: 1),),
              leading: Icon(Icons.add_circle_outline),
              title: Text('BeveledRectangleBorder'),
            ),
          ],
        ),
      ),

    );
  }
}

I hope you like this article and it will be help to you.

 

Tags: