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 { 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( 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( 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 { 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: [ 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; }