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

Improve responsive for other devices

Browse source
This commit is contained in:
Moe Poi ~ 2022-05-13 11:11:14 +07:00
parent 8bab6bdb7d
commit 29b207e8e6
3 changed files with 102 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
lib/components/product_box.dart
View file

@ -3,11 +3,12 @@ import 'package:responsify/responsify.dart';
import 'package:flutter/material.dart';
class ProductBox extends StatefulWidget {
const ProductBox({Key? key, required this.imageUrl, required this.title, required this.callback})
const ProductBox({Key? key, required this.imageUrl, required this.title, required this.fontSize, required this.callback})
: super(key: key);
final String imageUrl;
final String title;
final double fontSize;
final Function() callback;
@override
@ -17,62 +18,57 @@ class ProductBox extends StatefulWidget {
class _ProductBoxState extends State<ProductBox> {
@override
Widget build(BuildContext context) {
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),
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)),
),
),
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),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Flexible(
flex: 4,
child: CachedNetworkImage(
imageUrl: widget.imageUrl,
placeholder: (context, url) =>
const CircularProgressIndicator(
color: Color(0xff8B0000),
),
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,
),
),
)
],
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: widget.fontSize,
color: Colors.white,
fontWeight: FontWeight.w600),
textAlign: TextAlign.center,
),
),
)
],
),
);
}
),
),
);
}
}

80
lib/screens/products.dart
View file

@ -4,6 +4,7 @@ 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';
import 'package:nekoya_flutter/utils/utils.dart' show kMobileBreakpoint, kTabletBreakpoint, kDesktopBreakPoint;
class Products extends StatefulWidget {
const Products({Key? key}) : super(key: key);
@ -22,46 +23,61 @@ class _ProductsState extends State<Products> {
centerTitle: true,
backgroundColor: const Color(0xff212226),
),
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']}",
body: LayoutBuilder(
builder: (context, dimension) {
int gridCount = 2;
double fontSize = 14.0;
if (dimension.maxWidth <= kMobileBreakpoint) {
gridCount = 2;
fontSize = 14.0;
} else if (dimension.maxWidth > kMobileBreakpoint &&
dimension.maxWidth <= kTabletBreakpoint) {
gridCount = 4;
fontSize = 15.0;
} else if (dimension.maxWidth > kTabletBreakpoint &&
dimension.maxWidth <= kDesktopBreakPoint) {
gridCount = 5;
fontSize = 10.0;
} else {
gridCount = 6;
fontSize = 10.0;
}
return FutureBuilder<dynamic>(
future: getProducts(),
builder: (context, snapshot) {
if (snapshot.hasData) {
var data = snapshot.data;
return GridView.count(
crossAxisCount: gridCount,
children: List.generate(data!.length, (index) {
return ProductBox(
imageUrl: "https://nekoya.moe.team/img/${data[index]['IMAGE']}",
title: data[index]['TITLE'],
fontSize: fontSize,
callback: () {
showModalBottomSheet(
isScrollControlled: true,
backgroundColor: Colors.transparent,
context: context,
builder: (context) =>
productDetail(context, data[index]['ID']),
builder: (context) => productDetail(context, data[index]['ID']),
);
},
);
}),
);
}
return const Center(
child: CircularProgressIndicator(
color: Color(0xff8B0000),
),
);
}),
);
},
);
}),
}
return const Center(
child: CircularProgressIndicator(
color: Color(0xff8B0000),
),
);
},
);
}
),
);
}
}
}

4
lib/utils/utils.dart
View file

@ -1,5 +1,9 @@
import 'package:flutter/material.dart';
const kMobileBreakpoint = 576;
const kTabletBreakpoint = 1024;
const kDesktopBreakPoint = 1366;
class HideScrollGlow extends ScrollBehavior {
@override
Widget buildOverscrollIndicator(