How to Create Custom Table Widget in Flutter
Flutter already has a default table class widget that can display data in a table. but the Flutter table has many limitations. One of its limitations is flutter table can’t display data with pagination.
In this article, I will show how to modify your basic flutter table and add some new functionality to your table
Project Requirement
- flutter 3.7.12
- bloc package
- flutter_bloc package
flutter 3.7.12 can be obtained from Flutter docs and all other packages can be obtained from Pub dev
How To Create Custom Table Widget
- First, you need to create a basic flutter table that displays data.
The custom table above will display data based on a List of strings that will be sent to the Custom table widget.
- The Next Step is to make the bloc implementation that will emit data based current page and data taken.
- And integrate the bloc with the custom table.
- Now we will add the next page and previous page buttons inside the table. Wrap the Table widget with columns and then add Container that contains the next page and previous page buttons below it.
- Then add a function so that each button when pressed will trigger the CustomTableBloc event of fetch data based on the curPage variable.
Now our custom table widget with some additional functionality is done. With this example, we can add other functionality to the basic flutter table like data sorting and others.
References
- Bloc package in pub dev: https://pub.dev/packages/flutter_bloc/install
- flutter documentation: https://docs.flutter.dev/
- GitHub code : https://github.com/masssster/CustomTable