nekoya/app
nekoya/app
1
0
Fork 0
Code Issues Pull requests Projects Releases5 Packages Wiki Activity

Add deskop/tablet layout support on products page

Browse source
This commit is contained in:
Moe Poi ~ 2022-04-29 17:40:41 +07:00
parent 1322015900
commit a7c00693b7
2 changed files with 92 additions and 77 deletions
lib
components
product_box.dart
screens
products.dart

105
lib/components/product_box.dart
View file

@ -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,
),
),
)
],
),
),
),
),
);
}
);
}
}

64
lib/screens/products.dart
View file

@ -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),
),
);
},
);
},
}
),
);
}