單擊按鈕時如何使按鈕變為綠色

Question

數據全部使用 streamBuilder 顯示，我通過添加 onTap 按鈕使用返回 ListView.Builder

 child: StreamBuilder<QuerySnapshot>(
                stream: FirebaseFirestore.instance
                    .collection('prayers')
                    .orderBy('prayerId')
                    .snapshots(),
                builder: (context, snapshot) {
                  if (!snapshot.hasData) {
                    return const CircularProgressIndicator();
                  }
                    itemCount: documents.length,
                    itemBuilder: (context, index) {
                      final allPrayers = documents.elementAt(index);
                      return ListTile(
                        title: Text(allPrayers["prayerName"]),
                        onTap: () {

這是 OnTap:() { 中的 showModalBottomSheet

showModalBottomSheet(
                            context: context,
                            builder: (BuildContext ctx) {
                              return Padding(
                                padding: EdgeInsets.only(
                                  top: 20,
                                  left: 20,
                                  right: 20,
                                  bottom:
                                      MediaQuery.of(ctx).viewInsets.bottom + 20,
                                ),
                                child: Column(
                                  children: [
                                    ElevatedButton(
                                      child: const Text('Prayed On Time'),
                                      onPressed: () async {
                                        QuickAlert.show(
                                          context: context,
                                          type: QuickAlertType.success,
                                          text: "Prayed is recorded!",
                                        );
                                        final currentUser =
                                            AuthService.firebase().currentUser!;
                                        final userId = currentUser.id;
                                        final record = RecordPrayer(
                                          dailyPrayerStatus: prayedOnTime,
                                          dailyPrayerDate:
                                              DateFormat('yyyy-MM-dd')
                                                  .format(_selectedDay),
                                          userId: userId,
                                          prayerId: allPrayers.id,
                                          prayerName: allPrayers["prayerName"],
                                        );
                                        final existingRecord =
                                            await FirebaseFirestore.instance
                                                .collection("record_prayer")
                                                .where("userId",
                                                    isEqualTo: userId)
                                                .where("prayerId",
                                                    isEqualTo: allPrayers.id)
                                                .where("dailyPrayerDate",
                                                    isEqualTo: DateFormat(
                                                            'yyyy-MM-dd')
                                                        .format(_selectedDay))
                                                .get();
                                        if (existingRecord.docs.isNotEmpty) {
                                          updateRecordDailyPrayer(record,
                                              existingRecord.docs.first.id);
                                        } else {
                                          recordDailyPrayer(record);
                                        }
                                      },
                                    ),

當用戶選擇 zohor 並單擊 showModalBottomSheet 中的“Prayed On Time”ElevatedButton 並且 zohor 按鈕變為綠色時，如何從 ListView.Builder 制作按鈕 onTap

Answer 1

您可以使用ValueNotifier來捕捉您的按鈕是否被點擊。 例子：

ValueNotifier<bool> isClickedNotifier = ValueNotifier<bool>(false);

ValueListenableBuilder<bool>(
  valueListenable: isClickedNotifier,
  builder: (_, isClickedValue, child) {
    return ElevatedButton(
      style: isClickedValue ? green : blue,
      child: const Text('Prayed On Time'),
      onPressed: () async {
        isClickedNotifier.value = true;
        ...
      }
    );
  }
)

不要忘記處理isClickedNotifier ！

Answer 2

像這樣將 Padding 小部件包裝在 StatefulBuilder 中：

return StatefulBuilder(
    builder: (BuildContext context, StateSetter innerState){ 
    return Padding(child:...);
});

完整示例：

return StatefulBuilder(builder: (BuildContext context, StateSetter innerState) {
    var myColor = Colors.blue; //Color when it is not tapped
    return Padding(child:
        ElevatedButton(child:Text("Prayed On Time"), 
            style: ElevatedButton.styleFrom(backgroundColor:myColor),
            onPressed:(){
                innerState((){
                   myColor = Colors.green;
                });
            })
        })
    );
});