Question 75252 in Flutter Question posted in
The official Flutter documentation can be found here.

Make a custom listtile – Flutter

enter image description here

Hi! I want to make a flutter listTile or container that looks just like this image. The leading icon would be icons.location_on. The most important thing is that the leading icon’s position must be next to the title which is the top line. Also the subtitle which is right below to the title can be multiple lines. But the leading icon’s position is always next to the title. How can I make this flutter widget?

Tags:

2

Answers


  1. 0

    I have created this list tile for you it should solve your problem

     ListTile(
           contentPadding: EdgeInsets.all(10),
          shape: RoundedRectangleBorder(
            side:const BorderSide(color: Colors.black, width: 1),
            borderRadius: BorderRadius.circular(5),
          ),
            title:Row(
            children:const [
              Icon(Icons.location_on,size: 20,),
              SizedBox(width: 10,),
              Text("PLAN B",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold,color: Colors.black),),
            ],
          ) ,
          isThreeLine: true,
          subtitle:Row(
            children:const [
              SizedBox(width: 30,),
              Expanded(
                child: Text("At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis,",
                  style: TextStyle(fontSize: 16,fontWeight: FontWeight.w700),),
              ),
            ],
          ) ,
          trailing: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const Icon(Icons.close),
            ],
          ),
        ),

    here I have added the title into a row so that the leading icon will always stay with the title and if subtitle lines increase trailing icon will get placed to center accordingly as it is in the column at center also added expanded to subtitle in case overflow error comes overflow
    enter image description here

    Login or Signup to reply.
  2. 0

    I hope this will achieve your goal-

    Container(
  padding: EdgeInsets.symmetric(vertical: 7, horizontal: 10),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(15.r)
    color: Colors.white70,
    border: Border.all(width: 1, color: Colors.black54),
  ),
  child: ListTile(
    leading: Icon(Icons.location_on),
    title: Text('title', style: TextStyle(fontsize: 18),),
    subtitle: Text('subtitle', style: TextStyle(fontsize: 16),),
    trailing: Icon(Icons.close),
  ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search