CODEWITHSUNDEEP
flutterdart
Mishal Haneef
Mishal Haneef

Reputation: 43

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

Upvotes: 4

Views: 956

Answers (2)

Ahmed Iqbal teli
Ahmed Iqbal teli

Reputation: 35

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

Upvotes: 0

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14775

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

Upvotes: 4

Related Questions