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

5
votes

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.

2
flutterdart
can you include List1? - Yeasin Sheikh
okay. please where and how can i include it . thanks - Techwithyo
update the question - Yeasin Sheikh
updated thanks @YeasinSheikh - Techwithyo

2 Answers

1
votes

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; 
            });
          },
        )
1
votes

@YeasinSheikh already mentioned in the earlier answer. For the expansion panel, you must be used a unique index for each expansion tile and The callback gets called whenever one of the expand/collapse buttons is pressed. The arguments passed to the callback are the index of the pressed panel and whether the panel is currently expanded or not.

And another thing, it is costly to maintain the bool list, you can try dynamically.

 Column(
              children: [
                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        ExpansionPanelList(
                          children: List.generate(
                            List2.length,
                            (index) => expansionPanel(
                                _selected_box.contains(index),
                                "${List2[index]}"),
                          ),
                          expansionCallback: (i, isOpen) {
                            setState(() {
                              if (_selected_box.contains(i))
                                _selected_box.remove(i);
                              else
                                _selected_box.add(i);
                            });
                          },
                        )
                      ],
                    ),
                  ),
                )
              ],
            )

ExpansionPanel widget

ExpansionPanel expansionPanel(bool isbool, String expansionTitle) {
    return ExpansionPanel(
      isExpanded: isbool ?? false,
      headerBuilder: (context, isOpen) {
        return Row(
          children: [
            SizedBox(width: 10),
            Center(
              child: Text(
                "$expansionTitle",
                style: TextStyle(
                    fontSize: 17,
                    fontWeight: FontWeight.w400,
                    color: Color(0xff333333)),
              ),
            ),
          ],
        );
      },
      body: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            _myListView(),
            // _myListView(),
          ],
        ),
      ),
    );
  }

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(),
      ),
    );
  }

For complete source code link.

For more about ExpansionCallBack

Read more about ExpansionPanel