1

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

          );
        }
    );
  }
}
1
  • SingleChildScrollView and ListView are both scrollable, you can use primary:false for inner widget or NeverScrollableScrollPhysics. Also, you don't need to have Listview, you can use Column instead and make sure to handle snapshot.hasData ,snapshot.error, Mar 6, 2022 at 6:23

2 Answers 2

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

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

1
  • 1
    It was not scrolling that's why I have added it.
    – Tushar Rai
    Mar 5, 2022 at 18:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.