I wish to create a scrollable ListView in a Flutter app. I attempted copying pattern code that makes use of ListView from this tutorial. I modified the record of things to make it longer than the display. It’s scrollable within the browser when utilizing the embedded model within the tutorial, but it surely doesn’t scroll once I construct an iOS app (utilizing Visible Studio Code) and check it in an iOS simulator.
Right here is my modified code:
import 'bundle:flutter/materials.dart';
class Product {
const Product({required this.identify});
closing String identify;
}
typedef CartChangedCallback = Perform(Product product, bool inCart);
class ShoppingListItem extends StatelessWidget {
ShoppingListItem({
required this.product,
required this.inCart,
required this.onCartChanged,
}) : tremendous(key: ObjectKey(product));
closing Product product;
closing bool inCart;
closing CartChangedCallback onCartChanged;
Shade _getColor(BuildContext context) {
// The theme is determined by the BuildContext as a result of totally different
// components of the tree can have totally different themes.
// The BuildContext signifies the place the construct is
// going down and due to this fact which theme to make use of.
return inCart //
? Colours.black54
: Theme.of(context).primaryColor;
}
TextStyle? _getTextStyle(BuildContext context) {
if (!inCart) return null;
return const TextStyle(
coloration: Colours.black54,
ornament: TextDecoration.lineThrough,
);
}
@override
Widget construct(BuildContext context) {
return ListTile(
onTap: () {
onCartChanged(product, inCart);
},
main: CircleAvatar(
backgroundColor: _getColor(context),
baby: Textual content(product.identify[0]),
),
title: Textual content(
product.identify,
fashion: _getTextStyle(context),
),
);
}
}
class ShoppingList extends StatefulWidget {
const ShoppingList({required this.merchandise, tremendous.key});
closing Record<Product> merchandise;
// The framework calls createState the primary time
// a widget seems at a given location within the tree.
// If the mother or father rebuilds and makes use of the identical kind of
// widget (with the identical key), the framework re-uses
// the State object as an alternative of making a brand new State object.
@override
State<ShoppingList> createState() => _ShoppingListState();
}
class _ShoppingListState extends State<ShoppingList> {
closing _shoppingCart = <Product>{};
void _handleCartChanged(Product product, bool inCart) {
setState(() {
// When a person modifications what's within the cart, you want
// to vary _shoppingCart inside a setState name to
// set off a rebuild.
// The framework then calls construct, under,
// which updates the visible look of the app.
if (!inCart) {
_shoppingCart.add(product);
} else {
_shoppingCart.take away(product);
}
});
}
@override
Widget construct(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Textual content('Purchasing Record'),
),
physique: ListView(
padding: const EdgeInsets.symmetric(vertical: 8),
kids: widget.merchandise.map((product) {
return ShoppingListItem(
product: product,
inCart: _shoppingCart.accommodates(product),
onCartChanged: _handleCartChanged,
);
}).toList(),
),
);
}
}
void predominant() {
runApp(const MaterialApp(
title: 'Purchasing App',
dwelling: ShoppingList(
merchandise: [
Product(name: 'Eggs'),
Product(name: 'Flour'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
Product(name: 'Chocolate chips'),
],
),
));
}