How to create Accordions in Flutter without plugins

This article shows you how to make Accordions in Flutter without using third-party plugins.

Accordions display collapsible content panels to present information in a limited amount of space. Advertisements

The Steps

1. Create a new file called accordion.dart in your ./lib folder and add the following code to create a reusable Accordion widget:

import 'package:flutter/material.dart';

class Accordion extends StatefulWidget {
  final String title;
  final String content;

  const Accordion({Key? key, required this.title, required this.content})
      : super(key: key);
  @override
  _AccordionState createState() => _AccordionState();
}

class _AccordionState extends State<Accordion> {
  bool _showContent = false;
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: const EdgeInsets.all(10),
      child: Column(children: [
        ListTile(
          title: Text(widget.title),
          trailing: IconButton(
            icon: Icon(
                _showContent ? Icons.arrow_drop_up : Icons.arrow_drop_down),
            onPressed: () {
              setState(() {
                _showContent = !_showContent;
              });
            },
          ),
        ),
        _showContent
            ? Container(
                padding:
                    const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
                child: Text(widget.content),
              )
            : Container()
      ]),
    );
  }
}

2. Import accordion.dart into the file you want to implement our Accordion widget (i.e. main.dart):

import './accordion.dart';

3. Use:

import 'package:flutter/material.dart';

import './accordion.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: const Text(
            'Kindacode.com',
          ),
        ),
        body: Column(children: const [
          Accordion(
            title: 'Section #1',
            content:
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ornare vulputate. Curabitur faucibus condimentum purus quis tristique.',
          ),
          Accordion(
              title: 'Section #2',
              content:
                  'Fusce ex mi, commodo ut bibendum sit amet, faucibus ac felis. Nullam vel accumsan turpis, quis pretium ipsum. Pellentesque tristique, diam at congue viverra, neque dolor suscipit justo, vitae elementum leo sem vel ipsum'),
          Accordion(
              title: 'Section #3',
              content:
                  'Nulla facilisi. Donec a bibendum metus. Fusce tristique ex lacus, ac finibus quam semper eu. Ut maximus, enim eu ornare fringilla, metus neque luctus est, rutrum accumsan nibh ipsum in erat. Morbi tristique accumsan odio quis luctus.'),
        ]));
  }
}

Advertisements4. Check the result:

This example creates accordions from scratch so that you can customize them as much as you want. If you want quickly get the job done, see this article: Flutter: ExpansionPanelList and ExpansionPanelList.radio examples.

Conclusion

We’ve built a custom, reusable Accordion widget. At this point, you should get a better and deeper understanding of creating interactive user interfaces in Flutter. If you’d like to explore more, take a look at the following articles:Advertisements

• Flutter: ListView Pagination (Load More) example
• Flutter AnimatedList – Tutorial and Examples
• Flutter: SliverGrid example
• 2 Ways to Create Flipping Card Animation in Flutter
• Flutter: How to Draw a Heart with CustomPaint

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.