import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';

/// App Expandable Notifier with animation
/// [headerWidget]  widget want to show in the header
/// [bodyWidget]  widget want to show in the body
/// [title]  the widget title
/// [collapsed] The widget shown in the collapsed state
class AppExpandableNotifier extends StatelessWidget {
  final Widget headerWidget;
  final Widget bodyWidget;
  final String title;
  final Widget collapsed;
  final Widget header;

  AppExpandableNotifier(
      {this.headerWidget, this.bodyWidget, this.title, this.collapsed,this.header});

  @override
  Widget build(BuildContext context) {
    return ExpandableNotifier(
      child: Padding(
        padding: const EdgeInsets.only(left: 10,right: 10,top: 4),
        child: Card(
          clipBehavior: Clip.antiAlias,
          child: Column(
            children: <Widget>[
              SizedBox(
                child: headerWidget,
              ),
              ScrollOnExpand(
                scrollOnExpand: true,
                scrollOnCollapse: false,
                child: ExpandablePanel(
                  theme: const ExpandableThemeData(
                    headerAlignment: ExpandablePanelHeaderAlignment.center,
                    tapBodyToCollapse: true,
                  ),
                  header: header ?? Padding(
                    padding: EdgeInsets.all(10),
                    child: Text(
                      title?? 'Details',
                      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 22,),
                    ),
                  ),
                  collapsed: collapsed ?? Container(),
                  expanded: bodyWidget,
                  builder: (_, collapsed, expanded) {
                    return Padding(
                      padding: EdgeInsets.only(left: 5, right: 5, bottom: 5),
                      child: Expandable(
                        collapsed: collapsed,
                        expanded: expanded,
                        theme: const ExpandableThemeData(crossFadePoint: 0),
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
