Обновление в списке только выбранного цвета ListTile

Question

Как мне обновить цвет только ListTile, который нажал?

Что бы я ни пытался, он просто меняет цвет всех плиток при нажатии. Как я могу получить данные и изменить цвет?

class _DesignState extends State<Design> {
   var status=0;
  var score =0;
 Color getContainerColor() {
    if (status == 0) {
      return Colors.white;
    } else if (status == 1) {
      return Colors.green;
    } else {
      return Colors.red;
    }


  Widget _buildListItem(BuildContext context, DocumentSnapshot data) {
    final record = Record.fromSnapshot(data);
    final record1=  Firestore.instance.collection('creds').document('123').get().then((DocumentSnapshot ds) {
      var s =Record.fromSnapshot(ds);
      score= s.score;
    });

        child: ListTile(
          title: Text(record.name),
          trailing: Text(record.score.toString()),

          onTap: () { record.reference.updateData({'score': FieldValue.increment(score)}),
          setState(){
                status=1;

Answer 1

Вы уже на правильном пути, но похоже, что вы управляете состоянием всех элементов списка в одном и том же StatefulWidget .

Вместо этого вы просто нужно разделить их так, чтобы каждый из ваших пользовательских ListTile имел его состояние. Загрузка данных может происходить в родительском компоненте вашей самостоятельной сборки ListTile.

---

Я предоставлю вам небольшой пример приложения. Следующий пример не использует Firebase, но для применения этих изменений в вашем приложении не должно возникнуть никаких проблем.

Вам просто нужно выполнить выборку данных внутри родительского компонента и передать параметр score вашего пример для MyListTile - так же, как заголовок в примере ниже.

Это сам по себе runnablbe, вы можете просто скопировать его в пустой проект Flutter:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            MyListTile(title: 'First'),
            MyListTile(title: 'Second'),
            MyListTile(title: 'Third'),
          ],
        ),
      ),
    );
  }
}

class MyListTile extends StatefulWidget {
  final String title;

  MyListTile({this.title});

  @override
  _MyListTileState createState() => _MyListTileState();
}

class _MyListTileState extends State<MyListTile> {
  int status = 0;

  get tileColor {
    switch(status) {
      case 0: {
        return Colors.white;
      }
      case 1: {
        return Colors.green;
      }
      default: {
        return Colors.red;
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: tileColor,
      child: ListTile(
        title: Text(widget.title),
        subtitle: Text('Status: $status'),
        onTap: () => setState(() {
          status++;
        }),
      ),
    );
  }
}