Flutter List View, Selected ListTile Error - flutter

Question

I created a select country page and I is created using ListView inside a sizedBox with a specific height.
The error is i can select any country and when i scroll down i can still the see the blank selected ListTile in blue color.
I searched if there are other options for this, but was unable to find any.
screenshot 1
screenshot 2
Help is appreciated.
class SelectCountryScreen extends StatefulWidget {
const SelectCountryScreen({super.key});
#override
State<SelectCountryScreen> createState() => _SelectCountryScreenState();
}
class _SelectCountryScreenState extends State<SelectCountryScreen> {
// list for filtered countries
List<Country> _filteredCountries = [];
final List<Country> countries = Countries.all();
TextEditingController searchController = TextEditingController();
int _selectedIndex = -1;
#override
void initState() {
super.initState();
_filteredCountries = countries;
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Theme.of(context).backgroundColor,
body: Container(
margin: const EdgeInsets.all(24),
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: Column(
children: [
SizedBox(
height: 500,
child: ListView.builder(
itemCount: _filteredCountries.length,
itemBuilder: ((context, index) {
return Container(
margin:
const EdgeInsets.symmetric(vertical: 2, horizontal: 1),
child: ListTile(
visualDensity: const VisualDensity(vertical: -3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
contentPadding: const EdgeInsets.symmetric(
vertical: 0,
horizontal: 15,
),
title: Text(
_filteredCountries[index].name!,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: _selectedIndex == index
? Colors.white
: Theme.of(context)
.textTheme
.bodySmall!
.color,
),
),
leading: Text(
_filteredCountries[index].flagIcon!,
style: const TextStyle(fontSize: 26),
),
selectedTileColor: Theme.of(context).primaryColor,
selected: _selectedIndex == index ? true : false,
selectedColor: Theme.of(context).primaryColor,
onTap: () {
setState(() {
_selectedIndex = index;
});
},
),
);
}),
),
),
PrimaryButton(
label: "Next",
onPressed: () {},
)
],
),
),
);
}
}

Answer 1

Move the selected color from ListTile to parent Container like this:
Container(
decoration: BoxDecoration(
color: _selectedIndex == index ? Theme.of(context).primaryColor : null,
borderRadius: const BorderRadius.all(Radius.circular(5)),
),
margin:
const EdgeInsets.symmetric(vertical: 2, horizontal: 1),
child: ListTile(
visualDensity: const VisualDensity(vertical: -3),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
contentPadding: const EdgeInsets.symmetric(
vertical: 0,
horizontal: 15,
),
title: Text(
_filteredCountries[index].name!,
style:Theme.of(context).textTheme.bodySmall?.copyWith(
color: _selectedIndex == index
? Colors.white
: Theme.of(context).textTheme
.bodySmall!
.color,
),
),
leading: Text(
_filteredCountries[index].flagIcon!,
style: const TextStyle(fontSize: 26),
),
// selectedTileColor: Theme.of(context).primaryColor,
// selected: _selectedIndex == index ? true : false,
selectedColor: Theme.of(context).primaryColor,
onTap: () {
setState(() {
_selectedIndex = index;
});
},
),
);