Как изменить цвет текста, когда пользователь нажимает на него? Флаттер - Пожарный магазин - StreamBuilder

Question

Я использую Flutter с firestore для сбора голосов, и я борюсь с пользовательским интерфейсом, что я хочу, это когда пользователь нажимает на опцию, что-то меняет текст или границу ...

это это то, что у меня есть 1

это то, что мне нужно 2

, чтобы добавить дополнительную информацию, это мой код:

Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
return ListTile(
  title: Container(
    margin: EdgeInsets.all(8.0),
    padding: EdgeInsets.fromLTRB(210, 0.0, 0.0, 0.0),
    decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
            color: Colors.pink[800], // set border color
            width: 3.0), // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [
          BoxShadow(
              blurRadius: 5,
              color: Colors.black,
              offset: Offset(0.5, 1))
        ] // make rounded corner of border
        ),
      child: Row(
          children: <Widget>[
        Container(
            child: Text(
              document['rep'],
              style: TextStyle(
                fontSize: 50.0,
                color: Colors.black,
              ),
            ),
        ),
          ]
      ),
  ),



  onTap: () {
    Firestore.instance.runTransaction(
            (transaction) async {
      DocumentSnapshot freshSnap =
      await transaction.get(document.reference);
      await transaction.update(freshSnap.reference, {
        'votes': freshSnap['votes'] + 1,
      });
    });

  },

);

}

@ переопределить сборку виджета (контекст BuildContext) {return Scaffold (body: StreamBuilder (stream: Firestore.instance.collection ('questions'). Snapshots (), построитель: (context, snapshot) ) {if (! snapshot.hasData) возвращает const Text ('Загрузка ...');

        return ListView.builder(
            padding: EdgeInsets.fromLTRB(50.0, 300.0, 50.0, 0.0),
            itemExtent: 100.0,
            itemCount: snapshot.data.documents.length,
            itemBuilder: (context, index) =>
                _buildListItem(context, snapshot.data.documents[index]),
          );
      }),


  floatingActionButton: FloatingActionButton(
    onPressed: () {
      Navigator.push(
          context, MaterialPageRoute(builder: (context) => new Home()));
    },
    child: Text("Home"),
  ),

);

}

большое спасибо!

Answer 1

Попробуйте следующее:

int selectedItem = -1; // добавить в вашем штате

В вашем списке добавить следующее:

selectedItem == index
            ? Container(color: Colors.white)
            : Container(color: Colors.red));

И в

onTap: () {
 setState(() {
      selectedItem = selectedIndex;
    });
}

Answer 2

    int selectedItem = -1;

Виджет _buildListItem (контекст BuildContext, документ DocumentSnapshot) {

return ListTile(
  title: Container(
    margin: EdgeInsets.all(8.0),
    padding: EdgeInsets.fromLTRB(210, 0.0, 0.0, 0.0),
    decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
            color: Colors.pink[800], // set border color
            width: 3.0), // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [
          BoxShadow(
              blurRadius: 5,
              color: Colors.black,
              offset: Offset(0.5, 1))
        ] // make rounded corner of border
        ),
      child: Row(
          children: <Widget>[
            selectedItem = selectedIndex ?
        Container(
            color: Colors.red,
            child: Text(
              document['rep'],
              style: TextStyle(
                fontSize: 50.0,
                color: Colors.black,
              ),
            ),
        ) :
            Container(
              color: Colors.white,
            child: Text(
                document['rep'],
                style: TextStyle(
                fontSize: 50.0,
                color: Colors.black,
                    ),
                ),
            ),
          ]
      ),
  ),

  onTap: () {
    Firestore.instance.runTransaction(
            (transaction) async {
      DocumentSnapshot freshSnap =
      await transaction.get(document.reference);
      await transaction.update(freshSnap.reference, {
        'votes': freshSnap['votes'] + 1,
      });
    });

    setState(() {
      selectedItem = selectedIndex;
    });


  },

);

}