How to create a screen with a condition in flutter dart - flutter

Question

I need a little help with flutter. I want to make a screen with a condition. The condition is if we have data show that data from firebase but if we don't have data show a button that says add data. The codes below show data from firebase but when we have no data that shows nothing.
Here are my codes that show a black screen.
#override
Widget build(BuildContext context) {
return GetBuilder<MapLogic>(
builder: (mapLogic) => Scaffold(
// backgroundColor: Colors.red,
body: StreamBuilder<QuerySnapshot>(
stream:
FirebaseFirestore.instance.collection('collection').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasData) {
if (snapshot.data!.docs.isEmpty) {
return Padding(
padding: const EdgeInsets.only(top: 30),
child: InkWell(
onTap: () async {
generalController.focusOut(context);
Get.to(const AddNewVehicle());
},
child: Container(
height: 55,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Styles.primaryColor,
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Styles.primaryColor.withOpacity(0.19),
blurRadius: 40,
spreadRadius: 0,
offset: const Offset(
0, 22), // changes position of shadow
),
],
),
child: const Center(
child: Text(
"Add A Vehicle",
// style: state.buttonTextStyle
),
),
),
),
);
} else {
return FadedSlideAnimation(
child: Wrap(
children:
List.generate(snapshot.data!.docs.length, (index) {
if (snapshot.data!.docs[index].get('driver_id') ==
mapLogic.currentDriverData?.get('id')) {
return Padding(
padding: const EdgeInsets.fromLTRB(15, 30, 15, 0),
child: InkWell(
onTap: () {},
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(19),
boxShadow: [
BoxShadow(
color: customThemeColor.withOpacity(0.19),
blurRadius: 40,
spreadRadius: 0,
offset: const Offset(
0, 22), // changes position of shadow
),
],
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
children: [
///---image
Hero(
tag:
'${snapshot.data!.docs[index].get('image')}',
child: Material(
child: Container(
height: 80,
width: 80,
decoration: const BoxDecoration(
color: Colors.grey,
shape: BoxShape.circle),
child: ClipRRect(
borderRadius:
BorderRadius.circular(40),
child: Image.network(
'${snapshot.data!.docs[index].get('image')}',
fit: BoxFit.cover,
),
),
),
),
),
///---price
Expanded(
child: Align(
alignment:
Alignment.center,
child: Container(
width: 70,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(
19),
color:
customThemeColor),
child: Padding(
padding:
const EdgeInsets
.fromLTRB(
0, 2, 0, 2),
child: Center(
child: Text(
'\$${snapshot.data!.docs[index].get('dis_price')}',
style: state
.priceTextStyle!
.copyWith(
color: Colors
.white)),
),
),
),
),
),
],
),
],
),
),
))
],
),
),
),
),
);
} else {
return const SizedBox();
}
}),
),
beginOffset: const Offset(0, 0.3),
endOffset: const Offset(0, 0),
slideCurve: Curves.linearToEaseOut,
);
}
} else {
return Text(
'Record not found',
textAlign: TextAlign.center,
style: GoogleFonts.poppins(
fontSize: 20,
color: Colors.black,
fontWeight: FontWeight.w600),
);
}
}),
),
);
}

Answer 1

You can follow this pattern but I will suggest following docs' one
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done &&
!snapshot.hasData) {
return Text("could not find any data");
}
if (snapshot.hasData) {...}
if (snapshot.hasError) return Text("error");
return CircularProgressIndicator();
}