setState does not open accordion

[singh-karan-7]

I have an accordion and its content has another Accordion. So, when I tap on the section and I call setState onOpenSection or onCloseSection, the accordion(neither the parent one nor the child one) does not open. Also, the maxOpenSections for the child Accordion does not work. Even if I set it to 1, it still opens more than 1. Is this a bug or expected behavior with nested accordions? One more, Any way to pass Scroll Controller to accordion, so we can access it separately?

[GotJimmy]

Can you send me a little example that produces the problem you're having? You are using the latest version (2.30), right?

Passing the ScrollController is not an option.

[singh-karan-7]

I have created a simple example for this:

class _MyHomePageState extends State<MyHomePage> {
           final List<int>? sectionsOpened = [-1];

          @override
          Widget build(BuildContext context) {
        return Scaffold(
           appBar: AppBar(
            title: Text(widget.title),
           ),
          body: Center(
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                   Accordion(
                       maxOpenSections: 1,

                children: [
                  ...List.generate(
                    4,
                    (index) {
                      return AccordionSection(

                        isOpen: false,
                        paddingBetweenClosedSections: 8,
                        paddingBetweenOpenSections: 0,
                        rightIcon: Container(),
                        headerBackgroundColor: Colors.blueAccent,
                        contentBorderColor: Colors.transparent,
                        contentHorizontalPadding: 0,

                        header: Container(
                          width: MediaQuery.of(context).size.width,
                          constraints: BoxConstraints(minHeight: 54),
                          decoration: BoxDecoration(
                            color: Colors.blueAccent,
                            shape: BoxShape.rectangle,

                          ),
                          child: Padding(
                            padding:
                                EdgeInsetsDirectional.fromSTEB(0, 17, 0, 17),
                            child: Row(
                              mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Flexible(
                                  child: Text(
                                    ' title ',
                                    style: TextStyle(
                                        fontSize: 15, color: Colors.white),
                                    maxLines: 99,
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                                SizedBox(
                                  width: 8,
                                ),
                                Visibility(
                                  visible: !(sectionsOpened?[0] == index),
                                  child: Padding(
                                    padding:
                                        const EdgeInsets.fromLTRB(0, 0, 0, 0),
                                    child: Container(
                                      color: Colors.white,
                                      width: 40,
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        content: Column(children: [
                          ...List.generate(
                            3,
                            (subTopicIndex) => Accordion(
                              disableScrolling: true, // true
                              paddingListTop: 0,
                              paddingListBottom: 0,
                              paddingListHorizontal: 0,
                              headerPadding: const EdgeInsets.symmetric(
                                  horizontal: 16, vertical: 0),
                              maxOpenSections: 1,
                              headerBorderRadius: 0,
                              children: [
                                AccordionSection(
                                    isOpen: false,
                                    flipRightIconIfOpen: true,
                                    paddingBetweenClosedSections: 4,
                                    paddingBetweenOpenSections: 4,
                                    rightIcon: Container(

                                        ),

                                    onOpenSection: () {
                                      sectionsOpened?[0] = subTopicIndex;

                                      setState(() {});
                                    },
                                    onCloseSection: () {
                                      sectionsOpened?[0] = -1;
                                      setState(() {});
                                    },
                                    headerBackgroundColor:
                                        sectionsOpened?[0] == subTopicIndex
                                            ? Colors.pinkAccent
                                            : Colors.amber,
                                    contentBorderColor: Colors.transparent,

                                    header: Container(
                                      width: MediaQuery.of(context).size.width,
                                      constraints:
                                          BoxConstraints(minHeight: 54),
                                      decoration: BoxDecoration(
                                        color: Colors.transparent,
                                        shape: BoxShape.rectangle,

                                      ),
                                      child: Padding(
                                        padding: const EdgeInsets.symmetric(
                                            vertical: 17.0),
                                        child: Row(
                                          mainAxisSize: MainAxisSize.max,
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Flexible(
                                              child: Text(
                                                ' sub title ',
                                                style: TextStyle(
                                                  fontSize: 15,
                                                  color: Colors.blue,
                                                ),
                                                maxLines: 99,
                                                overflow: TextOverflow.ellipsis,
                                              ),
                                            ),

                                            Visibility(
                                              visible: true,
                                              child: Container(
                                                color: Colors.white,
                                                width: 40,
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                    content: Container(
                                      height: 40,
                                      color: Colors.red,
                                    )),
                              ],
                            ),
                          )
                        ]),
                      );
                    },
                  )
                ]),
          ],
        ),
      ),
    );
      }
     }

Here, as we have to call setState on opening section, it just reloads the entire accordion apparently. You can check about more than 1 section opening in the child accordion by commenting out the onOpenSection and onCloseSection

[GotJimmy]

Sorry for the late answer: 1) version 2.4.0 has just been publish. Please try if that solves your issue. 2) if not, please post entire example (not just the build method)

[singh-karan-7]

I have tested the latest version too. It still opens more than 2 sections in the nested accordion. The above code is actually te complete example. You can put that in new Flutter Application in HomePage.

I think the issue is with ...List.generate

[GotJimmy]

I think you should run List.generate on AccordionSection not on the Accordion itself.