Allow multiple Accordions in one view

SirObi commented 2 years ago

Version

2.2.3 (latest as of 23.04.22)

Problem

Some use cases require having more than one accordion on the same page/view.

Currently, having multiple Accordions in the same widget tree causes:

unexpected behaviour on expanding/collapsing (multiple Accordions expanding/collapsing when one is clicked)

the following error on collapsing:

[ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': 
Failed assertion: line 108 pos 12: '_positions.length == 1': ScrollController attached to multiple scroll views.
#0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:51:61)
#1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:40:5)
#2      ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:108:12)
#3      AutoScrollControllerMixin._bringIntoViewportIfNeed (package:scroll_to_index/scroll_to_index.dart:417:11)
#4      AutoScrollControllerMixin._scrollToIndex (package:scroll_to_index/scroll_to_index.dart:241:13)

How to reproduce

1. Replace `lib/example/main.dart` of this project with a view containing two `Accordion`s

Click to see the code

``` import 'package:accordion/accordion.dart'; import 'package:flutter/material.dart'; void main() async { runApp(const AccordionApp()); } class AccordionApp extends StatelessWidget { const AccordionApp({Key key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const AccordionPage(), ); } } /// Main example page class AccordionPage extends StatelessWidget //__ { const AccordionPage({Key key}) : super(key: key); final _headerStyle = const TextStyle( color: Color(0xffffffff), fontSize: 15, fontWeight: FontWeight.bold); @override build(context) => Scaffold( backgroundColor: Colors.blueGrey[100], appBar: AppBar( title: const Text('Accordion App'), ), body: Column( children: [ Accordion( children: [ AccordionSection( header: Text('Accordion 1 Section 1', style: _headerStyle), content: Text('hi')), AccordionSection( header: Text('Accordion 1 Section 2', style: _headerStyle), content: Text('hi')), ], ), Accordion( children: [ AccordionSection( header: Text('Accordion 2 Section 1', style: _headerStyle), content: Text('hello'), ), ], ), ], ), ); } // ```

Once you build the app, you should see the following:
Screenshot from 2022-04-23 12-03-34

2. Click on Accordion 1 Section 1

IS: Both Accordion 1 Section 1 and Accordion 2 Section 1 are expanded

![Screenshot from 2022-04-23 11-45-46](https://user-images.githubusercontent.com/26621919/164891418-2622a271-261a-4bbe-b48e-13bdaa745e91.png)

SHOULD BE: Only Accordion 1 Section 1 is expanded

![Screenshot from 2022-04-23 11-46-34](https://user-images.githubusercontent.com/26621919/164891550-1d259ab5-868b-4532-b760-a28d3ed2ddad.png)

Proposed solution

I've raised a PR to address the issue. Link: https://github.com/GotJimmy/accordion/pull/19

sherkot commented 2 years ago

I have same issue

SirObi commented 2 years ago

Seems like @GotJimmy has reviewed and approved the PR (thanks for that, Christian!).
Will close the issue now.

GotJimmy commented 2 years ago

Ok. Thanks for your contribution!

GotJimmy / accordion