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

How to make this type of expansion tile in flutter

here is the example image of i need

Example Image

and here is the code i tried

Padding(
      padding: const EdgeInsets.only(right: 30, left: 30, bottom: 20),
      child: Container(
        decoration: boxDecoration,
        child: const ExpansionTile(
          collapsedIconColor: Colors.white,
          iconColor: Colors.white,
          tilePadding: EdgeInsets.only(left: 5, right: 20, top: 5, bottom: 5),
          leading: NotifyIcon(
            size: 20,
          ),
          title: Text('Title'),
          subtitle: Text('09:15 AM'),
        ),
      ),
    );

here is the output i get

My Output

but there is no option to add a text above the title in expansion tile. like the example image i given. how do i achieve that?

trying to get accurate output from an example image, i tried to code and all those code and output given in this question

Tags:

2

Answers


  1. 0

    Try below code hope its helpful to you. Just change my Icon to your icon and other data also on your need apply your box decoration instead on my

    Padding(
  padding: const EdgeInsets.only(right: 30, left: 30, bottom: 20),
  child: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20),
      border: Border.all(color: Colors.grey),
    ),
    child: ExpansionTile(
      collapsedIconColor: Colors.white,
      iconColor: Colors.white,
      tilePadding: EdgeInsets.only(left: 5, right: 20, top: 5, bottom: 5),
      leading: Icon(Icons.edit),
      title: Text(
        'Quick Reminder',
        style: TextStyle(
          fontSize: 12,
        ),
      ),
      subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            height: 5,
          ),
          Text(
            'Push The Code on Main Branch',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(
            height: 5,
          ),
          Text(
            '10/02/22',
            style: TextStyle(
              fontSize: 12,
            ),
          )
        ],
      ),
    ),
  ),
),

    Result-> image

    Login or Signup to reply.
  2. 0

    solution 1: use column widget in subtitle property instead of Text widget
    Solution 2 : use ListTile widget instead of ExpansionTile in LIstTile widget has isThreeLine proprty simpley enable this

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search