ListView viewable under background

Question

I'm encountering a little issue which is surely easily resolvable but I can't find any solution. All the suggested subjetcs are about custom backgrounds... Here is my code :

class HomeTest extends StatefulWidget {
  const HomeTest({super.key});

  @override
  State<HomeTest> createState() => _HomeTestState();
}

class _HomeTestState extends State<HomeTest> {
  final courantController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    final soldes = FirebaseFirestore.instance.collection('Soldes');
    return Scaffold(
        appBar: AppBar(title: const Text('Test')),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Column(
              children: [
                const Text("text"),
                const SizedBox(height: 20),
                const Text(
                  'another text',
                  textAlign: TextAlign.center,
                ),
                Container(
                  color: Colors.white,
                  height: 50,
                ),
                const SizedBox(height: 10),
                Container(
                    color: Colors.white,
                    height: 100,
                    child: Text('Container text')),
                const AnnoyingList(),
              ],
            ),
          ),
        ));
  }
}

class AnnoyingList extends StatefulWidget {
  const AnnoyingList({super.key});

  @override
  State<AnnoyingList> createState() => _AnnoyingListState();
}

class _AnnoyingListState extends State<AnnoyingList> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 250,
      child: ListView(children: [
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), //<-- SEE HERE
          ),
          title: const Text('Tile 1'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), //<-- SEE HERE
          ),
          title: const Text('Tile 2'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), //<-- SEE HERE
          ),
          title: const Text('Tile 3'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), //<-- SEE HERE
          ),
          title: const Text('Tile 4'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), //<-- SEE HERE
          ),
          title: const Text('Tile 5'),
        ),
        const SizedBox(height: 20),
        ListTile(
          tileColor: const Color.fromARGB(93, 88, 127, 158),
          shape: RoundedRectangleBorder(
            side: const BorderSide(width: 2),
            borderRadius: BorderRadius.circular(50), //<-- SEE HERE
          ),
          title: const Text('Tile 6'),
        ),
      ]),
    );
  }
}

The issue is that the ListView goes outside the SizedBox and is viewable outside of it.

before moving the list

after moving the list

As you can see I tried to add container but obviously as soon as I put things on it, it adapts its width. Is there a simple solution for the list to stay inside the SizedBox ? It just seems that the backgrounds is transparent or something but I didn't manage to solve it by changing theme of materialapp... thanks !

Answer 1

Wrap every ListTile with Card

Card(
  child: ListTile(//...)
  //...
)