Custom Accordion #

Custom Accordion (Expandable) widget with lots of customization.

Table of contents #

• Demo Preview
• Get Started
• How to use
• Properties
• Contributing

Demo Preview #

Get Started #

Add to your project #

flutter pub add custom_accordion

Import and use it! #

import 'package:custom_accordion/custom_accordion.dart';

How to use #

Basic Accordion

    CustomAccordion(
        title: 'Accordion',
        ),

Accordion with no child

    CustomAccordion(
        title: 'Accordion with no child',
        headerBackgroundColor: Colors.blue,
        titleStyle: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
        toggleIconOpen: Icons.keyboard_arrow_down_sharp,
        toggleIconClose: Icons.keyboard_arrow_up_sharp,
        headerIconColor: Colors.white,
        accordionElevation: 0,
        showContent: true,
        ),

Accordion with one child

    CustomAccordion(
        title: 'Accordion with one child',
        headerBackgroundColor: Colors.blue,
        titleStyle: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
        toggleIconOpen: Icons.keyboard_arrow_down_sharp,
        toggleIconClose: Icons.keyboard_arrow_up_sharp,
        headerIconColor: Colors.white,
        accordionElevation: 0,
        widgetItems: const Text(
          'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
          ),
        ),

Accordion with many child

    CustomAccordion(
        title: 'Accordion with many child',
        headerBackgroundColor: Colors.blue,
        titleStyle: const TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
        toggleIconOpen: Icons.keyboard_arrow_down_sharp,
        toggleIconClose: Icons.keyboard_arrow_up_sharp,
        headerIconColor: Colors.white,
        accordionElevation: 0,
        widgetItems: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Text(
                'Lorem Ipsum',
                style: Theme.of(context).textTheme.titleMedium,
              ),
              ElevatedButton(
                onPressed: () {},
                child: const Text(
                  'ELEVATED BUTTON',
                ),
              )
            ],
          ),
        ),

Please see example project for code.

Properties #

The following properties can be set for the widget.

Contributing #

Custom Accordion is 100% free and open source. We encourage and support an active, healthy community that accepts contributions from the public – including you. There are a couple of ways in which you can contribute.

• Fix a bug
• Write and improve some documentation. Documentation is very critical to us. We would appreciate help in adding multiple languages to our docs.
• If you are a developer, feel free to check out the source and submit pull requests.
• Dig into CONTRIBUTING.MD, which covers submitting bugs, requesting new features, preparing your code for a pull request, etc.
• Please don't forget to like, follow, and star our repo!.