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

classMinListextendsStatelessWidget {
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
appBar:AppBar(
title:Text('Min List'),
),
body:SafeArea(
child:SectionTableView(
sectionCount:7,
numOfRowInSection: (section) {
return section ==0?3:4;
},
cellAtIndexPath: (section, row) {
returnContainer(
height:44.0,
child:Center(
child:Text('Cell $section $row'),
),
);
},
headerInSection: (section) {
returnContainer(
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

classSectionListextendsStatelessWidget {
final controller =SectionTableController(sectionTableViewScrollTo: (section, row, isScrollDown) {
print('received scroll to $section $row scrollDown:$isScrollDown');
});
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
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) {
returnContainer(
height:44.0,
child:Center(
child:Text('Cell $section $row'),
),
);
},
headerInSection: (section) {
returnContainer(
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

classFullListextendsStatefulWidget {
@override_FullListStatecreateState() =>_FullListState();
}
class_FullListStateextendsState<FullList> {
@overridevoidinitState() {
// TODO: implement initStatesuper.initState();
}
@overridevoiddispose() {
// TODO: implement disposesuper.dispose();
}
int sectionCount =9;
final controller =SectionTableController(sectionTableViewScrollTo: (section, row, isScrollDown) {
print('received scroll to $section $row scrollDown:$isScrollDown');
});
final refreshController =RefreshController();
IndicatorrefreshHeaderBuilder(BuildContext context, int mode) {
returnClassicIndicator(
mode: mode,
releaseText:'释放以刷新',
refreshingText:'刷新中...',
completeText:'完成',
failedText:'失败',
idleText:'下拉以刷新',
noDataText:'',
);
}
IndicatorrefreshFooterBuilder(BuildContext context, int mode) {
returnClassicIndicator(
mode: mode,
releaseText:'释放以加载',
refreshingText:'加载中...',
completeText:'加载完成',
failedText:'加载失败',
idleText:'上拉以加载',
noDataText:'',
idleIcon:constIcon(Icons.arrow_upward, color:Colors.grey),
releaseIcon:constIcon(Icons.arrow_downward, color:Colors.grey),
);
}
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
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(constDuration(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) {
returnContainer(
height:44.0,
child:Center(
child:Text('Cell $section $row'),
),
);
},
headerInSection: (section) {
returnContainer(
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.