You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
diplomatic-quarter/lib/pages/pharmacies/product_detail.dart

889 lines
36 KiB
Dart

import 'package:diplomaticquarterapp/core/viewModels/pharmacyModule/product_detail_view_model.dart';
import 'package:diplomaticquarterapp/pages/base/base_view.dart';
import 'package:flutter/material.dart';
import 'package:diplomaticquarterapp/widgets/others/app_scaffold_widget.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:rating_bar/rating_bar.dart';
import 'package:provider/provider.dart';
int price = 0;
void main() => runApp(ProductDetailPage());
class ProductDetailPage extends StatefulWidget {
@override
__ProductDetailPageState createState() => __ProductDetailPageState();
}
class __ProductDetailPageState extends State<ProductDetailPage> {
bool isTrue = true;
bool isDetails = true;
bool isReviews = false;
bool isAvailabilty = false;
Widget build(BuildContext context) {
return AppScaffold(
appBarTitle: 'product detail page',
isShowAppBar: true,
isPharmacy: true,
body: SingleChildScrollView(
child: Column(
children: [
Container(
width: double.infinity,
color: Colors.white,
child: Column(
children: [
Image(
image: AssetImage('assets/images/timeline_bg.png'),
),
Container(
width: double.infinity,
height: 50,
color: Colors.yellowAccent,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
alignment: Alignment.centerRight,
child: Text(
"Discount on Second item",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 17),
),
),
),
SizedBox(
width: 10,
),
Expanded(
flex: 0,
child: Container(
child: Image(
image: AssetImage('assets/images/offer.png'),
),
),
),
],
),
),
],
),
),
SizedBox(
height: 4,
),
Container(
width: 500,
height: 150,
color: Colors.white,
child: productNameAndPrice(),
),
SizedBox(
height: 6,
),
Container(
width: 500,
height: 120,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
child: Text(
"Specificaion",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
Divider(color: Colors.grey)
],
),
),
SizedBox(
height: 6,
),
Container(
width: 500,
margin: EdgeInsets.only(bottom: 100),
// height: 350,
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
FlatButton(
onPressed: () {
setState(() {
isDetails = true;
isReviews = false;
isAvailabilty = false;
});
},
child: Text(
'DETAILS',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
color: Colors.white,
),
isDetails
? Container(
width: 100,
height: 5,
color: Colors.green,
)
: Container()
],
),
SizedBox(
width: 20,
),
Column(
children: [
FlatButton(
onPressed: () {
setState(() {
isDetails = false;
isReviews = true;
isAvailabilty = false;
});
},
child: Text(
'REVIEWS',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
color: Colors.white,
),
isReviews
? Container(
width: 100,
height: 5,
color: Colors.green,
)
: Container(),
],
),
SizedBox(
width: 20,
),
Column(
children: [
FlatButton(
onPressed: () {
setState(() {
isDetails = false;
isReviews = false;
isAvailabilty = true;
});
},
child: Text(
'AVAILABILTY',
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
color: Colors.white,
),
isAvailabilty
? Container(
width: 100,
height: 5,
color: Colors.green,
)
: Container(),
],
),
],
),
SizedBox(
height: 10,
),
isDetails
? Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
'Description',
style: TextStyle(
fontSize: 17,
color: Colors.grey,
fontWeight: FontWeight.w600),
),
),
SizedBox(
height: 10,
),
Container(
child: Text(
'Body Mosturizing and nourishing lotion',
style: TextStyle(fontSize: 20),
),
),
],
),
)
: isReviews
? BaseView<ProductDetailViewModel>(
onModelReady: (model) =>
model.getProductReviewsData(),
builder: (_, model, wi) => ListView.builder(
physics: const ScrollPhysics(),
itemCount: model.productDetailService[0].reviews.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index){
return Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Row(
children: [
Container(
child: Text(
model.productDetailService[0]
.reviews[index].id
.toString(),
style: TextStyle(
fontSize: 17,
color: Colors.grey,
fontWeight: FontWeight.w600),
),
),
Container(
margin: EdgeInsets.only(left: 232),
child: RatingBar.readOnly(
initialRating: model
.productDetailService[0]
.reviews[index]
.rating
.toDouble(),
size: 15.0,
filledColor: Colors.yellow[700],
emptyColor: Colors.grey[500],
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
filledIcon: Icons.star,
emptyIcon: Icons.star,
),
),
],
),
),
SizedBox(
height: 10,
),
Container(
child: Text(
model.productDetailService[0].reviews[index]
.reviewText,
style: TextStyle(fontSize: 20),
),
),
SizedBox(
height: 50,
),
Divider(height: 1, color: Colors.grey),
],
),
);
},
),
)
: isAvailabilty
? BaseView<ProductDetailViewModel>(
onModelReady: (model) =>
model.getProductLocationData(),
builder: (_, model, wi) => ListView.builder(
physics: const ScrollPhysics(),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: model.productLocationService.length,
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
// crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Image.network(model
.productLocationService[index]
.projectImageUrl),
),
SizedBox(
width: 10,
),
Expanded(
flex: 4,
child: Text(
model.productLocationService[index]
.locationDescription +
"\n" +
fixingString(model
.productLocationService[
0]
.cityName
.toString()),
style: TextStyle(fontSize: 12),
),
),
Expanded(
flex: 1,
child: IconButton(
icon: Icon(Icons.location_on),
color: Colors.red,
onPressed: () {},
),
),
Expanded(
flex: 1,
child: IconButton(
icon: Icon(Icons.phone),
color: Colors.red,
onPressed: () {},
),
),
],
),
Divider(height: 1.2, color: Colors.grey)
],
),
);
},
),
)
: Container(),
],
),
),
// ListView(scrollDirection: Axis.vertical, shrinkWrap: true, children: [Text('ENAD')]),
],
),
),
bottomSheet: footerWidget(),
);
}
}
class footerWidget extends StatefulWidget {
@override
_footerWidgetState createState() => _footerWidgetState();
}
class _footerWidgetState extends State<footerWidget> {
double quantityUI = 70;
bool showUI = false;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: quantityUI,
color: Colors.white,
child: Column(
children: [
showUI
? Container(
width: double.infinity,
height: 90,
color: Colors.white,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Quantity',
style: TextStyle(
fontSize: 15, fontWeight: FontWeight.bold),
),
),
// ListView(
// scrollDirection: Axis.horizontal,
// children: [
// itemQuantity(),
// ],
// ),
Container(
// margin: EdgeInsets.symmetric(vertical: 20.0),
height: 50.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'1',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 1;
return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'2',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 2;
// return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'3',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 3;
return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'4',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 4;
return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'5',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 5;
return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'6',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 6;
return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'7',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 7;
return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'8',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 8;
return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'9',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 9;
return price;
});
},
),
SizedBox(
width: 5,
),
InkWell(
child: Container(
alignment: Alignment.center,
width: 50.0,
color: Colors.white,
child: Text(
'10',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20),
),
),
onTap: () {
setState(() {
price = 10;
return price;
});
},
),
SizedBox(
width: 5,
),
Container(
width: 50.0,
child: TextField(
decoration:
InputDecoration(labelText: 'quantity #'),
onChanged: (text) {
if (int.tryParse(text) == null) {
text = '';
} else {
setState(() {
price = int.parse(text);
});
}
},
),
),
],
),
)
],
),
),
)
: Container(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 70,
height: 50,
child: FlatButton(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 4,
child: Text(
price.toString(),
style: TextStyle(fontSize: 20),
),
),
Expanded(
flex: 5,
child: Text(
"QTY",
style: TextStyle(fontSize: 16),
),
),
],
),
onPressed: () {
setState(() {
if (showUI) {
quantityUI = 70;
showUI = false;
} else {
quantityUI = 150;
showUI = true;
}
});
},
),
),
InkWell(
onTap: () {},
child: Container(
alignment: Alignment.center,
width: 190,
height: 46,
color: Colors.green,
child: Text(
'Add to Cart',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15),
),
),
),
SizedBox(
width: 5,
),
InkWell(
onTap: () {},
child: Container(
alignment: Alignment.center,
width: 120,
height: 46,
color: Colors.blue,
child: Text(
'Buy Now',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15),
),
),
),
],
),
],
),
);
}
}
productNameAndPrice() {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Text(
"22 SR",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
SizedBox(
width: 100,
),
Text(
"Out Of Stock",
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),
),
SizedBox(width: 30),
Text(
"notify me ",
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
),
),
Icon(
FontAwesomeIcons.bell,
color: Colors.blue,
size: 15.0,
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
margin: EdgeInsets.only(left: 5),
child: Text(
"Johnson And Jonson Vita-Rich Smoothing Body Cream - With Papaya Extract 200 ML",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
),
),
Row(
children: [
Expanded(
flex: 2,
child: Container(
margin: EdgeInsets.only(right: 150),
child: Align(
alignment: Alignment.bottomLeft,
child: RatingBar.readOnly(
initialRating: 3,
size: 15.0,
filledColor: Colors.yellow[700],
emptyColor: Colors.grey[500],
isHalfAllowed: true,
halfFilledIcon: Icons.star_half,
filledIcon: Icons.star,
emptyIcon: Icons.star,
),
),
),
),
Expanded(
flex: 1,
child: Container(
child: Text(
'Prescription attachment required',
style: TextStyle(color: Colors.red, fontSize: 10),
),
),
),
Icon(
FontAwesomeIcons.questionCircle,
color: Colors.red,
size: 15.0,
),
],
),
],
);
}
slideDetail() {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14.0, vertical: 15.0),
decoration: const BoxDecoration(
border: Border(
top: BorderSide(width: 0.5, color: Colors.grey),
left: BorderSide(width: 0.5, color: Colors.grey),
right: BorderSide(width: 0.5, color: Colors.grey),
bottom: BorderSide(width: 0.5, color: Colors.grey),
),
color: Colors.white,
),
child: const Text('1',
textAlign: TextAlign.center,
style: TextStyle(color: Color(0xFF000000))),
),
)
],
);
}
fixingString(txt) {
String stringTxt;
String newTxt;
stringTxt = txt.toString();
newTxt = stringTxt.split('.')[1];
return newTxt;
}