dart
Flutter setState
class CatalogueItem extends StatefulWidget {
final Product item;
CatalogueItem({Key key, @required this.item}) : super(key: key);
@override
_CatalogueItemState createState() => _CatalogueItemState();
}
class _CatalogueItemState extends State<CatalogueItem> {
@override
Widget build(BuildContext context) {
final formatDecimal = new NumberFormat("###.0#", "en_US");
final cart = Provider.of<Cart>(context, listen: false);
return Padding(
padding:
const EdgeInsets.only(top: 5.0, left: 13.0, right: 13.0, bottom: 5.0),
child: Container(
decoration: BoxDecoration(
borderRadius: new BorderRadius.circular(15.0),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black12.withOpacity(0.1),
blurRadius: 3.5,
spreadRadius: 0.4,
),
],
),
child: GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (ctx) => ProductDetail(widget.item),
),
);
},
child: ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 5.0, vertical: 2.0),
leading: CachedNetworkImage(
width: 100,
height: 100,
imageUrl: '${widget.item.imageUrl}',
placeholder: (context, url) => Center(
child: SizedBox(
height: 50.0,
width: 50.0,
child: CircularProgressIndicator(
valueColor:
new AlwaysStoppedAnimation<Color>(Color(0xFF00AB50)),
strokeWidth: 2.0,
),
),
),
errorWidget: (context, url, error) => Icon(Icons.error),
),
title: Container(
height: 100,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
/// title, origin, price
Expanded(
flex: 7,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.item.title,
style: TextStyle(
fontFamily: "Gotik",
fontWeight: FontWeight.w400,
fontSize: 13.0),
),
SizedBox(
height: 25.0,
),
Text(
"${formatDecimal.format(widget.item.price)} c",
style: TextStyle(
fontFamily: "Gotik",
fontWeight: FontWeight.bold),
),
],
),
),
/// add to favourite iconButton
Expanded(
flex: 1,
child: Align(
alignment: Alignment.topCenter,
child: IconButton(
onPressed: () {
widget.item.toggleFavoriteStatus();
},
icon: Icon(widget.item.isFavorite
? CupertinoIcons.heart_solid
: CupertinoIcons.heart),
color: Color(0xFF00AB50),
iconSize: 20.0,
),
),
),
]),
),
subtitle: Row(
children: <Widget>[
/// item counter
Container(
width: 120.0,
decoration: BoxDecoration(
color: Colors.white70,
borderRadius: BorderRadius.circular(20.0),
border: Border.all(
color: Colors.black12.withOpacity(0.1),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
/// Decrease of value item
InkWell(
onTap: () {
setState(() {
if (widget.item.quantity != widget.item.measureStep)
widget.item.quantity -= widget.item.measureStep;
});
},
child: Container(
height: 30.0,
width: 20.0,
decoration: BoxDecoration(
border: Border(
right: BorderSide(
color: Colors.black12.withOpacity(0.1),
),
),
),
child: Center(
child: Text(
"-",
style: TextStyle(
fontFamily: "Gotik",
fontWeight: FontWeight.bold,
color: Color(0xFF00AB50),
),
),
),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Text(
"${formatDecimal.format(widget.item.quantity)} ${widget.item.measure}",
style: TextStyle(
fontFamily: "Gotik",
fontWeight: FontWeight.bold,
),
),
),
/// Increasing value of item
InkWell(
onTap: () {
setState(() {
widget.item.quantity += widget.item.measureStep;
});
},
child: Container(
height: 20.0,
width: 20.0,
decoration: BoxDecoration(
border: Border(
left: BorderSide(
color: Colors.black12.withOpacity(0.1),
),
),
),
child: Center(
child: Text(
"+",
style: TextStyle(
fontFamily: "Gotik",
fontWeight: FontWeight.bold,
color: Color(0xFF00AB50),
),
),
),
),
),
],
),
),
SizedBox(width: MediaQuery.of(context).size.width * 0.10),
/// add to cart iconButton
Container(
width: 60.0,
height: 35.0,
decoration: BoxDecoration(
color: widget.item.addedToCart
? Color(0xFFaddfad)
: Color(0xFF00AB50),
borderRadius: BorderRadius.circular(25.0),
border: Border.all(
color: widget.item.addedToCart
? Color(0xFF00AB50)
: Colors.transparent),
),
child: IconButton(
icon: Icon(Icons.shopping_basket),
color: widget.item.addedToCart
? Color(0xFF00AB50)
: Colors.white,
iconSize: 20.0,
onPressed: () {
widget.item.addedToCart
? cart.removeItem(widget.item.id)
: cart.addItem(
widget.item.id,
widget.item.title,
widget.item.price,
widget.item.description,
widget.item.measure,
widget.item.quantity,
widget.item.measureStep,
widget.item.imageUrl);
setState(() {
widget.item.addedToCart = !widget.item.addedToCart;
});
},
)),
],
),
),
),
),
);
}
}
Was this helpful?
Similar Posts
- Evenly Spaced Row in Flutter
- Check if list is empty in Flutter/Dart
- Reverse a list in Flutter or Dart
- Sort a list in ascending and descending order Dart or Flutter
- Remove empty and falsey values from a List in Dart/Flutter
- Check if a String is empty or null in Dart / Flutter
- Delete item from a List in Flutter [Dart]