From 25b5fe116098968ce97b2a60b2d60c55006b8c54 Mon Sep 17 00:00:00 2001 From: OkaykOrhmn Date: Mon, 17 Feb 2025 18:14:17 +0330 Subject: [PATCH] product page for web. --- .../ui/screens/product/product_page.dart | 145 +++++++++++++++--- 1 file changed, 123 insertions(+), 22 deletions(-) diff --git a/lib/presentation/ui/screens/product/product_page.dart b/lib/presentation/ui/screens/product/product_page.dart index 89d846d..46635ae 100644 --- a/lib/presentation/ui/screens/product/product_page.dart +++ b/lib/presentation/ui/screens/product/product_page.dart @@ -13,6 +13,102 @@ class ProductPage extends StatelessWidget { 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( @@ -52,9 +148,7 @@ class ProductPage extends StatelessWidget { ), ), InkWell( - onTap: () { - context.pop(); - }, + onTap: () {}, child: Container( decoration: BoxDecoration( color: Theme.of(context) @@ -99,33 +193,40 @@ class ProductPage extends StatelessWidget { )) ], ), - 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)], - ), - ), - ), + productTabBarView(context), ], ), ), ), - desktop: Scaffold(), ), ); } + 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),