Collapsible

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    spacing: 16,
29    children: [
30      FButton(
31        variant: .outline,
32        size: .sm,
33        mainAxisSize: .min,
34        onPress: () {
35          setState(() => _expanded = !_expanded);
36          _controller.toggle();
37        },
38        child: Text(_expanded ? 'Collapse' : 'Expand'),
39      ),
40      AnimatedBuilder(
41        animation: _animation,
42        builder: (context, child) => FCollapsible(
43          value: _animation.value,
44          child: FCard(
45            builder: (context, style, _) => Padding(
46              padding: style.padding,
47              child: Column(
48                mainAxisSize: .min,
49                crossAxisAlignment: .start,
50                children: [
51                  Text('Lorem ipsum', style: style.titleTextStyle),
52                  const SizedBox(height: 6),
53                  const Text(
54                    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem '
55                    'accusantium doloremque laudantium, totam rem aperiam, eaque ipsa '
56                    'quae ab illo inventore veritatis et quasi architecto beatae vitae '
57                    'dicta sunt explicabo.',
58                  ),
59                ],
60              ),
61            ),
62          ),
63        ),
64      ),
65    ],
66  );
67}
68

Usage

`FCollapsible(...)`

1FCollapsible(
2  value: 0.5,
3  axis: .vertical,
4  child: Placeholder(),
5)

Usage

FCollapsible(...)

On this page

`FCollapsible(...)`