Update only Selected Position text Color On List View builder on Flutter

Issue

Hi I want update text color inside list View builder only for selected item. How can we do this.??

I just want to update selected text color and previous item color will be black.

this is my code :

my first widget is statefulWidget

 Expanded(
            flex: 6,
            child: ListView.builder(
              itemCount: languageValue.length,
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              physics: const BouncingScrollPhysics(),
              itemBuilder: (ctx, index) {
                LanguageCode lang = languageValue[index];
                return _LanguageItemSelection(
                  languageName: lang.value,
                  isSelected: index,
                  onLanguageSelect: () {
                    setState(() {
                      _langValue = lang.value!;
                    });
                    debugPrint('Language Value => ${lang.code}');
                  },
                );
              },
            ),
          ),

My Second LanguageSelectedItem :

class _LanguageItemSelection extends StatelessWidget {
  _LanguageItemSelection({
    Key? key,
    this.languageName,
    this.onLanguageSelect,
    this.isSelected,
  }) : super(key: key);

  String? languageName;
  VoidCallback? onLanguageSelect;
  int? isSelected;
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    debugPrint('index => ${isSelected}');
    return Column(
      children: [
        const SizedBox(
          height: 5,
        ),
        InkWell(
          onTap: onLanguageSelect,
          child: Text(
            languageName!,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: isSelected == _selectedIndex ? Colors.blue : Colors.black,
            ),
          ),
        ),
        const SizedBox(
          height: 5,
        ),
        const Divider(
          color: Colors.grey,
          thickness: 0.8,
        ),
      ],
    );
  }
}

Solution

I have find the solution from afgprogrammer

I have create function inside statefulwidget and its work

_LanguageItemSelection(String name, int index) {
    return InkWell(
      onTap: () {
        setState(() {
          selectedLanguage = index;
          _langValue = name;
        });
      },
      child: Column(
        children: [
          const SizedBox(
            height: 5,
          ),
          Text(
            name,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 20,
              color: selectedLanguage == index ? Colors.blue : Colors.black,
            ),
          ),
          const SizedBox(
            height: 5,
          ),
          const Divider(
            color: Colors.grey,
            thickness: 0.8,
          ),
        ],
      ),
    );
  }
}

Answered By – Mustafa Shaikh

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)