A Flutter widget that can expand and collapse with animation

Features

A flutter widget that can:

  • Expand
  • Collapsed
  • Allows you to use a custom header widget
  • Allows you to use a custom child widget
  • Allows you to add a custom icon to handle expand and collapse

Additional information

  • Easy to use and manage
  • You have to use your state management, in order to control the state of the widget
  • You can bind this widget with GetX, Provider or any state management you like!

Basic Setup

       Expandi(
        expandableChildAnimationMilliSecondsDuration: 500,
        expandableIconAnimationMilliSecondsDuration: 500,
        //optional
        onExpandCollapseCallback: (bool isExpanded) {
          setState(() {
            expanded = !isExpanded;
          });
        },
        //added rotating icon here
        expandableIconWidget: const Icon(Icons.keyboard_arrow_down,size: 40,color: Colors.red,),
        marginBetweenExpandableIcon: 40,
        isExpanded: expanded,
        headerContainerDecoration: const BoxDecoration(color: Colors.yellow),
        headerContainerMargin: const EdgeInsetsDirectional.all(40),
        headerContainerPadding: const EdgeInsetsDirectional.all(40),

        headerWidget: const Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
                child: Text(
              "Expand",
              style: TextStyle(color: Colors.white),
              textAlign: TextAlign.end,
            ))
          ],
        ),
        expandableChild: Container(
          padding:
              const EdgeInsets.only(top: 20, bottom: 20, left: 12, right: 12),
          margin: const EdgeInsets.only(left: 20, right: 20),
          color: Colors.blue,
          child: const Text(
            "Hello world, greetings from the expandi, this would be a long journey!",
            style: TextStyle(color: Colors.white),
          ),
        ),
      )

Constructor Example

const Expandi(
      {Key? key,
      this.expandableIconWidget,
      this.marginBetweenExpandableIcon = 0,
      required this.onExpandCollapseCallback,
      required this.headerWidget,
      required this.isExpanded,
      required this.expandableChild,
      this.expandableChildAnimationMilliSecondsDuration = 850,
      this.expandableIconAnimationMilliSecondsDuration = 500,
      this.headerWidgetEndPadding = 0})

Libraries

expandi_juni1289