listview builder moves out of the container bounds when i add content in my list

Question

Container(
              height: MediaQuery.of(context).size.height * 0.35,
              width: MediaQuery.of(context).size.height * 0.45,
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Colors.black,
                    Colors.brown,
                  ],
                ),
                borderRadius: BorderRadius.all(Radius.circular(20)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 5.0,
                    offset: Offset(0, 2),
                  ),
                ],
              ),
              child: SingleChildScrollView(
                child: ListView.builder(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: _questions.length,
                  itemBuilder: (context, index) {
                    final question = _questions.keys.elementAt(index);
                    final answer = _questions.values.elementAt(index);
                    final number = index + 1;
    
                    return ListTileTheme(
                      contentPadding: const EdgeInsets.symmetric(
                          horizontal: 16.0, vertical: 8.0),
                      tileColor: Colors.grey[900],
                      dense: true,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(16.0)),
                      child: ListTile(
                        leading: Text(
                          '${number.toInt()}.',
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        title: Text(
                          question,
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 18.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        subtitle: Text(
                          answer.toString(),
                          style: const TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                            fontWeight: FontWeight.normal,
                          ),
                        ),
                        trailing: const Icon(Icons.arrow_forward_ios_rounded,
                            color: Colors.white),
                      ),
                    );
                  },
                ),
              ),
            ),

Issue with is that when I add items to the list the listview scrolls but it gets out of the height and width of the container. I want it to stay inside the limits set by the container so i can get a container that is scrollable.I have tried changing the physics of it as well but didn't work. I have also tried wrapping the container in a singlechildscrollview as well.

I tried using singlechildscrollview and also tried setting shrinkwrap to true but I guess I'm doing something wrong here. Because whenever I add new stuff and when the list gets bigger then the container scrolling gives a weird out of container bound display of the list.

Answer 1

You can remove tilecolor.

return ListTileTheme(
  contentPadding: const EdgeInsets.symmetric(
      horizontal: 16.0, vertical: 8.0),
  // tileColor: Colors.grey[900],