Future builder with ListView builder is not scrolling? - flutter

Question

Listview builder in Future builder is not scrollable.
order_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../models_providers/order.dart';
import '../../services/global_methods.dart';
import 'empty_order.dart';
import 'full_order.dart';
class OrderScreen extends StatefulWidget {
static const routeName = '/Order-screen';
const OrderScreen({Key? key}) : super(key: key);
#override
State<OrderScreen> createState() => _OrderScreenState();
}
class _OrderScreenState extends State<OrderScreen> {
#override
void initState() {
super.initState();
}
GlobalMethods globalMethods = GlobalMethods();
#override
Widget build(BuildContext context) {
final orderProvider = Provider.of<OrderProvider>(context);
return FutureBuilder(
future: orderProvider.fetchOrders(),
builder: (context, snapshot) {
if (orderProvider.getOrders.isEmpty) {
return const Scaffold(
body: EmptyOrder(),
);
} else {
return Scaffold(
appBar: AppBar(
title: Text('Order (${orderProvider.getOrders.length})'),
),
body: SingleChildScrollView(
child: Column(
children: [
ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: const AlwaysScrollableScrollPhysics(),
itemCount: orderProvider.getOrders.length,
itemBuilder: (ctx, i) {
return ChangeNotifierProvider.value(
value: orderProvider.getOrders[i],
child: const FullOrder(),
);
},
),
],
),
),
);
}
});
}
}
full_order.dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class FullOrder extends StatelessWidget {
const FullOrder({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final FirebaseAuth _auth = FirebaseAuth.instance;
User? user = _auth.currentUser;
var _uid = user!.uid;
// it enable scrolling on small device
return FutureBuilder(
future: FirebaseFirestore.instance.collection('orders')
.where('userId', isEqualTo: _uid)
.get(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done ||
snapshot.hasData) {
List<QueryDocumentSnapshot> docs = (snapshot.data! as QuerySnapshot).docs;
return ListView.builder(
shrinkWrap: true,
itemCount: docs.length,
itemBuilder: (context, index) {
var data = docs[index];
var dataOrders = data['orders'] as List<dynamic>;
var mappedDataOrders = dataOrders.map((o) => (o as Map<String, dynamic>)).toList();
return Card(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Order Id: ${data['orderId']}'),
],
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Order Date: ${DateFormat('dd/MM/yyyy').format(data['createdAt'].toDate())}'),
Text('Order Time: ${DateFormat('hh:mm a').format(data['createdAt'].toDate())}'),
],),
),
Padding(
padding: const EdgeInsets.all(4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Name: ${data['name']}', style: const TextStyle(fontWeight: FontWeight.bold),),
Text('Contact: ${data['phoneNumber'].toString()}', style: const TextStyle(fontWeight: FontWeight.bold),),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('Delivery Slot', style: TextStyle(fontWeight: FontWeight.bold),),
Text('${data['deliverySlot']}'),
],
),
Column(
children: [
Text('Address: ${data['addressType']}', style: const TextStyle(fontWeight: FontWeight.bold),),
Text('${data['address']}'),
Text('${data['area']}'),
Text('${data['city']}')
],
)
],
),
...List.generate(
mappedDataOrders.length,
(index) {
var order = mappedDataOrders[index];
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(order['title']),
Text(order['unit'].toString()),
Text(order['quantity'].toString()),
Text(order['price'].toString()),
],
),
],
);
}
)
]
)
);
}
);
}
return const Center(
child: SizedBox(
width: 100,
height: 100,
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
strokeWidth: 5
)
)
);
}
);
}
}

Answer 1

I was able to recreate the error that is happening, you just need to remove the Column and the SingleChildScrollView and then you can scroll from the ListView,
another solution would be to disable the scrolling from the ListView and scroll using the SingleChildScrollView , and you can disable scrolling from ListView by adding:
physics: NeverScrollableScrollPhysics()

Answer 2

SingleChildScrollView and Column is not need, ListView is scrollable itself.