How to create Accordions in Flutter without plugins

Last updated on February 15, 2022 Augustus Loading... 4 comments

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.

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.'),
        ]));
  }
}

4. 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:

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

Subscribe
Notify of
guest
4 Comments
Inline Feedbacks
View all comments
alti
alti
8 months ago

Really useful! thanks

Anjali Jha
Anjali Jha
1 year ago

How can I change the text colour of content

cadaats
cadaats
1 year ago

this is cool, how can I make content another widget that can be any object – datatable/graph/image

A Goodman
Admin
A Goodman
1 year ago
Reply to  cadaats

You can replace the Text widget inside the Container with whatever you like

Related Articles