How to create Accordions in Flutter without plugins

Last updated on October 31, 2020 The Frog Loading... 2 comments

This article show 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.

Getting Started

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

import 'package:flutter/material.dart';

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

  Accordion(this.title, this.content);
  @override
  _AccordionState createState() => _AccordionState();
}

class _AccordionState extends State<Accordion> {
  bool _showContent = false;
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: 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: 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(MyApp());
}

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

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(
            'Kindacode.com',
          ),
        ),
        body: Column(children: [
          Accordion('Section #1',
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam bibendum ornare vulputate. Curabitur faucibus condimentum purus quis tristique.'),
          Accordion('Section #2',
              '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('Section #3',
              '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:

That’s it. Happy Fluttering 🙂

Subscribe
Notify of
guest
2 Comments
Inline Feedbacks
View all comments
cadaats
cadaats
9 months ago

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

A Goodman
Admin
A Goodman
9 months ago
Reply to  cadaats

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

Related Articles