feat: add animation for template legend drawer

This commit is contained in:
Freek van de Ven 2024-07-06 16:16:35 +02:00 committed by Bart Ribbers
parent 63caa27f0a
commit bc2a7e2f08

View file

@ -24,6 +24,7 @@ class TemplateLegend extends StatefulWidget {
class _TemplateLegendState extends State<TemplateLegend> { class _TemplateLegendState extends State<TemplateLegend> {
bool _templateDrawerOpen = false; bool _templateDrawerOpen = false;
final ScrollController _scrollController = ScrollController();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -90,30 +91,32 @@ class _TemplateLegendState extends State<TemplateLegend> {
), ),
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
if (_templateDrawerOpen) ...[ AnimatedContainer(
// show a container with all the templates with a max height and after duration: const Duration(milliseconds: 500),
// that scrollable but as small as possible constraints: BoxConstraints(maxHeight: _templateDrawerOpen ? 150 : 0),
Container(
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all( border: _templateDrawerOpen
color: theme.colorScheme.onSurface, ? Border.all(color: theme.colorScheme.onSurface, width: 1)
width: 1, : null,
),
), ),
padding: const EdgeInsets.only(right: 2), padding: const EdgeInsets.only(right: 2),
child: _templateDrawerOpen
? SingleChildScrollView(
child: Column( child: Column(
children: [ children: [
Container( Container(
constraints: const BoxConstraints( constraints: const BoxConstraints(
maxHeight: 100, maxHeight: 150,
), ),
child: Scrollbar( child: Scrollbar(
controller: _scrollController,
thumbVisibility: true, thumbVisibility: true,
trackVisibility: true, trackVisibility: true,
thickness: 2, thickness: 2,
child: ListView.builder( child: ListView.builder(
controller: _scrollController,
shrinkWrap: true, shrinkWrap: true,
itemCount: widget.templates.length + 1, itemCount: widget.templates.length + 2,
itemBuilder: (context, index) { itemBuilder: (context, index) {
if (index == 0) { if (index == 0) {
return _TemplateLegendItem( return _TemplateLegendItem(
@ -123,6 +126,15 @@ class _TemplateLegendState extends State<TemplateLegend> {
borderColor: colorScheme.primary, borderColor: colorScheme.primary,
); );
} }
if (index == widget.templates.length + 1) {
return Padding(
padding: const EdgeInsets.only(
top: 10,
bottom: 8,
),
child: createNewTemplateButton,
);
}
var template = widget.templates[index - 1]; var template = widget.templates[index - 1];
return _TemplateLegendItem( return _TemplateLegendItem(
name: template.name, name: template.name,
@ -132,15 +144,11 @@ class _TemplateLegendState extends State<TemplateLegend> {
), ),
), ),
), ),
const SizedBox(height: 4),
createNewTemplateButton,
const SizedBox(height: 8),
], ],
), ),
)
: const Divider(height: 1),
), ),
] else ...[
const Divider(height: 1),
],
if (!templatesAvailable) ...[ if (!templatesAvailable) ...[
const SizedBox(height: 12), const SizedBox(height: 12),
createNewTemplateButton, createNewTemplateButton,