Hi I'm new to flutter and currently working for some project. Now I need to create a container with a child of Column consist of header text and body text.

I want the container to have default height of 300 so it will show only the header and maybe 3 lines of the body text and it will be able to expand to show the rest of the body text. After finished reading the remaining body text the user can collapse the container and make it small again

The problem is how can I achieve this ? is there any package that can help me to do it ? I find that animatedContainer might answers my problem but is there any better, like best option ?

Thanks

CodePudding user response：

you may try this ExpansionTile

A single-line ListTile with an expansion arrow icon that expands or collapses the tile to reveal or hide the children.

or ExpansionPanelList

A material expansion panel list that lays out its children and animates expansions.

CodePudding user response：

Try ExpansionTile.

https://api.flutter.dev/flutter/material/ExpansionTile-class.html

    import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    static const String _title = 'Flutter Code Sample';

    @override
    Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
    }
    }

    class MyStatefulWidget extends StatefulWidget {
    const MyStatefulWidget({Key? key}) : super(key: key);

    @override
    State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
    }

    class _MyStatefulWidgetState extends State<MyStatefulWidget> {
    bool _customTileExpanded = false;

    @override
    Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        const ExpansionTile(
          title: Text('ExpansionTile 1'),
          subtitle: Text('Trailing expansion arrow icon'),
          children: <Widget>[
            ListTile(title: Text('This is tile number 1')),
          ],
        ),
        ExpansionTile(
          title: const Text('ExpansionTile 2'),
          subtitle: const Text('Custom expansion arrow icon'),
          trailing: Icon(
            _customTileExpanded
                ? Icons.arrow_drop_down_circle
                : Icons.arrow_drop_down,
          ),
          children: const <Widget>[
            ListTile(title: Text('This is tile number 2')),
          ],
          onExpansionChanged: (bool expanded) {
            setState(() => _customTileExpanded = expanded);
          },
        ),
        const ExpansionTile(
          title: Text('ExpansionTile 3'),
          subtitle: Text('Leading expansion arrow icon'),
          controlAffinity: ListTileControlAffinity.leading,
          children: <Widget>[
            ListTile(title: Text('This is tile number 3')),
          ],
        ),
      ],
    );
    }
    }