[英]How to change the text color when the user tap on it ? Flutter - Firestore - StreamBuilder
I use Flutter with firestore to collect votes, and I'm struggling with UI.我使用 Flutter 和 firestore 来收集选票,但我在 UI 方面遇到了困难。 What I want is when the user tap on the option, something change on the text or the border ...
我想要的是当用户点击该选项时,文本或边框上的某些内容会发生变化......
This is what I have这就是我所拥有的
This is what I need这就是我需要的
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"),
),
);
}
Try following :尝试以下:
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));
And in而在
onTap: () {
setState(() {
selectedItem = selectedIndex;
});
}
int selectedItem = -1;
Widget _buildListItem(BuildContext context, DocumentSnapshot document) {小部件 _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;
});
},
);
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.