Can you change the height of an ExpansionTile in Flutter?

Question

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

Currently, because the contents in the title<\/code> widget are large, I have a "Column overflowed by 23 pixels" message.

Or is there another Widget I could use that has the expansion\/accordion feature?

Answer 1

I would probably copy ExpansionTile and make your own version. Sizing ListTile is easy with a Container or SizedBox , but ExpansionTile is a material widget and it doesn't look like it was built with your use case in mind.

Answer 2

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 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.

Answer 4

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',),));
                    }
                    ),
                  )