Foundation

Collapsible

A collapsible widget that animates between visible and hidden states.

1class CollapsibleExample extends StatefulWidget {
2 @override
3 State<CollapsibleExample> createState() => _CollapsibleExampleState();
4}
5
6class _CollapsibleExampleState extends State<CollapsibleExample>
7 with SingleTickerProviderStateMixin {
8 late final _controller = AnimationController(
9 duration: const Duration(milliseconds: 300),
10 vsync: this,
11 );
12 late final _animation = CurvedAnimation(
13 parent: _controller,
14 curve: Curves.easeInOut,
15 );
16 bool _expanded = false;
17
18 @override
19 void dispose() {
20 _animation.dispose();
21 _controller.dispose();
22 super.dispose();
23 }
24
25 @override
26 Widget build(BuildContext _) => Column(
27 mainAxisSize: .min,
28 crossAxisAlignment: .start,
29 spacing: 16,
30 children: [
31 FButton(
32 onPress: () {
33 setState(() => _expanded = !_expanded);
34 _controller.toggle();
35 },
36 child: Text(_expanded ? 'Collapse' : 'Expand'),
37 ),
38 AnimatedBuilder(
39 animation: _animation,
40 builder: (context, child) => FCollapsible(
41 value: _animation.value,
42 child: FCard(
43 title: const Text('Lorem ipsum'),
44 child: const Text(
45 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem '
46 'accusantium doloremque laudantium, totam rem aperiam, eaque ipsa '
47 'quae ab illo inventore veritatis et quasi architecto beatae vitae '
48 'dicta sunt explicabo.',
49 ),
50 ),
51 ),
52 ),
53 ],
54 );
55}
56

Usage

FCollapsible(...)

1FCollapsible(
2 value: 0.5,
3 child: Placeholder(),
4)

On this page