flutter_pagewise 0.3.0 flutter_pagewise: ^0.3.0 copied to clipboard
A library for widgets that load their content one page (or batch) at a time.
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_pagewise/flutter_pagewise.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Pagewise Demo',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(
text: 'PagewiseListView',
),
Tab(
text: 'PagewiseGridView'
)
]
),
),
body: TabBarView(
children: [
PagewiseListViewExample(),
PagewiseGridViewExample()
],
)
),
);
}
}
class PagewiseGridViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PagewiseGridView(
pageSize: 6,
totalCount: 40,
crossAxisCount: 2,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
childAspectRatio: 0.555,
padding: EdgeInsets.all(15.0),
itemBuilder: this._itemBuilder,
pageFuture: BackendService.getPage,
);
}
Widget _itemBuilder(context, entry) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[600]),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.grey[200],
image: DecorationImage(
image: AssetImage('assets/images/flutter.png'),
fit: BoxFit.fill
)
),
),
),
SizedBox(height: 8.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
entry['name'],
style: TextStyle(
fontSize: 18.0
)
)
),
SizedBox(height: 8.0),
Padding(
padding: EdgeInsets.symmetric(horizontal: 8.0),
child: Text(
'\$' + entry['price'].toString(),
style: TextStyle(
fontWeight: FontWeight.bold
),
),
),
SizedBox(height: 8.0)
]
)
);
}
}
class PagewiseListViewExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PagewiseListView(
pageSize: 6,
totalCount: 40,
padding: EdgeInsets.all(15.0),
itemBuilder: this._itemBuilder,
pageFuture: BackendService.getPage
);
}
Widget _itemBuilder(context, entry) {
return Column(
children: [
ListTile(
leading: Icon(
Icons.shopping_cart,
color: Colors.brown[200],
),
title: Text(entry['name']),
subtitle: Text('\$' + entry['price'].toString()),
),
Divider()
]
);
}
}
class BackendService {
static Future<List> getPage(pageIndex) async {
int size = 6;
var rng = Random();
List list = List.generate(pageIndex < 6 ? size : 5, (index) {
int dataNumber = index + pageIndex * size;
return {
'name': 'product' + dataNumber.toString(),
'price': rng.nextInt(100)
};
});
// The second page will take 3 seconds to load, while the rest of the pages will take 2
// This is useful to test cases where later pages might be fetched before earlier pages
await Future.delayed(Duration(seconds: pageIndex == 1? 3: 2));
return list;
}
}