Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make this type of expansion tile in flutter

Tags:

flutter

dart

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

like image 601
Mishal Haneef Avatar asked Oct 22 '25 07:10

Mishal Haneef


1 Answers

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

like image 166
Ravindra S. Patil Avatar answered Oct 24 '25 21:10

Ravindra S. Patil



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!