Description:

sliver grid view

SliverGridView #

A sliver grid view

create a group grid view
support GridView's header and footer
support section's header and footer
support click section and scroll to the top
you can set different grid delegate for each section

Using #
add sliver_grid_view to your pubspec.yaml file:
dependencies:
sliver_grid_view: ^latest
copied to clipboard
import sliver_grid_view file that it will bu used:
import 'package:sliver_grid_view/sliver_grid_view.dart';
copied to clipboard
there is a example to help you
SliverGridView(
sections: 2,
persistentHeader: Container(
color: Colors.cyan,
alignment: Alignment.center,
child: const Text('persistent header'),
),
scrollDirection: Axis.vertical,
controller: ScrollController(),
sectionClickToScroll: true,
navigationBarHeight: 64,
header: Container(
color: Colors.red,
height: 100,
alignment: Alignment.center,
child: const Text('GridView header'),
),
footer: Container(
color: Colors.red,
height: 100,
alignment: Alignment.center,
child: const Text('GridView fotter'),
),
gridDelegate: (section) {
if (section == 0) {
return const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 10);
} else {
return const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10);
}
},
rowsInSection: (section) {
return section + 5;
},
itemBuilder: (context, indexPath) {
return Container(
color: Colors.blue,
alignment: Alignment.center,
child: Text('section: ${indexPath.section}, row: ${indexPath.row}'),
);
},
sectionHeaderBuilder: (section) {
return Container(
height: 44,
color: Colors.amber,
alignment: Alignment.center,
child: Text(
'section：$section header',
),
);
},
sectionFooterBuilder: (section) {
return Container(
height: 44,
color: Colors.blueGrey,
alignment: Alignment.center,
child: Text(
'section：$section footer',
),
);
},
),
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter