Flutter: Highlight selected items in a ListView

Last updated on November 7, 2020 The Frog Loading... 2 comments

This article shows you how to highlight selected items in a ListView in a Flutter application.


The steps:

1. Add a value called “isSelected” to each item in the list. By default, “isSelected” is set to “false”.

2. When the user taps an item, its “isSelected” value will switch between “true” and “false”, like this:

  myList[index]["isSelected"] = !myList[index]["isSelected"];

A Complete Example

Some lines of code are worth more than a thousand words.

import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),

class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> {
  // Generating a long list to fill the ListView
  final List<Map> data = List.generate(100,
      (index) => {'id': index, 'name': 'Item $index', 'isSelected': false});

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        body: SafeArea(
            child: ListView.builder(
          itemCount: data.length,
          itemBuilder: (BuildContext ctx, index) {
            return Card(
                margin: EdgeInsets.all(10),
                    RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),

                // The color depends on this is selected or not
                color: data[index]['isSelected'] == true ? Colors.amber : Colors.white,
                child: ListTile(
                  onTap: (){
                    // if this item isn't selected yet, "isSelected": false -> true
                    // If this item already is selected: "isSelected": true -> false
                    setState(() {
                      data[index]['isSelected'] = !data[index]['isSelected'];
                  leading: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text(data[index]['id'].toString())),
                  title: Text(data[index]['name']),

Check the result:

That’s it. Happy Fluttering 🙂

Notify of
Inline Feedbacks
View all comments
7 months ago

Thank you sir for great articles about flutter

A Goodman
A Goodman
7 months ago
Reply to  noshin

Thank you 🙂

Related Articles