import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:proxibuy/core/utils/empty_space.dart'; import 'package:proxibuy/presentation/ui/theme/colors.dart'; import 'package:proxibuy/presentation/ui/theme/responsive.dart'; class ProductPage extends StatelessWidget { const ProductPage({super.key}); @override Widget build(BuildContext context) { return DefaultTabController( length: 2, child: Responsive(context).builder( desktop: Scaffold( body: Center( child: ConstrainedBox( constraints: BoxConstraints( maxWidth: 1600, ), child: Column( children: [ Padding( padding: const EdgeInsets.all(32.0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( onPressed: () { context.pop(); }, icon: Icon( Icons.arrow_back_ios, size: 32, )), Padding( padding: const EdgeInsets.only(right: 32.0), child: IconButton( iconSize: 32, onPressed: () {}, icon: Icon(Icons.bookmark_add_rounded)), ), ], ), ), Expanded( child: Row( children: [ Expanded( child: SingleChildScrollView( physics: BouncingScrollPhysics(), child: productTabBarView(context))), Expanded( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 64.0), child: Column( children: [ Expanded( child: ClipRRect( borderRadius: BorderRadius.circular(16), child: AspectRatio( aspectRatio: 1 / 1, child: Image.network( 'https://s3-alpha-sig.figma.com/img/4361/9bde/26f7810ea7f22d8aa59a907d378c16ff?Expires=1740960000&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=DIm2QGXae9cxWDNV2UoJd4JWpvvmL~qKmEefvrtVw9XwKTVHwcfgqR3-s-5s7jqsTiT0iWDsYY10MeuSf2d4xXx9uTra~QEj3LbO1x4cRv4DBDJ-wkLGxliV07HVWl~CMl1MhzXyfUvWkrR30QQ5x3IslvBpfulMj88AYU5l97XPaNMOcMT8YqErdCdpiqdXBM9L2vUpCUbZGH~SfKCQyl1QcNhuCBTPODPWcK6kGU1ell3qwXC0-4JcLiiR-Kdo9asKy495iVtQ584fyZAdeN1R4oJnVGnAlUyN2HRQh6j518FCrJIzr7O0JajvrmwZ7j48nXjWPtG0SGp8Lq4l6A__', width: double.infinity, fit: BoxFit.cover, )), ), ), Padding( padding: const EdgeInsets.only(top: 32.0, bottom: 64), child: SizedBox( width: double.infinity, height: 90, child: ListView.builder( itemCount: 20, padding: EdgeInsets.symmetric(horizontal: 8), scrollDirection: Axis.horizontal, shrinkWrap: true, physics: BouncingScrollPhysics(), itemBuilder: (context, index) { return Container( margin: EdgeInsets.symmetric(horizontal: 8), padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Theme.of(context) .colorScheme .surface .withAlpha(200), borderRadius: BorderRadius.circular(8)), child: Image.network( 'https://static.vecteezy.com/system/resources/previews/021/275/832/non_2x/running-shoes-illustration-with-fire-shape-yellow-and-red-isolated-on-transparan-background-free-png.png'), ); }, ), ), ) ], ), )), ], ), ), ], ), )), ), mobile: Scaffold( body: SingleChildScrollView( child: Column( children: [ Stack( children: [ Padding( padding: const EdgeInsets.only(bottom: 46), child: AspectRatio( aspectRatio: 0.95, child: Image.network( 'https://s3-alpha-sig.figma.com/img/4361/9bde/26f7810ea7f22d8aa59a907d378c16ff?Expires=1740960000&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=DIm2QGXae9cxWDNV2UoJd4JWpvvmL~qKmEefvrtVw9XwKTVHwcfgqR3-s-5s7jqsTiT0iWDsYY10MeuSf2d4xXx9uTra~QEj3LbO1x4cRv4DBDJ-wkLGxliV07HVWl~CMl1MhzXyfUvWkrR30QQ5x3IslvBpfulMj88AYU5l97XPaNMOcMT8YqErdCdpiqdXBM9L2vUpCUbZGH~SfKCQyl1QcNhuCBTPODPWcK6kGU1ell3qwXC0-4JcLiiR-Kdo9asKy495iVtQ584fyZAdeN1R4oJnVGnAlUyN2HRQh6j518FCrJIzr7O0JajvrmwZ7j48nXjWPtG0SGp8Lq4l6A__', width: double.infinity, fit: BoxFit.cover, )), ), Positioned( left: 16, right: 16, top: 32, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ InkWell( onTap: () { context.pop(); }, child: Container( decoration: BoxDecoration( color: Theme.of(context) .colorScheme .surface .withAlpha(180), borderRadius: BorderRadius.circular(8)), padding: EdgeInsets.all(8), child: Icon(Icons.arrow_back_ios_new_rounded), ), ), InkWell( onTap: () {}, child: Container( decoration: BoxDecoration( color: Theme.of(context) .colorScheme .surface .withAlpha(180), borderRadius: BorderRadius.circular(8)), padding: EdgeInsets.all(8), child: Icon(Icons.bookmark_add_rounded), ), ), ], )), Positioned( right: 0, left: 0, bottom: 0, child: SizedBox( width: double.infinity, height: 90, child: ListView.builder( itemCount: 20, padding: EdgeInsets.symmetric(horizontal: 8), scrollDirection: Axis.horizontal, shrinkWrap: true, physics: BouncingScrollPhysics(), itemBuilder: (context, index) { return Container( margin: EdgeInsets.symmetric(horizontal: 8), padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Theme.of(context) .colorScheme .surface .withAlpha(200), borderRadius: BorderRadius.circular(8)), child: Image.network( 'https://static.vecteezy.com/system/resources/previews/021/275/832/non_2x/running-shoes-illustration-with-fire-shape-yellow-and-red-isolated-on-transparan-background-free-png.png'), ); }, ), )) ], ), productTabBarView(context), ], ), ), ), ), ); } Column productTabBarView(BuildContext context) { return Column( children: [ Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: TabBar( tabs: [ Tab(text: 'Item'), Tab(text: 'Shop'), ], ), ), Padding( padding: const EdgeInsets.symmetric(vertical: 16.0), child: SizedBox( height: 1500, child: TabBarView( children: [itemTab(context), shopTab(context)], ), ), ), ], ); } Widget itemTab(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SelectableText( 'Philadelphia Honey Pecan Cream Cheese Spread, 7.5 oz Tub', style: Theme.of(context).textTheme.headlineSmall, ), 4.h, SelectableText( 'Brand: Philadelphia', style: Theme.of(context).textTheme.titleSmall, ), 8.h, Row( children: [ Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_half_rounded), 8.w, Text( '4.8', style: Theme.of(context).textTheme.bodyMedium, ) ], ), 8.h, SelectableText( 'Currently available. 23 remain', style: Theme.of(context).textTheme.titleSmall, ), 12.h, Row( children: [ Icon(Icons.warning_amber_rounded), 8.w, Text( 'Expire: 5 days', style: Theme.of(context).textTheme.bodyMedium, ) ], ), 8.h, Divider( color: Theme.of(context).colorScheme.onSurface, ), 8.h, SelectableText( 'Nutrition summary', style: Theme.of(context).textTheme.titleLarge, ), 4.h, SelectableText( '7 servings per container | 2 Tbsp (33g)', style: Theme.of(context).textTheme.bodyLarge, ), 16.h, Container( decoration: BoxDecoration( color: Theme.of(context).colorScheme.surface, borderRadius: BorderRadius.circular(16)), padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16), child: Flex( direction: Axis.horizontal, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Flexible( flex: 1, child: Column( children: [ SelectableText( '80', style: Theme.of(context) .textTheme .labelLarge ?.copyWith(color: Theme.of(context).primaryColor), ), SelectableText('Calories', style: Theme.of(context).textTheme.labelLarge), ], ), ), Flexible( flex: 1, child: Column( children: [ SelectableText( '100mg', style: Theme.of(context) .textTheme .labelLarge ?.copyWith(color: Theme.of(context).primaryColor), ), SelectableText('Sodium', style: Theme.of(context).textTheme.labelLarge), ], ), ), Flexible( flex: 1, child: Column( children: [ SelectableText( '0g', style: Theme.of(context) .textTheme .labelLarge ?.copyWith(color: Theme.of(context).primaryColor), ), SelectableText('Dietary Fiber', style: Theme.of(context).textTheme.labelLarge), ], ), ), Flexible( flex: 1, child: Column( children: [ SelectableText( '5g', style: Theme.of(context) .textTheme .labelLarge ?.copyWith(color: Theme.of(context).primaryColor), ), SelectableText('Sugars', style: Theme.of(context).textTheme.labelLarge), ], ), ), ], ), ), 16.h, Divider( color: Theme.of(context).colorScheme.onSurface, ), 16.h, Row( children: [ Container( decoration: BoxDecoration( color: semanticRed, borderRadius: BorderRadius.circular(8)), padding: EdgeInsets.all(8), child: Text( 'HOT', style: Theme.of(context) .textTheme .titleMedium ?.copyWith(color: Colors.white), ), ), 8.w, SelectableText( '(50%) 32.18 - 16.9 \$', style: Theme.of(context) .textTheme .titleMedium ?.copyWith(color: semanticRed), ) ], ), 16.h, Center( child: Text( 'Top reviews from the United States', style: Theme.of(context).textTheme.titleMedium, )), 8.h, ListView.builder( shrinkWrap: true, itemCount: 3, physics: NeverScrollableScrollPhysics(), itemBuilder: (context, index) { return Column( children: [ ListTile( contentPadding: EdgeInsets.zero, title: SelectableText( 'Kristin Watson', style: Theme.of(context).textTheme.labelLarge, ), subtitle: SelectableText( 'Verified Buyer', style: Theme.of(context).textTheme.bodySmall, ), trailing: Row( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), ], ), ), 16.h, SelectableText( 'This is ๐Ÿ’ฏ one hundred percent the best !!! "Philadelphia cream cheese is absolutely amazingโ€”so creamy and versatile, it elevates every recipe, from cheesecakes to simple bagels. A must-have in my kitchen!"๐Ÿ˜‹๐Ÿ˜‹๐Ÿ˜‹', style: Theme.of(context).textTheme.bodyLarge, ), 16.h, Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ Icon(Icons.thumb_up_alt_outlined), 8.w, Text('Yes (2)'), 12.w, Icon(Icons.thumb_down_alt_outlined), 8.w, Text('No (0)'), ], ), Text( 'Nov 09, 2024', style: Theme.of(context).textTheme.bodySmall, ) ], ), if (index != 3 - 1) Divider( color: Theme.of(context).colorScheme.onSurface, ) ], ); }, ), 12.h, Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'See all reviws', style: Theme.of(context) .textTheme .titleMedium ?.copyWith(color: semanticRed), ), 4.w, Icon( Icons.arrow_forward, color: semanticRed, ) ], ) ], ), ); } Widget shopTab(BuildContext context) { return Column( children: [ Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SelectableText( 'Heinen\'s Grocery', style: Theme.of(context).textTheme.headlineSmall, ), 8.h, Row( children: [ Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_rate_rounded), Icon(Icons.star_half_rounded), 8.w, Text( '4.8', style: Theme.of(context).textTheme.bodyMedium, ) ], ), 8.h, Row( children: [ Icon(Icons.location_on_outlined), 8.w, Text( 'Shop 1, Cleveland, Ohio, United States', style: Theme.of(context).textTheme.bodyMedium, ) ], ), 4.h, Row( children: [ Icon(Icons.access_time_rounded), 8.w, Text( 'Open now | 10:00 AM - 12:00 PM', style: Theme.of(context).textTheme.bodyMedium, ) ], ), 16.h, Row( children: [ SelectableText( 'Facilities', style: Theme.of(context).textTheme.titleMedium, ), 8.w, Expanded( child: Divider( color: Theme.of(context).colorScheme.onSurface, ), ), ], ), 8.h, Row( children: [ Icon(Icons.check_box_outlined), 8.w, Text( 'Home Delivery', style: Theme.of(context).textTheme.bodyMedium, ) ], ), 16.h, SizedBox( height: 46, child: ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: Theme.of(context).colorScheme.surface), onPressed: () {}, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon(Icons.navigation_rounded), 4.w, Text('Direction') ], )), ), 16.h, Container( width: double.infinity, decoration: BoxDecoration( color: Theme.of(context).colorScheme.surface, borderRadius: BorderRadius.circular(16)), padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( '23 min (8.7 km)', style: Theme.of(context).textTheme.titleLarge, ), 12.h, SizedBox( height: 46, width: double.infinity, child: ElevatedButton( style: ElevatedButton.styleFrom( backgroundColor: semanticGreen), onPressed: () {}, child: Text('Reservation')), ), ], ), ), ], ), ), 16.h, Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Row( children: [ SelectableText( 'List of offers', style: Theme.of(context).textTheme.titleLarge, ), ], ), ), 16.h, SizedBox( width: double.infinity, height: 150, child: ListView.builder( shrinkWrap: true, scrollDirection: Axis.horizontal, padding: EdgeInsets.symmetric(horizontal: 8), physics: BouncingScrollPhysics(), itemBuilder: (context, index) { return Container( width: 300, padding: EdgeInsets.all(12), margin: EdgeInsets.symmetric(horizontal: 8), decoration: BoxDecoration( color: Theme.of(context).colorScheme.surface, borderRadius: BorderRadius.circular(16)), child: Column( children: [ Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ ClipRRect( borderRadius: BorderRadius.circular(8), child: Image.network( 'https://s3-alpha-sig.figma.com/img/f773/0650/56608740ed0260647aa12c36f8b46534?Expires=1740960000&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=UxdqWfGI5Ix~S2728Qsiw0MHGST~we6M25cWRZ8YetaIGlC-ITXjDaX8LDssimYJt5XWmfyWqE0D4vRq1lP9Nmy3CfI~bLXaaBBSmQqAwdXDz1aVXFh7Q8ri5klxYoCjIF0HTp3nr4Scpf5d9PHU7L32s8JF0pz4dt8tyaCo-goeEOsjn8Q-LOBKNHVE6B8uRnW74GH12V7GNygxv1EV59dDD1vcXNcD7kS~2Ox7RejK159Ys7La1F-Evbt5sU7XFOMJuFbPVUgWA05wgrF1U1zdaz5b10Mu9~4PnErR~FjJTZPYcznatVYwuxWRWRAtpwjhjew2TL0DoOvlCKHbYw__', width: 74, height: 74, fit: BoxFit.cover, ), ), 12.w, Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ SelectableText( 'Kellogg\'s Corn Flakes', style: Theme.of(context) .textTheme .titleMedium ?.copyWith(overflow: TextOverflow.ellipsis), maxLines: 1, ), 8.h, SelectableText( 'Classic cereal with a crispy texture an a mildly sweet flavor', style: Theme.of(context) .textTheme .bodyMedium ?.copyWith(overflow: TextOverflow.ellipsis), maxLines: 2, ), ], ), ) ], ), 12.h, Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Row( children: [ Container( decoration: BoxDecoration( color: semanticRed, borderRadius: BorderRadius.circular(8)), padding: EdgeInsets.all(8), child: Text( 'HOT', style: Theme.of(context) .textTheme .titleSmall ?.copyWith(color: Colors.white), ), ), 8.w, Text( '(50%) / 16 - 8\$', style: Theme.of(context).textTheme.titleSmall, ) ], ), Container( decoration: BoxDecoration( color: semanticGreen, borderRadius: BorderRadius.circular(8)), padding: EdgeInsets.all(8), child: Text( 'Reservation', style: Theme.of(context) .textTheme .titleSmall ?.copyWith(color: Colors.white), ), ), ], ) ], ), ); }, ), ), 16.h, Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Row( children: [ SelectableText( 'Similar Business', style: Theme.of(context).textTheme.titleLarge, ), ], ), ), 16.h, SizedBox( width: double.infinity, height: 270, child: ListView.builder( shrinkWrap: true, scrollDirection: Axis.horizontal, padding: EdgeInsets.symmetric(horizontal: 8), physics: BouncingScrollPhysics(), itemBuilder: (context, index) { return Container( width: 240, padding: EdgeInsets.all(12), margin: EdgeInsets.symmetric(horizontal: 8), decoration: BoxDecoration( color: Theme.of(context).colorScheme.surface, borderRadius: BorderRadius.circular(16)), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ ClipRRect( borderRadius: BorderRadius.circular(8), child: AspectRatio( aspectRatio: 16 / 9, child: Image.network( 'https://s3-alpha-sig.figma.com/img/c720/df1c/d8288c0392372fb3dd15824b84b9d563?Expires=1740960000&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=CMct6yvsv~g0YEUDRp-D3prnQve4nZc5mB~oJ4jbRsH63ltvM4yoCKbTYJLCm~ONwb9e7TNoFO1Q1pO8sPz3TBB-gAFIX9j53fz40ypp0VsRXSOK91G7LBj82V974E1Yqxol2fhAZ8icTAaOZVJgJH-47EG3wQqujGieHbcOYCCBZoCPP0a~jKG~LsE-EtLmP0RdXOuqE9-o2gMzEBH2TMXLtWJXYtA6dS~XHPBIeUXn4Sa7Hy4ca3pGb6wXN4owNt4SeanQuxeR-CEgDYJTI~tU6LkW1N2TSPOt6iGn5Jbb4XdkFjKA7dkwijG9mEU9F3wy16aMj7a1Z1yEwAvlwg__', height: 100, fit: BoxFit.cover, ), ), ), 8.h, SelectableText( 'Milam\'s Markets', style: Theme.of(context) .textTheme .titleMedium ?.copyWith(overflow: TextOverflow.ellipsis), maxLines: 1, ), 8.h, Row( children: [ Icon(Icons.location_on_outlined), 8.w, SelectableText( 'Miami Springs, Florida', style: Theme.of(context) .textTheme .bodyMedium ?.copyWith(overflow: TextOverflow.ellipsis), maxLines: 1, ) ], ), 8.h, SizedBox( child: ElevatedButton( onPressed: () {}, child: Text('See more about')), ), ], ), ); }, ), ) ], ); } }