expandable_section 0.0.2

expandable_section: ^0.0.2 copied to clipboard

Expandable Section #

This is an expandable section widget where users gets to insert a section/widget they'd want to toggle. The toggle controller is totally provided by the user, that way there's more flexibility and no limitation on how to provide the header/toggle controller.

Features #

• A widget section which serves as a container to the child you'd wish to toggle it's visibility.

• A fastOutSlowIn default but optional animation that allows you to control the kind of animation curve you want for the expanding section.

Getting started #

In the pubspec.yaml of you flutter project, add the following dependency:

dependencies:
 expandable_section: ^0.0.1

Basic Usage #

ExpandableSection has an expand boolean value, that is being controlled by your own custom header or widget, it also has a child value, where the supposed hidden widget's content lives and finally, an optional curve value to control the visibility toggle animation of hidden widget.

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

class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  bool _expand = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              _expand = !_expand;
            });
          },
          child: const Text(
            "Show more",
            style: TextStyle(
              color: Colors.black,
            ),
          ),
        ),
        const SizedBox(
          height: 10,
        ),
        ExpandableSection(
          expand: _expand,
          child: const Text("This is the expanded value..."),
        )
      ],
    );
  }
}

FAQ #

How to toggle the expansion widget

bool _expand = false;

onTap: () {
  setState(() {
   _expand = !_expand;
  });
},

Example #

You can find the example code here