Can you change the height of an ExpansionTile in Flutter?

Question

The ExpansionTile inherits from the ListTile, which has a fixed height. There are no input args for tile height.

I've tried wrapping the ExpansionTile in a Container widget with a hardcoded height, but that causes the children widgets to only take up the space within the hardcoded height. Currently, because the contents in the title widget are large, I have a "Column overflowed by 23 pixels" message.

Is there any way to change an Expansion Tile's height? Or is there another Widget I could use that has the expansion/accordion feature?

Answer 1

You might want to try this package : configurable_expansion_tile

Example app :

import 'package:flutter/material.dart';
import 'package:configurable_expansion_tile/configurable_expansion_tile.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Configurable Expansion Tile Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Configurable Expansion Tile Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ConfigurableExpansionTile(
              borderColorStart: Colors.blue,
              borderColorEnd: Colors.orange,
              animatedWidgetFollowingHeader: const Icon(
                Icons.expand_more,
                color: const Color(0xFF707070),
              ),
              headerExpanded:
                  Flexible(child: Center(child: Text("A Header Changed"))),
              header: Container(
                  color: Colors.transparent,
                  child: Center(child: Text("A Header"))),
              headerBackgroundColorStart: Colors.grey,
              expandedBackgroundColor: Colors.amber,
              headerBackgroundColorEnd: Colors.teal,
              children: [
                Row(
                  children: <Widget>[Text("CHILD 1")],
                ),
                Row(
                  children: <Widget>[Text("CHILD 2")],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

It should get you the results you wanted.

Hope it helps,

Thanks

Answer 2

wrap the 'ExpansionTile' inside a 'Container' and set the margin

Container(
                  margin: EdgeInsets.only(right: .5.sw),
                  decoration: BoxDecoration(
                      color: AppColor.profileBoarderColor,
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(color: AppColor.profileBoarderColor)
                  ),
                  child: ExpansionTile(
                    title: AppTextView(text: 'Seeson 01',),
                    children: List.generate(10, (index) {
                      return SizedBox(
                        width: 200,
                          child: ListTile(title: AppTextView(text: 'Seeson 01',),));
                    }
                    ),
                  )

Answer 3

This is a workaround: you can use title of the ExpansionTile widget to render the entire content instead of using leading or trailing. You can add padding to title widget to increase height of the ExpansionTile.