310 lines
12 KiB
Dart
310 lines
12 KiB
Dart
// ignore_for_file: deprecated_member_use
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_svg/flutter_svg.dart';
|
|
import 'package:lba/data/model/workingHours.dart';
|
|
import 'package:lba/gen/assets.gen.dart';
|
|
import 'package:lba/res/colors.dart';
|
|
import 'package:lba/screens/product/item.dart';
|
|
import 'package:lba/screens/product/shop.dart';
|
|
|
|
class Productdetail extends StatefulWidget {
|
|
const Productdetail({super.key});
|
|
|
|
@override
|
|
State<Productdetail> createState() => _ProductdetailState();
|
|
}
|
|
|
|
class _ProductdetailState extends State<Productdetail>
|
|
with SingleTickerProviderStateMixin {
|
|
String selectedImage = Assets.images.media.path;
|
|
int selectedIndex = 0;
|
|
|
|
final List<String> imageList = [
|
|
Assets.images.media.path,
|
|
Assets.images.topDealsAndStores.path,
|
|
Assets.images.image.path,
|
|
Assets.images.topDealsAndStores.path,
|
|
];
|
|
|
|
late AnimationController _controller;
|
|
late Animation<double> _fadeAnimation;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(
|
|
vsync: this,
|
|
duration: const Duration(milliseconds: 300),
|
|
);
|
|
_fadeAnimation = CurvedAnimation(
|
|
parent: _controller,
|
|
curve: Curves.easeInOut,
|
|
);
|
|
_controller.forward();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _onToggleTap(int index) {
|
|
setState(() {
|
|
selectedIndex = index;
|
|
_controller.forward(from: 0);
|
|
});
|
|
}
|
|
|
|
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
Stack(
|
|
children: [
|
|
SizedBox(
|
|
height: 400,
|
|
width: double.infinity,
|
|
child: Stack(
|
|
children: [
|
|
AnimatedSwitcher(
|
|
duration: const Duration(milliseconds: 300),
|
|
child: Image.asset(
|
|
selectedImage,
|
|
key: ValueKey<String>(selectedImage),
|
|
fit: BoxFit.cover,
|
|
height: 350,
|
|
width: double.infinity,
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 40,
|
|
left: 16,
|
|
child: IconButton(
|
|
icon: SvgPicture.asset(
|
|
Assets.icons.mDSPublicTWButton.path,
|
|
),
|
|
onPressed: () => Navigator.pop(context),
|
|
),
|
|
),
|
|
Positioned(
|
|
top: 40,
|
|
right: 16,
|
|
child: IconButton(
|
|
icon: SvgPicture.asset(Assets.icons.favorite.path),
|
|
onPressed: () {},
|
|
),
|
|
),
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
height: 105,
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
decoration: BoxDecoration(
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.2),
|
|
blurRadius: 10,
|
|
offset: const Offset(0, -2),
|
|
),
|
|
],
|
|
),
|
|
child: ListView.separated(
|
|
scrollDirection: Axis.horizontal,
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
itemCount: imageList.length,
|
|
separatorBuilder:
|
|
(_, __) => const SizedBox(width: 8),
|
|
itemBuilder: (context, index) {
|
|
final img = imageList[index];
|
|
final isSelected = selectedImage == img;
|
|
return GestureDetector(
|
|
onTap:
|
|
() => setState(() => selectedImage = img),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
border: Border.all(
|
|
color:
|
|
isSelected
|
|
? LightAppColors.confirmButton
|
|
: Colors.transparent,
|
|
width: 2,
|
|
),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: ColorFiltered(
|
|
colorFilter:
|
|
selectedIndex == 1 &&
|
|
isSelected == false
|
|
? ColorFilter.matrix(<double>[
|
|
0.2126,
|
|
0.7152,
|
|
0.0722,
|
|
0,
|
|
0,
|
|
0.2126,
|
|
0.7152,
|
|
0.0722,
|
|
0,
|
|
0,
|
|
0.2126,
|
|
0.7152,
|
|
0.0722,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
0,
|
|
])
|
|
: ColorFilter.mode(
|
|
Colors.transparent,
|
|
BlendMode.dstOut,
|
|
),
|
|
child: Image.asset(
|
|
img,
|
|
width: 100,
|
|
height: 100,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 20),
|
|
SizedBox(
|
|
width: 350,
|
|
height: 50,
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: _buildToggleButton(
|
|
text: 'Item',
|
|
isSelected: selectedIndex == 0,
|
|
onTap: () => _onToggleTap(0),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: _buildToggleButton(
|
|
text: 'Shop',
|
|
isSelected: selectedIndex == 1,
|
|
onTap: () => _onToggleTap(1),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
child: const Divider(thickness: 1.2, height: 2),
|
|
),
|
|
FadeTransition(
|
|
opacity: _fadeAnimation,
|
|
child:
|
|
selectedIndex == 0
|
|
? Item(
|
|
title: "Bosse Swivel Chair - Nature",
|
|
brand: "Papadatos",
|
|
dimensions: "L 59 cm | D 69 cm | H 89 cm",
|
|
colour:
|
|
"Navy Blue, Burnt Sienna, Mustard Yellow, Olive Green",
|
|
material:
|
|
" Cover: Polyester, Frame construction: Plywood Lacquered, Foot/Base: Oak Solid wood Lacquered, Upholstering: 28 kg/m³ Polyurethane",
|
|
description:
|
|
"A dining chair which swivels through 360 degrees offers a number of advantages. It allows easy movement and flexibility when sitting, which increases comfort and makes it easier to reach different areas around the table. A swivel chair in the dining room also makes it easier to sit down and get up, even where space is a little limited. This largely eliminates the hassle of moving dining chairs around. In addition, the swivel function encourages dynamic interaction during meals or conversations.",
|
|
)
|
|
: Shop(
|
|
shopName: "Chattels & More",
|
|
star: 3.6,
|
|
place: "Mall of the Emirates، City Centre Mirdif",
|
|
branches: [
|
|
"Mall of the Emirates، City Centre Mirdif",
|
|
"UEA",
|
|
],
|
|
|
|
workingHours: [
|
|
WorkingHours(
|
|
day: 'mo',
|
|
shifts: [Shift(openAt: '01:00', closeAt: '23:00')],
|
|
),
|
|
WorkingHours(
|
|
day: 'tu',
|
|
shifts: [Shift(openAt: '09:00', closeAt: '17:00')],
|
|
),
|
|
WorkingHours(
|
|
day: 'fr',
|
|
shifts: [
|
|
Shift(openAt: '09:00', closeAt: '12:00'),
|
|
Shift(openAt: '14:00', closeAt: '18:00'),
|
|
],
|
|
),
|
|
],
|
|
facilities: "White Glove Delivery Service",
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildToggleButton({
|
|
required String text,
|
|
required bool isSelected,
|
|
required VoidCallback onTap,
|
|
}) {
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: Stack(
|
|
children: [
|
|
Container(
|
|
height: 50,
|
|
color: Colors.white,
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
text,
|
|
style: TextStyle(
|
|
color:
|
|
isSelected
|
|
? LightAppColors.primary
|
|
: LightAppColors.productDetailDivider,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
if (isSelected)
|
|
Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
child: SvgPicture.asset(
|
|
Assets.icons.shape.path,
|
|
height: 5,
|
|
color: LightAppColors.primary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|