I have created Bottom Navigation bar in flutter using the tutorial from https://medium.flutterdevs.com/custom-animated-bottomnavigation-bar-in-flutter-65293e231e4a
The problem is the bottom navigation hides the screen below it. Refer image: https://postimg.cc/v1q2YWn2/
The code is
@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder(
stream: _db
.collection('orders')
.where('driverId', isEqualTo: sp.getString('uid'))
.where('status', whereIn: ['Accepted', 'Picked Up', 'Ready For Pickup'])
.orderBy('timeStamp', descending: true)
.snapshots(),
builder: (BuildContext context,
AsyncSnapshot<QuerySnapshot> OrdersSnapshot) {
if (!OrdersSnapshot.hasData) return const Text('Loading...');
return ListView.builder(
itemCount: OrdersSnapshot.data!.docs.length,
itemBuilder: (context, index) {
var documentSnapshot = OrdersSnapshot.data!.docs[index]
.data() as Map<String, dynamic>;
return Padding(
padding: EdgeInsets.symmetric(vertical: 10),
child: Container(
width: MediaQuery.of(context).size.width,
height: 260,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: documentSnapshot['status'] == 'Accepted' ? hexStringToColor("FBAF03") : Colors.black38, width: 1)),
child: Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(6),
border: Border.all(
color: Colors.black12)),
child: Image.network(
'https://indiaeducationdiary.in/wp-content/uploads/2020/10/IMG-20201024-WA0014.jpg')),
),
Container(
width:
MediaQuery.of(context).size.width * 0.70,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
FutureBuilder(
future: FirebaseFirestore.instance
.doc(documentSnapshot['vid'].path)
.get(),
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot>
snapshot) {
if (snapshot.hasError) {
return const Text(
"Something went wrong");
}
if (snapshot.hasData &&
!snapshot.data!.exists) {
return const Text(
"Document doesn't exist");
} else if (snapshot
.connectionState ==
ConnectionState.done) {
Map<String, dynamic> data =
snapshot.data!.data()
as Map<String, dynamic>;
return Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
data['name'],
style: GoogleFonts.poppins(
fontWeight:
FontWeight.bold,
fontSize: 14),
overflow:
TextOverflow.ellipsis,
),
Text(
data['address'],
style: GoogleFonts.poppins(
fontWeight:
FontWeight.w400,
fontSize: 11,
color: hexStringToColor(
'636567')),
overflow:
TextOverflow.ellipsis,
maxLines: 1,
),
],
);
}
return const Text("Loading...");
}),
],
),
),
],
),
const DottedLine(
dashColor: Colors.black26,
dashGapLength: 10,
),
Padding(
padding: EdgeInsets.all(20),
child: Container(
width: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.account_circle),
SizedBox(
width: 7,
),
FutureBuilder(
future: FirebaseFirestore.instance
.doc(documentSnapshot['uid']
.path)
.get(),
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot>
snapshot) {
if (snapshot.hasError) {
return Text(
"Something went wrong");
}
if (snapshot.hasData &&
!snapshot.data!.exists) {
return Text(
"Document doesn't exist");
} else if (snapshot
.connectionState ==
ConnectionState.done) {
Map<String, dynamic> data =
snapshot.data!.data()
as Map<String, dynamic>;
return Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
data['fullname'] ' | ',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight:
FontWeight.w500,
color:
hexStringToColor(
'636567')),
),
],
);
}
return Text("Loading...");
}),
SizedBox(width: 3),
Text(
'#' documentSnapshot['orderId'],
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w500,
color:
hexStringToColor('636567')),
)
],
),
Container(
width: MediaQuery.of(context).size.width *
0.90,
child: Row(
children: [
Icon(Icons.location_on_rounded),
SizedBox(
width: 7,
),
Expanded(
child: Text(
documentSnapshot['address']
['address'],
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w500,
color: hexStringToColor(
'636567')),
overflow: TextOverflow.clip,
maxLines: 1,
),
),
],
),
),
SizedBox(
height: 20,
),
Row(
children: [
Container(
decoration: BoxDecoration(
color: hexStringToColor('aeaeae'),
borderRadius:
BorderRadius.circular(5)),
width: 80,
height: 20,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
'3 Items',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight:
FontWeight.w500),
)
],
),
),
SizedBox(
width: 20,
),
Container(
decoration: BoxDecoration(
color: hexStringToColor('aeaeae'),
borderRadius:
BorderRadius.circular(5)),
width: 80,
height: 20,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
"₹${documentSnapshot[
'grandTotal']}",
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight:
FontWeight.w500),
)
],
),
),
],
),
Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
onPressed: () => {
PreferenceUtils.setString("orderId", documentSnapshot['orderId']),
Navigator.push(
context,
SizeTransitionDownToUp(const OrderDetails()),
)
},
style: ElevatedButton.styleFrom(
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(5)),
textStyle: GoogleFonts.poppins(
fontWeight: FontWeight.w400,
fontSize: 14)),
child: const Text('View Details'),
),
)
],
),
),
)
],
),
),
);
});
}));
}
I cannot scroll to the bottom. Give suggestions
CodePudding user response：
Please try the
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.only(bottom: 100.0),
child: StreamBuilder(
stream: _db
.collection('orders')
.where('driverId', isEqualTo: sp.getString('uid'))
.where('status', whereIn: ['Accepted', 'Picked Up', 'Ready For Pickup'])
.orderBy('timeStamp', descending: true)
.snapshots(),
builder: (BuildContext context,
AsyncSnapshot<QuerySnapshot> OrdersSnapshot) {
if (!OrdersSnapshot.hasData) return const Text('Loading...');
return ListView.builder(
itemCount: OrdersSnapshot.data!.docs.length,
itemBuilder: (context, index) {
var documentSnapshot = OrdersSnapshot.data!.docs[index]
.data() as Map<String, dynamic>;
return Padding(
padding: EdgeInsets.symmetric(vertical: 10),
child: Container(
width: MediaQuery.of(context).size.width,
height: 260,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: documentSnapshot['status'] == 'Accepted' ? hexStringToColor("FBAF03") : Colors.black38, width: 1)),
child: Column(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 10),
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(6),
border: Border.all(
color: Colors.black12)),
child: Image.network(
'https://indiaeducationdiary.in/wp-content/uploads/2020/10/IMG-20201024-WA0014.jpg')),
),
Container(
width:
MediaQuery.of(context).size.width * 0.70,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
FutureBuilder(
future: FirebaseFirestore.instance
.doc(documentSnapshot['vid'].path)
.get(),
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot>
snapshot) {
if (snapshot.hasError) {
return const Text(
"Something went wrong");
}
if (snapshot.hasData &&
!snapshot.data!.exists) {
return const Text(
"Document doesn't exist");
} else if (snapshot
.connectionState ==
ConnectionState.done) {
Map<String, dynamic> data =
snapshot.data!.data()
as Map<String, dynamic>;
return Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
data['name'],
style: GoogleFonts.poppins(
fontWeight:
FontWeight.bold,
fontSize: 14),
overflow:
TextOverflow.ellipsis,
),
Text(
data['address'],
style: GoogleFonts.poppins(
fontWeight:
FontWeight.w400,
fontSize: 11,
color: hexStringToColor(
'636567')),
overflow:
TextOverflow.ellipsis,
maxLines: 1,
),
],
);
}
return const Text("Loading...");
}),
],
),
),
],
),
const DottedLine(
dashColor: Colors.black26,
dashGapLength: 10,
),
Padding(
padding: EdgeInsets.all(20),
child: Container(
width: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.account_circle),
SizedBox(
width: 7,
),
FutureBuilder(
future: FirebaseFirestore.instance
.doc(documentSnapshot['uid']
.path)
.get(),
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot>
snapshot) {
if (snapshot.hasError) {
return Text(
"Something went wrong");
}
if (snapshot.hasData &&
!snapshot.data!.exists) {
return Text(
"Document doesn't exist");
} else if (snapshot
.connectionState ==
ConnectionState.done) {
Map<String, dynamic> data =
snapshot.data!.data()
as Map<String, dynamic>;
return Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
data['fullname'] ' | ',
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight:
FontWeight.w500,
color:
hexStringToColor(
'636567')),
),
],
);
}
return Text("Loading...");
}),
SizedBox(width: 3),
Text(
'#' documentSnapshot['orderId'],
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w500,
color:
hexStringToColor('636567')),
)
],
),
Container(
width: MediaQuery.of(context).size.width *
0.90,
child: Row(
children: [
Icon(Icons.location_on_rounded),
SizedBox(
width: 7,
),
Expanded(
child: Text(
documentSnapshot['address']
['address'],
style: GoogleFonts.poppins(
fontSize: 12,
fontWeight: FontWeight.w500,
color: hexStringToColor(
'636567')),
overflow: TextOverflow.clip,
maxLines: 1,
),
),
],
),
),
SizedBox(
height: 20,
),
Row(
children: [
Container(
decoration: BoxDecoration(
color: hexStringToColor('aeaeae'),
borderRadius:
BorderRadius.circular(5)),
width: 80,
height: 20,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
'3 Items',
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight:
FontWeight.w500),
)
],
),
),
SizedBox(
width: 20,
),
Container(
decoration: BoxDecoration(
color: hexStringToColor('aeaeae'),
borderRadius:
BorderRadius.circular(5)),
width: 80,
height: 20,
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
Text(
"₹${documentSnapshot[
'grandTotal']}",
style: GoogleFonts.poppins(
fontSize: 10,
fontWeight:
FontWeight.w500),
)
],
),
),
],
),
Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
onPressed: () => {
PreferenceUtils.setString("orderId", documentSnapshot['orderId']),
Navigator.push(
context,
SizeTransitionDownToUp(const OrderDetails()),
)
},
style: ElevatedButton.styleFrom(
elevation: 3,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(5)),
textStyle: GoogleFonts.poppins(
fontWeight: FontWeight.w400,
fontSize: 14)),
child: const Text('View Details'),
),
)
],
),
),
)
],
),
),
);
});
}),
));
}