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: () {},
            )
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

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;
                        });
                      },
                    ),
                  );