CODEWITHSUNDEEP
dartflutter
flutter
flutter

Reputation: 6776

How to align sub-headings in the Expansion Tile in a Drawer?

I've an ExpansionTile in a ListView in a Drawer ..I want the sub headings to align directly under its main heading the following gif shows current state..

Drawer: Want Subheading directly under Item0 

Scaffold(
  appBar: AppBar(title: Text(title)),
  body: Center(child: Text('My Page!')),
  drawer: Drawer(
    // Add a ListView to the drawer. This ensures the user can scroll
    // through the options in the Drawer if there isn't enough vertical
    // space to fit everything.
    child: ListView(
      // Important: Remove any padding from the ListView.
      // padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          child: Text('Drawer Header'),
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
        ),
        ExpansionTile(
          title: Text('Item0'),
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('subHeading1'),
            ),
            Text('subheading2')
          ],
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            // Update the state of the app
            // ...
            // Then close the drawer
            Navigator.pop(context);
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            // Update the state of the app
            // ...
            // Then close the drawer
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
);

Upvotes: 4

Views: 5831

Answers (3)

Parvez Ahmed
Parvez Ahmed

Reputation: 57

     ExpansionTile(
                 title:const Text('Subscriber Information'),
                collapsedBackgroundColor:
Colors.green.withOpacity(0.20),
                 backgroundColor: Colors.green.withOpacity(0.10) ,
                 onExpansionChanged: (bool change){},
                 childrenPadding:const EdgeInsets.all(16),
expandedCrossAxisAlignment: CrossAxisAlignment.start,
                 expandedAlignment: Alignment.topLeft,
                 children: [
                   Text('Ticket Id ${controller.ticketData.trackingInfo}'),
                   Text('Ticket Id ${controller.ticketData.trackingInfo}'),
                   Text('Ticket Id ${controller.ticketData.trackingInfo}'),
                   Text('Ticket Id ${controller.ticketData.trackingInfo}'),
                 ],
               ),

Upvotes: 4

javachipper
javachipper

Reputation: 537

You can have the padding and the alignment with a container:

 ExpansionTile(
      title: Text('Item0'),
      children: <Widget>[
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          alignment: Alignment.topLeft,
          child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text('subHeading1'),
                Text('subHeading2')
              ],
          ),
        ),
      ],
    ),

Upvotes: 1

anmol.majhail
anmol.majhail

Reputation: 51226

This Should Solve this :

    ExpansionTile(
      title: Text('Item0'),
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Align(
            alignment: Alignment.topLeft,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Text('subHeading1'),
                Text('subHeading2')
              ],
            ),
          ),
        ),
      ],
    ),

Upvotes: 15

Related Questions