Flutter: Bidirectional Scroll Datatable
Guide to create a data table with horizontal and vertical scrolling without using any extra package.
Recently I was working on a project where I needed to display a table with very specific characteristics:
That table had to have vertical scroll, and some columns had to be able to scroll horizontally.
Fortunately, thanks to the flexibility that Flutter widgets give us, it was relatively easy to get to the desired result, which would look something like this:
How will we do it?
The main idea, roughly speaking, would be to wrap 2 tables in a vertical scroll.
The first table will be the one we use to leave the columns fixed horizontally.
The second table will be used to implement the horizontal scroll.
Get to work!
Let’s start by creating our Flutter project and adding the data and model we will use.
For this example we are going to use data about the Spanish football league standings. This will be loaded from the “data.dart” file. We will also create a Team class that will help us to display the data.
In the first table, which will be the fixed column, we will show the position and the name of the team. In the second table, which will be the horizontally scrolling table, we will show the rest of the data.
Fixed table (FixedColumnWidget)
For this table that will not have horizontal scrolling we create a widget that will return a DataTable with a single column.
If you are not very familiar with the DataTable, remember that it receives a list of DataColumns for the columns and other list of DataRow for the rows. In turn, the DataRow receives a list of DataCells to show the cells that each row will have.
It is important to note that the DataTable needs the same number of elements in DataColumns and DataCells, otherwise we would get an error.
Horizontal scrolling table (ScrollableColumnWidget)
For the second table, the one with horizontal scrolling, we create another widget with the following widget tree:
Expanded ⇨ SingleChildScrollView ⇨ DataTable
With the Expanded widget we take the available space in the row. With the SingleChildScrollView we make it scrollable by setting the scrollDirection to Axis.Horizontal.
With this table we will display the rest of the data.
Remember that we have to have the same number of DataColumns as DataCells.
The Magic!
It’s time to use our two widgets: FixedColumnWidget and ScrollableColumnWidget. To do this, in “main.dart” file we will create the following widget tree:
Scaffold ⇨ SafeArea ⇨ SingleChildScrollView ⇨ Row
Inside the Row we put the two widgets, which are really two tables that look like a single table. With SingleChildScrollView we make the Row and its children vertically scrollable. In this case we do not set the scrollDirection as its default value is Axis.vertical, which is the one we need.
Conclusion
As I have already mentioned, the flexibility that Flutter provides allows us to achieve great things with just a few lines of code.
Whether you are new to Flutter or an experienced developer, you will never cease to be surprised by what can be achieved by “playing” with its catalogue of Widgets.
I hope this article has given you something useful.
