Flutter: Creating a two direction scrolling table with fixed head and column

Today I am going to demonstrate how to create a two direction (vertical and horizontal) scrolling data table with flutter, this is how it looks like:

If you want to view the full source code and play around with it, check here.

First of all, I have used linked_scroll_controller, let’s install it by adding it to our pubspec.yaml :

Then we create a widget for table cells:

Here is the table head, note that we added a parameter scrollController to let it sync its scroll position with the table body:

This is the table body, note that it also has a scrollController parameter. Since the first column is fixed and we can scroll the rest columns horizontally, we added two ListViews here, see how we used linked_scroll_controller to sync the scrolling positions:

And finally, putting it all together:

Conclusion

So this is how we create a two direction scrollable data table in flutter. The most complicated part is there are multiple scroll controllers, you have to very clear about which ListView is responsible to which part, and not to mix them up. Click here to view the full sample source code.

If this article helped you, smash the clap button and share it anywhere to let this free article help even more people!

A JavaScript/Node/Flutter developer who love technical stuffs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store