A7MeDG0L0L
commented
1 year ago Widget example in the project ...
class ExploreCampiagnsItem extends StatelessWidget {
const ExploreCampiagnsItem({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: 1360,
height: 387,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: AppColor.containerColor4),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'assets/images/mercides.png',
width: 432,
height: 305,
),
const SizedBox(
width: 25,
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
'assets/images/win.png',
width: 157,
height: 58,
),
CustomTxt(
text: 'Mercedes C200 ',
size: 25,
weight: FontWeight.bold,
color: AppColor.textColor2),
CustomTxt(
text: 'Buy a Rosso Pencil and Make it yours!',
size: 20,
weight: FontWeight.w500,
color: AppColor.textColor2),
CustomTxt(
text: 'AED 10.00',
size: 25,
weight: FontWeight.bold,
color: AppColor.textColor2),
const SizedBox(
height: 26,
),
Row(
children: [
Stack(
alignment: Alignment.bottomRight,
children: [
Icon(
Icons.calendar_today,
color: AppColor.iconColor4,
size: 35,
),
Icon(
Icons.check_circle,
color: AppColor.iconColor5,
size: 20,
)
],
),
const SizedBox(
width: 5,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomTxt(
text: 'Max draw date : August 29 ,2023 ',
size: 12,
weight: FontWeight.bold,
color: AppColor.textColor2),
CustomTxt(
text: 'Or earlier if the campign is sold out.',
size: 12,
weight: FontWeight.w400,
color: AppColor.textColor2),
],
)
],
),
const SizedBox(
height: 25,
),
Row(
children: [
Counter1(),
const SizedBox(
width: 25,
),
CustomButton(
containerColor: AppColor.containerColor5,
textColor: AppColor.textColor3,
text: 'Add To Cart',
width: 300,
height: 57,
fontWeight: FontWeight.w500,
fontSize: 14,
onPressed: () {},
borderColor: AppColor.containerColor5,
),
],
),
],
),
const SizedBox(
width: 48,
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
CustomTxt(
text: '1005 Sold Out of 1985',
size: 16,
weight: FontWeight.w500,
color: AppColor.textColor1),
LinearPercentIndicator(
percent: 0.5,
width: 170,
lineHeight: 10,
animation: true,
progressColor: AppColor.containerColor5,
backgroundColor: AppColor.containerColor3,
barRadius: const Radius.circular(60),
//padding: EdgeInsets.only(left: screenSize.width / 110),
),
const Spacer(),
CustomIcon(
iconColor: AppColor.iconColor2,
icon: Icons.favorite_border,
width: 65,
hight: 57,
iconSize: 40,
onPressed: () {},
),
const SizedBox(
height: 25,
),
const CustomImage(
path: 'assets/icons/share.png',
width: 65,
hight: 57,
imageWidth: 21,
iamgeHight: 17),
// SizedBox(
// height: screenSize.width / 90,
// )
],
),
],
),
),
),
const SizedBox(
height: 40,
)
],
);
}
}
mdmm13
Currently I Migrate project to be Responsive using this package but I have some questions ...
1- if widgets using a hardcoded values for width and height should I delete these values ? 2- if there's multiple desgins in figma for web and mobile how to dealing with that .. Should I use widget called ResponsiveRowColumn .. if yes how it works ?
overall Is Migration will take alot of time to be responsive app ?