nekoya/app
nekoya/app
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

Add discount label to product box

Browse source
This commit is contained in:
Moe Poi ~ 2023-11-09 23:48:59 +07:00
parent 4593860a74
commit 715af212f6
2 changed files with 71 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

105
lib/components/product_box.dart
View file

@ -2,11 +2,18 @@ import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
class ProductBox extends StatefulWidget { class ProductBox extends StatefulWidget {
const ProductBox({Key? key, required this.imageUrl, required this.title, required this.fontSize, required this.callback}) const ProductBox(
{Key? key,
required this.imageUrl,
required this.title,
required this.discount,
required this.fontSize,
required this.callback})
: super(key: key); : super(key: key);
final String imageUrl; final String imageUrl;
final String title; final String title;
final int discount;
final double fontSize; final double fontSize;
final Function() callback; final Function() callback;
@ -27,43 +34,71 @@ class _ProductBoxState extends State<ProductBox> {
child: InkWell( child: InkWell(
onTap: () => widget.callback(), onTap: () => widget.callback(),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
child: Column( child: Stack(
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Flexible( Column(
flex: 4, mainAxisAlignment: MainAxisAlignment.center,
child: CachedNetworkImage( children: [
imageUrl: widget.imageUrl, Flexible(
placeholder: (context, url) => flex: 4,
const CircularProgressIndicator( child: CachedNetworkImage(
color: Color(0xff8B0000), imageUrl: widget.imageUrl,
placeholder: (context, url) =>
const CircularProgressIndicator(
color: Color(0xff8B0000),
),
errorWidget: (context, url, error) =>
Image.asset('assets/images/image_error.webp'),
fadeOutDuration: const Duration(milliseconds: 5),
imageBuilder: (context, imageProvider) => Container(
width: 300,
height: 150,
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider, fit: BoxFit.cover)),
),
),
), ),
errorWidget: (context, url, error) => Flexible(
Image.asset('assets/images/image_error.webp'), flex: 2,
fadeOutDuration: const Duration(milliseconds: 5), child: Container(
imageBuilder: (context, imageProvider) => Container( margin: const EdgeInsets.only(top: 10, left: 5, right: 5),
width: 300, child: Text(
height: 150, widget.title,
decoration: BoxDecoration( style: TextStyle(
image: DecorationImage( fontSize: widget.fontSize,
image: imageProvider, fit: BoxFit.cover)), color: Colors.white,
), fontWeight: FontWeight.w600),
), textAlign: TextAlign.center,
),
),
)
],
), ),
Flexible( widget.discount != 0
flex: 2, ? Column(
child: Container( mainAxisAlignment: MainAxisAlignment.start,
margin: const EdgeInsets.only(top: 10, left: 5, right: 5), children: [
child: Text( Row(
widget.title, mainAxisAlignment: MainAxisAlignment.end,
style: TextStyle( children: [
fontSize: widget.fontSize, Container(
color: Colors.white, width: 50,
fontWeight: FontWeight.w600), height: 20,
textAlign: TextAlign.center, decoration: const BoxDecoration(
), color: Colors.redAccent,
), borderRadius: BorderRadius.only(
) topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0))),
margin: const EdgeInsets.only(top: 10.0),
child: Center(
child: Text("${widget.discount}%",
style: const TextStyle(
color: Colors.white)))),
],
)
])
: Container(),
], ],
), ),
), ),

1
lib/screens/products.dart
View file

@ -56,6 +56,7 @@ class _ProductsState extends State<Products> {
imageUrl: imageUrl:
"https://nekoya.moe.team/img/${data[index]['IMAGE']}", "https://nekoya.moe.team/img/${data[index]['IMAGE']}",
title: data[index]['TITLE'], title: data[index]['TITLE'],
discount: data[index]['DISCOUNT'],
fontSize: fontSize, fontSize: fontSize,
callback: () { callback: () {
showModalBottomSheet( showModalBottomSheet(