sergey/GymLink_Flutter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add: Lazy loading and refresh on pull down

Browse Source
This commit is contained in:
Sergey Elpashev
2024-05-15 00:34:05 +03:00
parent baf85776e9
commit 464f51238f
5 changed files with 239 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
lib/pages/main.dart
View File

@@ -1,15 +1,20 @@
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:gymlink_module_web/components/app_bar.dart';
import 'package:gymlink_module_web/components/item_card.dart';
import 'package:gymlink_module_web/pages/basket.dart';
import 'package:gymlink_module_web/pages/detail.dart';
import 'package:gymlink_module_web/pages/order_history.dart';
import 'package:gymlink_module_web/tools/prefs.dart';
import 'package:gymlink_module_web/tools/relative.dart';
import 'package:gymlink_module_web/tools/routes.dart';
import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
import 'package:url_launcher/url_launcher.dart';
const List<Map<String, String>> testData = [
{
"name": "Протеин",
"name": "Протеин 2",
"image": "product.png",
"price": "120",
"details": "Test details",
@@ -59,6 +64,25 @@ class MainPage extends StatefulWidget {
}
class _MainPageState extends State<MainPage> {
String searchText = '';
List<Map<String, String>> filteredData = [];
int cartLength = 0;
@override
void initState() {
super.initState();
filteredData = testData;
getCart().then((value) {
setState(() {
cartLength = value.length;
});
}).whenComplete(() {
if (mounted) {
setState(() {});
}
});
}
Future<void> _goToPage() async {
final Uri url = Uri.parse('https://google.com');
if (!await launchUrl(url, webOnlyWindowName: '_blank')) {
@@ -66,6 +90,19 @@ class _MainPageState extends State<MainPage> {
}
}
void _onLoad() async {
await Future.delayed(const Duration(milliseconds: 1000));
debugPrint('aye');
}
void _onSearch() {
setState(() {
filteredData = testData
.where((element) => (element['name']!).contains(searchText))
.toList();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
@@ -82,15 +119,18 @@ class _MainPageState extends State<MainPage> {
children: [
Expanded(
child: TextField(
onChanged: (value) => setState(() {
searchText = value;
}),
decoration: InputDecoration(
hintText: 'Search',
hintText: 'Поиск',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
suffixIcon: Padding(
padding: const EdgeInsets.only(right: 8),
child: ElevatedButton(
onPressed: _goToPage,
onPressed: _onSearch,
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(
vertical: 8,
@@ -113,35 +153,12 @@ class _MainPageState extends State<MainPage> {
),
),
getSpacer(context: context, flex: 2),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const BasketPage(),
));
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.all(0),
minimumSize: const Size(50, kMinInteractiveDimension),
backgroundColor: Theme.of(context).primaryColor,
shape: const CircleBorder(
side: BorderSide(
color: Colors.black,
width: 1,
),
),
),
child: const Icon(
Icons.shopping_basket,
color: Colors.white,
size: 24,
),
),
const SizedBox(
width: 8,
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
Navigator.of(context).push(CustomPageRoute(
builder: (context) => const HistoryPage(),
));
},
@@ -169,41 +186,94 @@ class _MainPageState extends State<MainPage> {
),
),
Expanded(
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: (MediaQuery.sizeOf(context).width ~/ 150)
.floor(), //TODO: Make it adaptive size
),
itemCount: testData.length,
itemBuilder: (context, index) {
final product = testData[index];
return ProductCard(
imagePath: Image(
image: AssetImage('assets/${product['image']!}'),
width: 50,
),
name: product['name']!,
price: product['price']!,
onTap: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => DetailPage(
name: product['name']!,
description: product['details']!,
price: product['price']!,
id: product['id']!,
image: Image(
image:
AssetImage('assets/${product['image']!}'),
width: 300),
),
child: LazyLoadScrollView(
onEndOfPage: _onLoad,
child: Stack(
children: [
GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: min(
(MediaQuery.sizeOf(context).width ~/ 200)
.toInt(),
8),
),
itemCount: filteredData.length,
itemBuilder: (context, index) {
final product = filteredData[index];
return ProductCard(
imagePath: Image(
image: Image.network(
'https://rus-sport.net/upload/iblock/311/topb85ez18pq0aavohpa5zipk2sbfxll.jpg')
.image,
width: 50,
),
name: product['name']!,
price: product['price']!,
onTap: () => Navigator.of(context).push(
CustomPageRoute(
builder: (context) => DetailPage(
name: product['name']!,
description: product['details']!,
price: product['price']!,
id: product['id']!,
image: Image(
image: AssetImage(
'assets/${product['image']!}'),
width: 300),
),
),
),
);
},
),
);
},
],
),
),
),
],
),
floatingActionButton: SizedBox(
height: 80,
width: 80,
child: FittedBox(
child: Stack(
children: [
FloatingActionButton(
onPressed: () => Navigator.of(context).push(CustomPageRoute(
builder: (context) => const BasketPage(),
)),
backgroundColor: Colors.transparent,
elevation: 0,
child: CircleAvatar(
radius: 25,
backgroundColor: Theme.of(context).primaryColor,
foregroundColor: Colors.white,
child: const Icon(Icons.shopping_cart_outlined)),
),
cartLength > 0
? Positioned(
right: -3,
bottom: 0,
child: Card(
color: Colors.red,
child: SizedBox(
width: 20,
child: Center(
child: Text(
cartLength.toString(),
style: const TextStyle(color: Colors.white),
),
),
),
),
)
: const SizedBox.shrink(),
],
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
);
}
}