selectable_expansion_tile 0.0.1

Custom Selectable ExpansionTile Flutter package

Selectable Expandion Tile

A custom Flutter plugin for a selectable ExpansionTile with properties for a dynamic header, body, and ExpansionController, which ensures that expanding one tile collapses the others, providing a grouped behavior for multiple tiles. This allows for a synchronized accordion-style UI where only one tile remains expanded at any given time.

Installation

1. Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
  selectable_expansion_tile: ^0.0.1

2. Import the package and use it in your Flutter App.

import 'package:selectable_expansion_tile/selectable_expansion_tile.dart';

Example

There properties which are required:

• header
• body
• onChanged [call back function with value when your tile is getting expanded or collapsed]
• controller [you can manually expand and collapse just by using controller.expand and controller.collapse.]

other than that toggle fuction is there.

For multiple Selectable expansion tile

• value
• group value

[when value and group value become same expansion tile gets expanded automatically and others gets collapsed]

---

class Payment extends StatefulWidget { const Payment({Key? key}) : super(key: key); @override State<Payment> createState() => _PaymentState(); } class _PaymentState extends State<Payment> { ExpansionController controller = ExpansionController(); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SelectableExpansionTile( controller: controller, header: Container( margin: const EdgeInsets.fromLTRB(12, 12, 12, 0), decoration: BoxDecoration( color: Colors.blue.withOpacity(0.2), ), child: RadioMenuButton( value: controller.value, groupValue: true, onChanged: (value) { if (controller.expanded == false) { setState(() { controller.expand(); }); } else { setState(() { controller.collapse(); }); } }, child: const Text('Credit Card'), ), ), body: Container( margin: const EdgeInsets.only(left: 12, right: 12), decoration: BoxDecoration( color: Colors.grey.withOpacity(0.2), ), padding: const EdgeInsets.only(left: 12, right: 12, top: 12, bottom: 12), child: const Text( 'Credit Card is the general term used to cover a wide range of credit transfers, including cash payments, giro-payments, and wire transfer to local banks. They are the most common form of cashless consumer payments in most countries within the European Union and Asia–Pacific (references: www.ecb.org and www.bis.org)', style: TextStyle(color: Colors.black, fontSize: 22), ), ), onChanged: (value) {}, ), ), ); } }

Next Goals

• Add custom animation on expand and collapse.

• body widget more customisation.

• Add more functionalities to the package.