用户点击时如何更改文本颜色?Flutter-Firestore-StreamBuilder [英] How to change the text color when the user tap on it ? Flutter - Firestore - StreamBuilder

问题描述

我在Flustore上使用Flutter来收集选票，而我在UI方面很挣扎.我想要的是，当用户点击选项时，文本或边框上的内容会发生变化...

I use Flutter with firestore to collect votes, and I'm struggling with UI. What I want is when the user tap on the option, something change on the text or the border ...

这就是我所拥有的
这就是我所需要的

要添加更多信息，这是我的代码:

To add more information, this is my code:

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

  },

);
}

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
          stream: Firestore.instance.collection('questions').snapshots(),
          builder: (context, snapshot) {
            if (!snapshot.hasData) return const Text('Loading ...');

            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"),
      ),

    );
  }

推荐答案

尝试以下操作:

int selectedItem = -1;//添加您的状态

int selectedItem = -1; //add in your state

在您的列表中添加以下内容:

In your list add following :

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

在

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

这篇关于用户点击时如何更改文本颜色?Flutter-Firestore-StreamBuilder的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！