accordion_mnml 1.1.0

A minimal Accordion widget with smooth opening animations. And Platform Independent UI Packages.

accordion_mnml

A minimal, platform-independent accordion widget for Flutter with smooth open/close animations, full theming support, and a one-at-a-time mode.

---

Features

• 🎞 Smooth expand/collapse animation with configurable duration and easing
• 🎨 Fully customizable — background, border, shadow, header color, text style
• 🔢 One-at-a-time mode via AccordionMnmlWrapper
• 🪄 Optional header prefix icon and divider between header and body
• 📱 Platform independent — works on iOS, Android, Web, Desktop

---

Getting Started

Add to your pubspec.yaml:

dependencies:
  accordion_mnml: ^1.0.0

Then run:

flutter pub get

---

Usage

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Accordion Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Accordion Demo')),
      body: SingleChildScrollView(
        child: AccordionMnmlWrapper(
          isOneAtATime: true,
          items: [
            AccordionMnmlItem(
              title: 'What is accordion_mnml?',
              headerPrefixIcon: const Icon(Icons.info_outline, size: 18),
              child: const Text('A minimal accordion widget for Flutter.'),
            ),
            AccordionMnmlItem(
              title: 'Is it customizable?',
              backgroundColor: Colors.amber.shade50,
              dividerColor: Colors.amber,
              child: const Text('Yes — colors, borders, shadows and more.'),
            ),
            AccordionMnmlItem(
              title: 'Starts expanded',
              initiallyExpanded: true,
              boxShadows: [
                BoxShadow(
                  color: Colors.deepPurple.withValues(alpha: 0.15),
                  blurRadius: 10,
                  offset: const Offset(0, 4),
                ),
              ],
              child: const Text('This item starts in the expanded state.'),
            ),
          ],
        ),
      ),
    );
  }
}

---

Parameters — AccordionMnmlItem

Parameter	Type	Default	Description
title	String	'Accordion Item'	Header title text
child	Widget	required	Content shown when expanded
initiallyExpanded	bool	false	Whether to start expanded
animationDuration	Duration	400ms	Expand/collapse animation duration
headerPrefixIcon	Icon?	null	Icon shown left of the title
headerBackgroundColor	Color?	null	Background color for the header row
backgroundColor	Color?	theme cardColor	Background of the whole item
borderColor	Color?	Colors.black12	Border color
borderRadius	double?	10	Corner radius
borderWidth	double?	1	Border width
dividerColor	Color?	null	Divider between header and body
dividerThickness	double?	1	Thickness of the divider
boxShadows	List<BoxShadow>?	subtle shadow	Custom box shadows
padding	EdgeInsetsGeometry?	14h, 14v	Inner padding
margin	EdgeInsetsGeometry?	8h, 6v	Outer margin
titleTextStyle	TextStyle?	16, w600	Style for the title
onHeaderTap	VoidCallback?	null	Callback when header is tapped

---

Parameters — AccordionMnmlWrapper

Parameter	Type	Default	Description
items	List<AccordionMnmlItem>	required	The accordion items to display
isOneAtATime	bool	false	If true, only one item can be open at a time

---

🎥 Demo