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 !
2
Answers
Wrap every
ListTile
with Cardtry adding this paramater in
ListView
.