How to make the button turn green when upon clicking it

Question

the data is display all using the streamBuilder and I'm using the return ListView.Builder by adding the onTap button

 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: () {

This is the showModalBottomSheet inside the OnTap:() {

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

How do I make the button onTap from the ListView.Builder when user choose zohor and has click the "Prayed On Time" ElevatedButton in showModalBottomSheet and the zohor button turn green

score 0 · Answer 1 · answered Jan 31 '23 at 04:11

You can use ValueNotifier to catch if your button was clicked or not. Example:

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

Don't forget to dispose isClickedNotifier!

score 0 · Answer 2 · answered Jan 31 '23 at 04:20

Wrap your Padding widget inside StatefulBuilder like this:

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

Full Example:

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

I want the button on subuh, zohor, asar, maghrib and ishak turn green when the use click the button "Prayed On Time" — Syahir Isyraf, Jan 31 '23 at 04:59

How to make the button turn green when upon clicking it

2 Answers2