How to solve: RangeError (RangeError (index): Invalid value: Not in inclusive range 0..1: 2) flutter when using more than two expanded panel lists

Question

Asked by Techwithyo on December 19, 2021 (source).

please what am i doing wrong here. i am trying to have a listview in an expanded panel list and if i rendered just two expanded list the code runs with no error. but if i rendered more than two, and i try to expand any of the other panel list, it returns the following error as RangeError (RangeError (index): Invalid value: Not in inclusive range 0..1: 2.

bellow is my code sample. thank you all.

                        ExpansionPanelList(
                          children: [
                            ExpansionPanel(
                              isExpanded: _isOpen[0],
                              headerBuilder: (context, isOpen) {
                                return Row(
                                  children: [
                                    SizedBox(width: 10.w),
                                    Center(
                                      child: Text(
                                        "Ball Games ⚽ 🏀",
                                        style: TextStyle(
                                            fontSize: 17.sp,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xff333333)),
                                      ),
                                    ),
                                  ],
                                );
                              },
                              body: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    _myListView(),
                                    // _myListView(),
                                  ],
                                ),
                              ),
                            ),
                            ExpansionPanel(
                              isExpanded: _isOpen[1],
                              headerBuilder: (context, isOpen) {
                                return Row(
                                  children: [
                                    SizedBox(width: 10.w),
                                    Center(
                                      child: Text(
                                        "Racket & Bat 🥍",
                                        style: TextStyle(
                                            fontSize: 17.sp,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xff333333)),
                                      ),
                                    ),
                                  ],
                                );
                              },
                              body: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    _myListView(),
                                    // _myListView(),
                                  ],
                                ),
                              ),
                            ),
                            ExpansionPanel(
                              isExpanded: _isOpen[1],
                              headerBuilder: (context, isOpen) {
                                return Row(
                                  children: [
                                    SizedBox(width: 10.w),
                                    Center(
                                      child: Text(
                                        'Winter 🏂',
                                        style: TextStyle(
                                            fontSize: 17.sp,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xff333333)),
                                      ),
                                    ),
                                  ],
                                );
                              },
                              body: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    _myListView(),
                                    // _myListView(),
                                  ],
                                ),
                              ),
                            ),
                            ExpansionPanel(
                              isExpanded: _isOpen[1],
                              headerBuilder: (context, isOpen) {
                                return Row(
                                  children: [
                                    SizedBox(width: 10.w),
                                    Center(
                                      child: Text(
                                        'Water 🏊‍♀️ ',
                                        style: TextStyle(
                                            fontSize: 17.sp,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xff333333)),
                                      ),
                                    ),
                                  ],
                                );
                              },
                              body: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    _myListView(),
                                    // _myListView(),
                                  ],
                                ),
                              ),
                            ),
                            ExpansionPanel(
                              isExpanded: _isOpen[1],
                              headerBuilder: (context, isOpen) {
                                return Row(
                                  children: [
                                    SizedBox(width: 10.w),
                                    Center(
                                      child: Text(
                                        'Others 🚲🔫',
                                        style: TextStyle(
                                            fontSize: 17.sp,
                                            fontWeight: FontWeight.w400,
                                            color: Color(0xff333333)),
                                      ),
                                    ),
                                  ],
                                );
                              },
                              body: SingleChildScrollView(
                                child: Column(
                                  mainAxisSize: MainAxisSize.min,
                                  children: [
                                    _myListView(),
                                    // _myListView(),
                                  ],
                                ),
                              ),
                            ),
                          ],
                          expansionCallback: (i, isOpen) {
                            setState(() {
                              _isOpen[i] = !isOpen; //this is where the error is pointing to
                            });
                          },

here is the listview i am returning in the expanded panel's body

Widget _myListView() {
    return MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: ListView(
        shrinkWrap: true,
        physics: ScrollPhysics(),
        children: List1.keys.map((String key) {
          return new CheckboxListTile(
            title: new Text(key),
            value: List1[key],
            activeColor: Colors.black,
            checkColor: Colors.white,
            onChanged: (bool? value) {
              setState(() {
                List1[key] = value!;
              });
            },
          );
        }).toList(),
      ),
    );
  }

list1


  Map<String, bool> List1 = {
    'Bubble Football ⚽': false,
    'Futsal 🧿': false,
    'Beach Volleyball 🏐': false,
    'Volleyball 🏐': false,
    'Dodgeball 🏀': false,
    'Rugby 🏉': false,
    'American Footbal 🏈': false,
    'Korftbal 🥎': false,
    'Netbal ⚾': false,
  };

  List<bool> _isOpen = [true, false];

thanks.

Answer

Question answered by Yeasin S (source).

The issue is coming from _isOpen because it contains only two value but used on five widgets. We need to make the list that will contain five bool in this case.

List<bool> _isOpen = [true, false, false, false, false];

And use unique index on each ExpansionPanel

    ExpansionPanelList(
          children: [
            ExpansionPanel(
              isExpanded: _isOpen[0],
              headerBuilder: (context, isOpen) {
                return Row(
                  children: const [
                    SizedBox(width: 10),
                    Center(
                      child: Text(
                        "Ball Games ⚽ 🏀",
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.w400,
                            color: Color(0xff333333)),
                      ),
                    ),
                  ],
                );
              },
              body: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _myListView(),
                    // _myListView(),
                  ],
                ),
              ),
            ),
            ExpansionPanel(
              isExpanded: _isOpen[1],
              headerBuilder: (context, isOpen) {
                return Row(
                  children: const [
                    SizedBox(width: 10),
                    Center(
                      child: Text(
                        "Racket & Bat 🥍",
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.w400,
                            color: Color(0xff333333)),
                      ),
                    ),
                  ],
                );
              },
              body: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _myListView(),
                    // _myListView(),
                  ],
                ),
              ),
            ),
            ExpansionPanel(
              isExpanded: _isOpen[2],
              headerBuilder: (context, isOpen) {
                return Row(
                  children: const [
                    SizedBox(width: 10),
                    Center(
                      child: Text(
                        'Winter 🏂',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.w400,
                            color: Color(0xff333333)),
                      ),
                    ),
                  ],
                );
              },
              body: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _myListView(),
                    // _myListView(),
                  ],
                ),
              ),
            ),
            ExpansionPanel(
              isExpanded: _isOpen[3],
              headerBuilder: (context, isOpen) {
                return Row(
                  children: const [
                    SizedBox(width: 10),
                    Center(
                      child: Text(
                        'Water 🏊‍♀️ ',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.w400,
                            color: Color(0xff333333)),
                      ),
                    ),
                  ],
                );
              },
              body: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _myListView(),
                    // _myListView(),
                  ],
                ),
              ),
            ),
            ExpansionPanel(
              isExpanded: _isOpen[4],
              headerBuilder: (context, isOpen) {
                return Row(
                  children: const [
                    SizedBox(width: 10),
                    Center(
                      child: Text(
                        'Others 🚲🔫',
                        style: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.w400,
                            color: Color(0xff333333)),
                      ),
                    ),
                  ],
                );
              },
              body: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    _myListView(),
                    // _myListView(),
                  ],
                ),
              ),
            ),
          ],
          expansionCallback: (i, isOpen) {
            setState(() {
              _isOpen[i] = !isOpen; 
            });
          },
        )
DART FLUTTER
SHARE: