From a7c00693b7f7052b5bb27070bb0af9136f242d04 Mon Sep 17 00:00:00 2001
From: Moe <moe@chocola.dev>
Date: Fri, 29 Apr 2022 17:40:41 +0700
Subject: [PATCH] Add deskop/tablet layout support on products page
---
lib/components/product_box.dart | 105 +++++++++++++++++---------------
lib/screens/products.dart | 64 ++++++++++---------
2 files changed, 92 insertions(+), 77 deletions(-)
diff --git a/lib/components/product_box.dart b/lib/components/product_box.dart
index c92f97a..6de80b1 100644
--- a/lib/components/product_box.dart
+++ b/lib/components/product_box.dart
@@ -1,4 +1,5 @@
import 'package:cached_network_image/cached_network_image.dart';
+import 'package:responsify/responsify.dart';
import 'package:flutter/material.dart';
class ProductBox extends StatefulWidget {
@@ -16,58 +17,64 @@ class ProductBox extends StatefulWidget {
class _ProductBoxState extends State<ProductBox> {
@override
Widget build(BuildContext context) {
- return Container(
- margin: const EdgeInsets.all(8.0),
- child: Card(
- color: const Color(0xff212226),
- shape: RoundedRectangleBorder(
- borderRadius: BorderRadius.circular(10),
- ),
- child: InkWell(
- onTap: () => widget.callback(),
- borderRadius: BorderRadius.circular(10),
- splashColor: const Color(0xff8B0000),
- highlightColor: const Color(0xff8B0000),
- child: Column(
- children: [
- Flexible(
- flex: 4,
- child: CachedNetworkImage(
- imageUrl: widget.imageUrl,
- placeholder: (context, url) =>
- const CircularProgressIndicator(
- color: Color(0xff8B0000),
+ return ResponsiveUiWidget(
+ targetOlderComputers: true,
+ builder: (context, deviceInformation) {
+ return Container(
+ margin: const EdgeInsets.all(8.0),
+ child: Card(
+ color: const Color(0xff212226),
+ shape: RoundedRectangleBorder(
+ borderRadius: BorderRadius.circular(10),
+ ),
+ child: InkWell(
+ onTap: () => widget.callback(),
+ borderRadius: BorderRadius.circular(10),
+ splashColor: const Color(0xff8B0000),
+ highlightColor: const Color(0xff8B0000),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Flexible(
+ flex: 4,
+ child: CachedNetworkImage(
+ imageUrl: widget.imageUrl,
+ placeholder: (context, url) =>
+ const CircularProgressIndicator(
+ color: Color(0xff8B0000),
+ ),
+ errorWidget: (context, url, error) =>
+ Image.asset('assets/image-error.webp'),
+ fadeOutDuration: const Duration(milliseconds: 5),
+ imageBuilder: (context, imageProvider) => Container(
+ width: 300,
+ height: 150,
+ decoration: BoxDecoration(
+ image: DecorationImage(
+ image: imageProvider, fit: BoxFit.cover)),
+ ),
+ ),
),
- errorWidget: (context, url, error) =>
- Image.asset('assets/image-error.webp'),
- fadeOutDuration: const Duration(milliseconds: 5),
- imageBuilder: (context, imageProvider) => Container(
- width: 300,
- height: 150,
- decoration: BoxDecoration(
- image: DecorationImage(
- image: imageProvider, fit: BoxFit.cover)),
- ),
- ),
+ Flexible(
+ flex: 1,
+ child: Container(
+ margin: const EdgeInsets.all(10),
+ child: Text(
+ widget.title,
+ style: TextStyle(
+ fontSize: deviceInformation.orientation == Orientation.portrait ? 14 : 29,
+ color: Colors.white,
+ fontWeight: FontWeight.w600),
+ textAlign: TextAlign.center,
+ ),
+ ),
+ )
+ ],
),
- Flexible(
- flex: 1,
- child: Container(
- margin: const EdgeInsets.all(10),
- child: Text(
- widget.title,
- style: const TextStyle(
- fontSize: 14,
- color: Colors.white,
- fontWeight: FontWeight.w600),
- textAlign: TextAlign.center,
- ),
- ),
- )
- ],
+ ),
),
- ),
- ),
+ );
+ }
);
}
}
diff --git a/lib/screens/products.dart b/lib/screens/products.dart
index 94f2ca7..866fb95 100644
--- a/lib/screens/products.dart
+++ b/lib/screens/products.dart
@@ -1,4 +1,7 @@
+import 'package:responsify/responsify.dart';
import 'package:flutter/material.dart';
+
+
import 'package:nekoya_flutter/api/api.dart';
import 'package:nekoya_flutter/components/product_box.dart';
import 'package:nekoya_flutter/components/product_detail.dart';
@@ -20,37 +23,42 @@ class _ProductsState extends State<Products> {
centerTitle: true,
backgroundColor: const Color(0xff212226),
),
- body: FutureBuilder<dynamic>(
- future: getProducts(),
- builder: (context, snapshot) {
- if (snapshot.hasData) {
- var data = snapshot.data;
- return GridView.count(
- crossAxisCount: 2,
- children: List.generate(data!.length, (index) {
- return ProductBox(
- imageUrl:
- 'https://nekoya.moe.team/img/' + data[index]['IMAGE'],
- title: data[index]['TITLE'],
- callback: () {
- showModalBottomSheet(
- isScrollControlled: true,
- backgroundColor: Colors.transparent,
- context: context,
- builder: (context) => productDetail(context, data[index]['ID']),
- );
- },
+ body: ResponsiveUiWidget(
+ targetOlderComputers: true,
+ builder: (context, deviceInformation) {
+ return FutureBuilder<dynamic>(
+ future: getProducts(),
+ builder: (context, snapshot) {
+ if (snapshot.hasData) {
+ var data = snapshot.data;
+ return GridView.count(
+ crossAxisCount: deviceInformation.orientation == Orientation.portrait ? 2 : 5,
+ children: List.generate(data!.length, (index) {
+ return ProductBox(
+ imageUrl:
+ 'https://nekoya.moe.team/img/' + data[index]['IMAGE'],
+ title: data[index]['TITLE'],
+ callback: () {
+ showModalBottomSheet(
+ isScrollControlled: true,
+ backgroundColor: Colors.transparent,
+ context: context,
+ builder: (context) => productDetail(context, data[index]['ID']),
+ );
+ },
+ );
+ }),
);
- }),
- );
- }
+ }
- return const Center(
- child: CircularProgressIndicator(
- color: Color(0xff8B0000),
- ),
+ return const Center(
+ child: CircularProgressIndicator(
+ color: Color(0xff8B0000),
+ ),
+ );
+ },
);
- },
+ }
),
);
}