flutter_section_table_view 1.0.5
flutter_section_table_view #
- A iOS like table view including section, row, section header and divider
- Support both Android and iOS
- Support drop-down refresh and pull-up load (based on pull_to_refresh)
- you can animate/jump to specific index path
- you can know which index path it scrolled to, when scrolling
Usage #
minimal #
class MinList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Min List'),
),
body: SafeArea(
child: SectionTableView(
sectionCount: 7,
numOfRowInSection: (section) {
return section == 0 ? 3 : 4;
},
cellAtIndexPath: (section, row) {
return Container(
height: 44.0,
child: Center(
child: Text('Cell $section $row'),
),
);
},
headerInSection: (section) {
return Container(
height: 25.0,
color: Colors.grey,
child: Text('Header $section'),
);
},
divider: Container(
color: Colors.green,
height: 1.0,
),
),
),
);
}
}
Section List which can scroll to specific index path #
class SectionList extends StatelessWidget {
final controller = SectionTableController(sectionTableViewScrollTo: (section, row, isScrollDown) {
print('received scroll to $section $row scrollDown:$isScrollDown');
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Section List'),
),
floatingActionButton: FloatingActionButton(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[Text('Scroll'), Icon(Icons.keyboard_arrow_down)],
),
onPressed: () {
controller.animateTo(2, -1).then((complete) {
print('animated $complete');
});
}),
body: SafeArea(
child: SectionTableView(
sectionCount: 7,
numOfRowInSection: (section) {
return section == 0 ? 3 : 4;
},
cellAtIndexPath: (section, row) {
return Container(
height: 44.0,
child: Center(
child: Text('Cell $section $row'),
),
);
},
headerInSection: (section) {
return Container(
height: 25.0,
color: Colors.grey,
child: Text('Header $section'),
);
},
divider: Container(
color: Colors.green,
height: 1.0,
),
controller: controller, //SectionTableController
sectionHeaderHeight: (section) => 25.0,
dividerHeight: () => 1.0,
cellHeightAtIndexPath: (section, row) => 44.0,
),
),
);
}
}
Full function list which can pull up/down refresh #
class FullList extends StatefulWidget {
@override
_FullListState createState() => _FullListState();
}
class _FullListState extends State<FullList> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
}
int sectionCount = 9;
final controller = SectionTableController(sectionTableViewScrollTo: (section, row, isScrollDown) {
print('received scroll to $section $row scrollDown:$isScrollDown');
});
final refreshController = RefreshController();
Indicator refreshHeaderBuilder(BuildContext context, int mode) {
return ClassicIndicator(
mode: mode,
releaseText: '释放以刷新',
refreshingText: '刷新中...',
completeText: '完成',
failedText: '失败',
idleText: '下拉以刷新',
noDataText: '',
);
}
Indicator refreshFooterBuilder(BuildContext context, int mode) {
return ClassicIndicator(
mode: mode,
releaseText: '释放以加载',
refreshingText: '加载中...',
completeText: '加载完成',
failedText: '加载失败',
idleText: '上拉以加载',
noDataText: '',
idleIcon: const Icon(Icons.arrow_upward, color: Colors.grey),
releaseIcon: const Icon(Icons.arrow_downward, color: Colors.grey),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Full List'),
),
floatingActionButton: FloatingActionButton(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[Text('Scroll'), Icon(Icons.keyboard_arrow_down)],
),
onPressed: () {
controller.animateTo(2, -1).then((complete) {
print('animated $complete');
});
}),
body: SafeArea(
child: SectionTableView(
refreshHeaderBuilder: refreshHeaderBuilder,
refreshFooterBuilder: refreshFooterBuilder,
enablePullDown: true,
enablePullUp: true,
onRefresh: (up) {
print('on refresh $up');
Future.delayed(const Duration(milliseconds: 2009)).then((val) {
refreshController.sendBack(up, RefreshStatus.completed);
setState(() {
if (up) {
sectionCount = 5;
} else {
sectionCount++;
}
});
});
},
refreshController: refreshController,
sectionCount: sectionCount,
numOfRowInSection: (section) {
return section == 0 ? 3 : 4;
},
cellAtIndexPath: (section, row) {
return Container(
height: 44.0,
child: Center(
child: Text('Cell $section $row'),
),
);
},
headerInSection: (section) {
return Container(
height: 25.0,
color: Colors.grey,
child: Text('Header $section'),
);
},
divider: Container(
color: Colors.green,
height: 1.0,
),
controller: controller, //SectionTableController
sectionHeaderHeight: (section) => 25.0,
dividerHeight: () => 1.0,
cellHeightAtIndexPath: (section, row) => 44.0,
),
),
);
}
}
iOS | android |
---|---|
![]() | ![]() |
Getting Started #
For help getting started with Flutter, view our online documentation.
For help on editing package code, view the documentation.
[0.0.1] - release first version
[0.0.2] - change dart verstion
[0.0.3] - add example
[0.0.4] - add screen shot
[0.0.5] - add animateTo/jumpTo feature
[0.0.6] - add scroll detection
[0.1.0] - fix bug and release 0.1.0
[0.1.1] - change divider layout
[0.2.0] - add pull up/down refresh
[0.2.1] - fix readme
[0.2.2] - fix readme
[0.2.3] - format codes
[0.2.4] - fix dependencies
[0.2.5] - fix hint
[1.0.0] - release stable version
[1.0.1] - add always scroll physics
[1.0.2] - re-format
[1.0.3] - fix bug for empty list
[1.0.4] - some update
[1.0.5] - some update
example #
A new Flutter project.
Getting Started #
For help getting started with Flutter, view our online documentation.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
flutter_section_table_view: ^1.0.5
2. Install it
You can install packages from the command line:
with Flutter:
$ flutter pub get
Alternatively, your editor might support flutter pub get
.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
import 'package:flutter_section_table_view/flutter_section_table_view.dart';
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
85
|
Health:
Code health derived from static analysis.
[more]
|
100
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
100
|
Overall:
Weighted score of the above.
[more]
|
92
|
Learn more about scoring.
We analyzed this package on Dec 9, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.6.1
- pana: 0.13.1+4
- Flutter: 1.12.13+hotfix.2
Health suggestions
Format lib/flutter_section_table_view.dart
.
Run flutter format
to format lib/flutter_section_table_view.dart
.
Dependencies
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=2.0.0-dev.28.0 <3.0.0 | ||
flutter | 0.0.0 | ||
Transitive dependencies | |||
collection | 1.14.11 | 1.14.12 | |
meta | 1.1.8 | ||
sky_engine | 0.0.99 | ||
typed_data | 1.1.6 | ||
vector_math | 2.0.8 | ||
Dev dependencies | |||
flutter_test |