A Flutter Package which help developers to add paging, filtering & searching efficiently, the package also works in combination of these operations altogether
To use list_manager
, follow these steps:
dependencies:
list_manager: ^latest_version
Model for data
class PostDataModel {
PostDataModel({
required this.userId,
required this.id,
required this.title,
required this.body,
});
int userId;
int id;
String title;
String body;
}
Define the controllers
late PagingController<PostDataModel> controller;
late FilterController<PostDataModel> filterController;
Configure Paging Controller
controller = PagingController(
pagingHelper: PagingHelper.init(error: error, loader: loader()),
loadData: {
return Future.delayed(
const Duration(seconds: 1),
() {
List<PostDataModel> list = [];
int page = (helper?.page ?? 0);
for (int i = 10 * (page); i < 10 * (page + 1); i++) {
var model = PostDataModel.fromMap(postData["data"][i]); //postData is a json stored locally
list.add(model);
}
controller.setPagingConfig(
helper?.copyWith(
hasNext: true,
loadNext: true,
page: (page + 1),
nextUrl: "nextUrl",
)
?? PagingHelper.init()
);
return Success(data: list);
},
);
},
);
Configure Filter Controller
filterController = FilterController(
loadFilters: loadFilters,
pagingController: PagingController(
pagingHelper: PagingHelper.init(error: filterError, loader: loader()),
loadData: fetch,
),
applyFilter: ({selFilters, query, helper}) async {
return Future.delayed(
const Duration(seconds: 1),
() {
List<PostDataModel> list = [];
int page = (helper?.page ?? 0);
for (int i = 10 * (page); i < 10 * (page + 1); i++) {
var model = PostDataModel.fromMap(filterData["data"][i]);
list.add(model);
}
if (page == 2) {
return const Failure(reason: "Custom Error Filter wala");
}
filterController.pagingController?.setPagingConfig(
helper?.copyWith(
hasNext: true,
loadNext: true,
page: (page + 1),
nextUrl: "nextUrl",
) ??
PagingHelper.init(),
);
return Success(data: list);
},
);
},
);
// load filters and then pass appropriate data for filter components
Future<Result<List<FilterData>>> loadFilters() async {
await Future.delayed(const Duration(seconds: 2));
final list = [
FDropdownData(
title: "User",
key: "user_id",
onChange: () {},
options: ["user1", "user2"],
),
FDropdownData(
title: "Project",
key: "project_id",
onChange: () {},
options: ["project1", "project2"],
),
FSliderData(
title: "Amount Range",
minKey: "amount_less_than",
maxKey: "amount_greater_than",
labels: const RangeLabels("0", "20000"),
values: const RangeValues(0, 20000),
min: 0,
max: 100000,
),
FDateData(
title: "Date",
startDateKey: "start_date",
endDateKey: "end_date",
start: DateTime.now(),
end: DateTime.now().add(const Duration(days: 34)),
),
FRadioData(
title: "Sort by Amount",
key: "sort_by_amount",
options: ["Ascending", "Descending"],
),
FRadioData(
title: "Sort by Date",
key: "sort_by_date",
options: ["Ascending", "Descending"],
),
];
return Success(data: list);
}
Future<Result<List<PostDataModel>>> fetch(PagingHelper? helper) async {
return Future.delayed(
const Duration(seconds: 1),
() {
List<PostDataModel> list = [];
int page = (helper?.page ?? 0);
for (int i = 10 * (page); i < 10 * (page + 1); i++) {
var model = PostDataModel.fromMap(filterData["data"][i]);
list.add(model);
}
filterController.setPagingConfig(
helper?.copyWith(
hasNext: true,
loadNext: true,
page: (page + 1),
nextUrl: "nextUrl",
) ??
PagingHelper.init(),
);
return Success(data: list);
},
);
}
Use the widget with configured filter and paging controllers
ListManager<PostDataModel>(
itemBuilder: (BuildContext context, PostDataModel data, int index) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10),
padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 10),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(10),
),
child: Text("${data.id}. ${data.title}"),
);
},
pagingController: controller,
filterController: filterController,
loader: const Center(
child: Text(
"Loading",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
),
error: (context, error) {
return Center(
child: Text(
"$error => Some Error Occured",
style: const TextStyle(color: Colors.red),
),
);
},
)
For using filters we can add components like this
Row(
children: [
Expanded(
child: SearchWidget(
filterController: filterController,
inputBorder: const OutlineInputBorder(),
)),
IconButton(
icon: const Icon(Icons.filter_alt),
onPressed: () async {
showFilterBottomSheet();
},
),
],
)
Now show bottomModalSheet for filter
void showFilterBottomSheet() async {
filterController.startLoadingFilters();
showModalBottomSheet(
context: context,
isDismissible: false,
showDragHandle: true,
scrollControlDisabledMaxHeightRatio: 0.8,
builder: (context) {
return FilterComponent(
title: "Filters",
controller: filterController,
);
},
);
}
To contribute to list_manager
, follow these steps:
- Fork this repository.
- Create a branch:
git checkout -b <branch_name>
. - Make your changes and commit them:
git commit -m '<commit_message>'
- Push to the original branch:
git push origin <project_name>/<location>
- Create the pull request.
Alternatively see the GitHub documentation on creating a pull request.