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

          );
        }
    );
  }
}

CodePudding user response：

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()

CodePudding user response：

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