'How to get value from firebase and change InkWell decoration?

I would like to change decoration of InkWell in relation to firestore value. In my case, I have only circularProgressIndicator which appear as if the link was not made...

What is wrong in my code ?

Perhaps you have another solution to manage the display ? I would like to allow access from my database according to the publications . For example if 'MeditationsGuidees" = "Available", then display in a certain way, otherwise display another way.

FutureBuilder<DocumentSnapshot>(
  future: FirebaseFirestore.instance
      .collection('commons')
      .doc('meditationsGuidees')
      .get(),
  builder: (BuildContext context,
      AsyncSnapshot<DocumentSnapshot> snapshot) {
    if (snapshot.hasError) {
      return Text("Impossible de charger les données");
    }

    if (snapshot.connectionState == ConnectionState.done) {
      Map<String, dynamic> data =
          snapshot.data!.data() as Map<String, dynamic>;
      var checkedStatus = data['status'];
      if (checkedStatus.toString() == 'Enable') {
        InkWell(
          child: Container(
            height: 127.0,
            width: double.infinity,
            decoration: BoxDecoration(
              image: DecorationImage(
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.2),
                    BlendMode.dstATop),
                image: AssetImage(
                    "assets/images/fondmeditationsguidees.png"),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 20.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: [
                  Text(
                    'méditations \nguidées'.toUpperCase(),
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 28.0,
                    ),
                  ),
                ],
              ),
            ),
          ),
          onTap: () {
            print("tapped on container");
          },
        );
      } else {
        InkWell(
          child: Container(
            height: 127.0,
            width: double.infinity,
            decoration: BoxDecoration(
              image: DecorationImage(
                colorFilter: ColorFilter.mode(
                    Colors.black.withOpacity(0.2),
                    BlendMode.dstATop),
                image: AssetImage(
                    "assets/images/fondmeditationsguidees.png"),
              ),
            ),
            child: Padding(
              padding: const EdgeInsets.only(left: 20.0),
              child: Row(
                children: [
                  Column(
                    mainAxisAlignment:
                        MainAxisAlignment.center,
                    crossAxisAlignment:
                        CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Méditations \nguidées'
                            .toUpperCase(),
                        style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 28.0,
                        ),
                      ),
                    ],
                  ),
                  Spacer(),
                  Padding(
                    padding: const EdgeInsets.only(
                      bottom: 5.0,
                      right: 5.0,
                    ),
                    child: Column(
                      mainAxisAlignment:
                          MainAxisAlignment.end,
                      children: [
                        Text(
                          'bientôt disponible'
                              .toUpperCase(),
                          style: TextStyle(
                            color: Color(0xff851A1A),
                          ),
                          textAlign: TextAlign.right,
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
          onTap: () {
            print("tapped on container");
          },
        );
      }
    }

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(
            height: 10.0,
            width: 10.0,
            child: CircularProgressIndicator(
              color: _primaryRed,
            ),
          ),
          Text(
            'Chargement en cours...',
            textAlign: TextAlign.left,
          ),
        ],
      ),
    );


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source