Auto Scroll cannot work in checkout page in flutter, if I add new items from sale page using Flutter.This is Sale 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.
