Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flutter : Unsupported operation: Cannot add to an unmodifiable list

Tags:

list

flutter

dart

I have a ListView inside a StatelessWidget. It has items and every item contains a checkbox. When someone checks an item, I want the ListView to send this as a parameter to another page. But when I do that, it's giving me this error:

I/flutter ( 7067): The following UnsupportedError was thrown while handling a gesture:
I/flutter ( 7067): Unsupported operation: Cannot add to an unmodifiable list
I/flutter ( 7067): When the exception was thrown, this was the stack:

and this is my code

class StudentsList extends StatelessWidget {
  final List<Child> mList;
  StudentsList({this.mList});

  @override
  Widget build(BuildContext context) {
    List<Child> selectedList = [];

    return Container(
      margin: EdgeInsets.only(top: 50, bottom: 20),
      child: ListView.builder(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        itemCount: mList == null ? 0 : mList.length,
        padding: EdgeInsets.only(right: 10),
        itemBuilder: (BuildContext context, int position) {
          return GestureDetector(
            onTap: () {
              if (selectedList.isEmpty) {
                Navigator.push(
                  context,
                  new MaterialPageRoute(
                    builder: (BuildContext context) => SolokPage(
                      mChildList: [mList[position]],
                      isTeacher: true,
                    ),
                  ),
                );
              } else {
                if (!selectedList.contains(mList[position])) {
                  selectedList.add(mList[position]);
                }
                Navigator.push(
                  context,
                  new MaterialPageRoute(
                    builder: (BuildContext context) => SolokPage(
                      mChildList: selectedList,
                      isTeacher: true,
                    ),
                  ),
                );
              }
            },
            child: StudentItem(
              student: mList[position],
            ),
          );
        },
      ),
    );
  }
}
like image 834
Muhammad Avatar asked Aug 18 '19 23:08

Muhammad


1 Answers

Stateless Widget properties are meant to be immutable

class StudentsList extends StatelessWidget {
  // final means, flutter will not change value in future
  final List<Child> mList; 
  StudentsList({this.mList});

Why ?

Because Flutter expects no business logic resides in StatelessWidget. If we need to add new Student in Student list, it is considered as business logic. If we need to delete some Student in Student list, it is considered as business logic.

So by using stateless widget, Flutter will only focuses on How it will be displayed on Screen, what is the width, the constraints and etc.

That's why we found final syntaxes before class properties in StatelessWidget.

Similiar to our college life. Our Grades that marked in final report, will not change even after we graduate from university. As it said to be in Final Report, then it must be final.

Stateful Widget properties are mutable

Why ? Because flutter expects business logic resides in StatefulWidget.

Changes to be made

So I suggest to change StudentsList Widget, from this :

class StudentsList extends StatelessWidget {
  final List<Child> mList; // this is the issue
  StudentsList({this.mList});

to this one :

class StudentsList extends StatefulWidget {
  @override
  _StudentsListState createState() => _StudentsListState();
}

class _StudentsListState extends State<StudentsList> {
  // final List<Child> mList; // Do not mark this as final

  List<Child> mList;

  ...

}

Working Repository

You may look working repository that is closely-related to your issue. Github

Demo

like image 122
ejabu Avatar answered Oct 28 '22 18:10

ejabu