Auto Scroll cannot work in checkout page in flutter, if I add new items from sale page using Flutter.This is Sale Page

This is CheckOut Page

New items are added from sale page, and then new items are reach in checkout page. But, scrollable is not working in checkout page, if I add new items from sale page. Please help me. THis is checkout page.

import 'package:flutter/material.dart';

class CheckOutScreen extends StatefulWidget {
  // ignore: prefer_typing_uninitialized_variables
  final cart;
  // ignore: prefer_typing_uninitialized_variables
  final sum;
  const CheckOutScreen({Key? key, this.cart, this.sum}) : super(key: key);

  @override
  State<CheckOutScreen> createState() => _CheckOutScreenState();
}

class _CheckOutScreenState extends State<CheckOutScreen> {
  late ScrollController controller;
  List<String> items = [];

  @override
  void initState() {
    super.initState();
    controller = ScrollController()..addListener(_scrollListener);
  }

  @override
  void dispose() {
    controller.removeListener(_scrollListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        ListView.builder(
          controller: controller,
          itemCount: widget.cart.length,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(widget.cart[index].title),
              trailing: Text(
                "${widget.cart[index].price}",
                style: const TextStyle(
                    color: Colors.redAccent,
                    fontSize: 20,
                    fontWeight: FontWeight.w500),
              ),
              onTap: () {},
            );
          },
          // separatorBuilder: (BuildContext context, int index) {
          //   return const Divider();
          // },
        ),
        const Divider(),
        Text("Total : \$${widget.sum}"),
      ],
    );
  }

  void _scrollListener() {
    // ignore: avoid_print
    print(controller.position.extentAfter);
    if (controller.position.extentAfter < 500) {
      setState(() {
        items.addAll(widget.cart);
      });
    }
  }
}

This is sale page.

import 'package:akin/model/product.dart';
import 'package:akin/model/table_data.dart';
import 'package:flutter/material.dart';

class AkinItem extends StatelessWidget {
  final ValueSetter<Product> valueSetter;
  final TableData data;
  final List<Product> products;
  const AkinItem(
      {Key? key,
      required this.data,
      required this.products,
      required this.valueSetter})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        shrinkWrap: true,
        itemBuilder: ((context, index) {
          return Card(
            color: Colors.blueGrey.shade100,
            elevation: 3.0,
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: ListTile(
                title: RichText(
                  overflow: TextOverflow.ellipsis,
                  text: TextSpan(
                      text: products[index].title,
                      style: TextStyle(
                          color: Colors.blueGrey.shade800,
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0)),
                ),
                trailing: Text("${products[index].price} Ks",
                    style: const TextStyle(
                        color: Colors.redAccent,
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold)),
                onTap: () {
                  valueSetter(products[index]);
                },
              ),
            ),
          );
        }),
        separatorBuilder: (context, index) {
          return const Divider();
        },
        itemCount: products.length);
  }
}

Many items are added in the sale page, this items are showing in checkout page. If above 50 items, show error in ui page. How can I solve this. Please help me.

Edited: All Scroll Functions are deleted. And I added new widget in ListView.builder, give new widget as Expanded. All Fine Ok. Thanks for all.


Solution 1: Fabian

A ListView widget will always take all the space available. If there are more list items than space available on your device, an error like the one in your screenshot occurs.

Try wrapping your ListView in a SizedBox to pass on a specific height.

SizedBox(
  height: 400,
  ListView(
    // your ListView code here
    ),
  )

If you want to use a height that is dependent on your device size, you can also access the MediaQuery object provided by Flutter.