'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 |
|---|
