How to Create Custom Table Widget in Flutter

Image From https://glints.com/id/lowongan/flutter-adalah/

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.

Image from Author

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.

Image from Author

Custom Table code 1(Image from Author)

Custom Table code 2(Image from Author)

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.

Bloc to get table data (Image from Author)

• And integrate the bloc with the custom table.

Implementation of Custom Table from Bloc Data (Image from Author)

• 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.

Add next page and previous page button (Image from Author)

• Then add a function so that each button when pressed will trigger the CustomTableBloc event of fetch data based on the curPage variable.

Custom Table (Image From Author)

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