ListTile tileColor overflowing ListView - flutter

Question

I have a ListView with ListTiles which set the tileColor property. All of the text and icons in the ListTile is clipped while the tileColor is visible beyond the ListView. How can I clip the entire ListTile so that nothing is visible beyond the ListView? I have tried wrapping ListView in various containers and the ListTile in a Container with no luck.
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: const MyHomePage(title: 'Reminders'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List _reminders = <String>[];
void _addReminder(String text) {
setState(() {
_reminders.add(text);
});
}
Widget _buildRow(String text, int i) {
return ListTile(
title: Text('[enter image description here][1]Reminder'),
trailing: IconButton(
onPressed: () {
setState(() {
_reminders.removeAt(i);
});
},
icon: Icon(Icons.delete)),
subtitle: Text(text),
tileColor: Colors.lightBlue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
);
}
void _showMenu() {}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
),
body: Column(
children: <Widget>[
Container(
height: 400,
child: ListView.builder(
padding: EdgeInsets.all(8),
itemBuilder: (context, i) => _buildRow(_reminders[i], i),
itemCount: _reminders.length,
),
),
Container(
height: 100,
width: double.infinity,
child: Text('hello'),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_addReminder('hello there');
},
child: const Icon(Icons.add),
),
);
}
}

Answer 1

To solve your problem, wrap the Tile in a Material. Here is a tested solution. The explanation is below the code.
The short version:
Widget _buildRow(String text, int i) {
return Material(
child: ListTile(
title: Text('[enter image description here][$i]Reminder'),
trailing: IconButton(
onPressed: () {
setState(() {
_reminders.removeAt(i);
});
},
icon: const Icon(Icons.delete)),
subtitle: Text(text),
tileColor: Colors.lightBlue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
));
}
The complete, working example:
```
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: const MyHomePage(title: 'Reminders'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List _reminders = <String>[];
void _addReminder(String text) {
setState(() {
_reminders.add(text);
});
}
Widget _buildRow(String text, int i) {
return Material(child: ListTile(
title: Text('[enter image description here][$i]Reminder'),
trailing: IconButton(
onPressed: () {
setState(() {
_reminders.removeAt(i);
});
},
icon: const Icon(Icons.delete)),
subtitle: Text(text),
tileColor: Colors.lightBlue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
));
}
void _showMenu() {}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
),
body: Column(
children: <Widget>[
Container(
height: 400,
child: ClipRect(
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemBuilder: (context, i) => _buildRow(_reminders[i], i),
itemCount: _reminders.length,
),
)
),
Container(
color: Colors.white,
width: double.infinity,
child: Text('hello'),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_addReminder('hello there');
},
child: const Icon(Icons.add),
),
);
}
}
```
This might be considered a bug, but it is expected behavior. The tile colors are painted by the first Material widget ancestor of the ListTile (I believe this allows it to optimize out expensive clipping). See the ListTile documentation for more information.

Answer 2

// Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: const MyHomePage(title: 'Reminders'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// ignore: prefer_final_fields
List _reminders = <String>[];
void _addReminder(String text) {
setState(() {
_reminders.add(text);
});
}
Widget _buildRow(String text, int i) {
return ListTile(
title: const Text('Reminder'),
trailing: IconButton(
onPressed: () {
setState(() {
_reminders.removeAt(i);
});
},
icon: const Icon(Icons.delete)),
subtitle: Text(text),
tileColor: Colors.lightBlue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
);
}
void _showMenu() {}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))],
),
body: ListView.separated(
padding: const EdgeInsets.all(8),
itemBuilder: (context, i) => _buildRow(_reminders[i], i),
itemCount: _reminders.length, separatorBuilder: (BuildContext context, int index) {
return const SizedBox(height:10);},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_addReminder('hello there');
},
child: const Icon(Icons.add),
),
);
}
}

Answer 3

Here is my code with solution
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: const MyHomePage(title: 'Reminders'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List _reminders = <String>[];
void _addReminder(String text) {
setState(() {
_reminders.add(text);
});
}
Widget _buildRow(String text, int i) {
return Container(
margin: EdgeInsets.symmetric(vertical: 5),
child: ListTile(
title: Text('[enter image description here][1]Reminder'),
trailing: IconButton(
onPressed: () {
setState(() {
_reminders.removeAt(i);
});
},
icon: Icon(Icons.delete)),
subtitle: Text(text),
tileColor: Colors.lightBlue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
);
}
void _showMenu() {}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [
IconButton(onPressed: _showMenu, icon: const Icon(Icons.list))
],
),
body: Column(
children: <Widget>[
SizedBox(
height: 200,
child: ListView.builder(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(8),
itemBuilder: (context, i) => _buildRow(_reminders[i], i),
itemCount: _reminders.length,
),
),
Expanded(
child: Container(
color: Colors.white,
width: double.infinity,
child: Text('hello'),
),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_addReminder('hello there');
},
child: const Icon(Icons.add),
),
);
}
}
here is ss