skip to Main Content

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

enter image description here

after moving the list

enter image description here

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 !

2

Answers


  1. Wrap every ListTile with Card

    Card(
      child: ListTile(//...)
      //...
    )
    
    Login or Signup to reply.
  2. try adding this paramater in ListView.

    physics: const NeverScrollableScrollPhysics(),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search