How do I prevent this overflow error with multiple columns and listviews?

Viewed 47

I am creating a message page, where an admin can send messages to the users on the app.

I use a Container, with a Column with a Row and an AnimatedContainer as children, the AnimatedContainer also holds a Column with two Listviews and a TextField.

The Row holds an Icons.add button, whenever the button is pressed, _isExpanded =! _isExpanded. When _isExpanded, the AnimatedContainer height is set to 400, when !_isExpanded, the height is 0. My weakness in flutter is working with spacing, boundries etc. Whenever I expand my AnimatedContainer, I get a bottomOverflow error, which isn't surprising because my Column inside the Animated container (and it's children) have a fixed width. I tried wrapping a lot of widgets with Expanded, but I can't seem to find the right combination. The error keeps appearing. Anyone who is able to help me resolve this?

Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(12),
                      color: Colors.grey[300]),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Column(
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text('Ontvangers',
                                style: TextStyle(
                                    fontFamily: 'Lato',
                                    fontSize: 16,
                                    fontWeight: FontWeight.w700)),
                            IconButton(
                              icon: Icon(Icons.add),
                              onPressed: () {
                                setState(() {
                                  _isExpanded = !_isExpanded;
                                });
                              },
                            )
                          ],
                        ),
                        AnimatedContainer(
                          duration: Duration(milliseconds: 300),
                          curve: Curves.fastOutSlowIn,
                          height: _isExpanded ? 400 : 0,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              TextField(
                                decoration: InputDecoration(
                                    prefixIcon: Icon(Icons.search),
                                    hintText: 'Zoeken'),
                                controller: _searchController,
                              ),
                              AnimatedContainer(
                                duration: Duration(milliseconds: 300),
                                curve: Curves.fastOutSlowIn,
                                height: selectedUsers.isNotEmpty ? 50 : 0,
                                child: ListView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount: selectedUsers.length,
                                    itemBuilder: (ctx, index) {
                                      return Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.start,
                                        mainAxisSize: MainAxisSize.min,
                                        children: [
                                          InputChip(
                                              labelStyle: TextStyle(
                                                  color: Colors.black),
                                              label: Text(filteredUsers[index]
                                                      ['firstName'] +
                                                  ' ' +
                                                  filteredUsers[index]
                                                      ['lastName'])),
                                          SizedBox(
                                            width: 5,
                                          )
                                        ],
                                      );
                                    }),
                              ),
                              ListView.builder(
                                  shrinkWrap: true,
                                  itemCount: filteredUsers.length,
                                  itemBuilder: (ctx, index) {
                                    return Column(
                                      children: [
                                        ListTile(
                                            tileColor: Colors.white,
                                            title: Text(filteredUsers[index]
                                                    ['firstName'] +
                                                ' ' +
                                                filteredUsers[index]
                                                    ['lastName']),
                                            subtitle: Text(
                                                filteredUsers[index]['email']),
                                            trailing: IconButton(
                                              icon: selectedUsers.contains(
                                                      filteredUsers[index]
                                                          ['uid'])
                                                  ? Icon(
                                                      Icons.check_box_rounded)
                                                  : Icon(Icons
                                                      .check_box_outline_blank_rounded),
                                              onPressed: () {
                                                if (selectedUsers.contains(
                                                    filteredUsers[index]
                                                        ['uid'])) {
                                                  selectedUsers.remove(
                                                      filteredUsers[index]
                                                          ['uid']);
                                                  setState(() {});
                                                } else {
                                                  selectedUsers.add(
                                                    filteredUsers[index]['uid'],
                                                  );
                                                  setState(() {});
                                                }
                                              },
                                            )),
                                        SizedBox(
                                          height: 8,
                                        )
                                      ],
                                    );
                                  }),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                )
1 Answers

Try wrapping your main widget or scaffold inside of a SafeArea. This may take care of your issue.

Related