Question 224115 in Flutter Question posted in
The official Flutter documentation can be found here.

Background of the ListTile is overflowing in Flutter?

With this code the background of the ListTile is getting out of the container. I coloured it red. Where am I going wrong?

body: SingleChildScrollView(
          child: Padding(
              padding: const EdgeInsets.all(10),
              child: Container(
                  height: 400,
                  color: Colors.grey,
                  padding: const EdgeInsets.all(2),
                  child: ListView.builder(
                    itemCount: contentList.length,
                    prototypeItem: const ListTile(
                      style: ListTileStyle.list,
                      title: Text("jhgjhgj"),
                    ),
                    itemBuilder: (context, index) {
                      return ListTile(
                        tileColor: Colors.red,
                        contentPadding: EdgeInsets.zero,
                        title: Text(contentList[index]),
                      );
                    },
                  ))))

enter image description here

Tags:

2

Answers


  1. 0

    There is an open issue regarding the same that ListTile color getting out of the parent view/specified constraints when the ListTile is wrapped using the Container widget with the background color as mentioned here.

    Now to fix your issue (as a workaround), you can wrap the ListTile with the Material widget as:

    return Material(
                    child: ListTile(
                      tileColor: Colors.red,
                      contentPadding: EdgeInsets.zero,
                      title: Text(contentList[index]),
                    ),
                  );

    Online demo: https://zapp.run/edit/flutter-z31s06na31t0?entry=lib/main.dart&file=lib/main.dart

    Complete answer:

    import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Container(
              height: 400,
              color: Colors.grey,
              padding: const EdgeInsets.all(2),
              child: ListView.builder(
                itemCount: contentList.length,
                prototypeItem: const ListTile(
                  style: ListTileStyle.list,
                  title: Text("jhgjhgj"),
                ),
                itemBuilder: (context, index) {
                  return Material(
                    child: ListTile(
                      tileColor: Colors.red,
                      contentPadding: EdgeInsets.zero,
                      title: Text(contentList[index]),
                    ),
                  );
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

    Note: If anyone thinks this answer is duplicate and this question should be closed, please let me know. I’ll delete my answer 🙂

    Login or Signup to reply.
  2. 0

    As you are using ListView.builder which provides the capability of scrolling
    SingleChildScrollView might not be necessary in this case.
    here is the updated code

    body: Padding(
padding: const EdgeInsets.all(10),
child: Container(
height: 400,
color: Colors.grey,
padding: const EdgeInsets.all(2),
child: ListView.builder(
  itemCount: contentList.length,
  itemBuilder: (context, index) {
    return ListTile(
      tileColor: Colors.red,
      contentPadding: EdgeInsets.zero,
      title: Text(contentList[index]),
    );
  },
),))
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search