4

How to create spreadhseet like Widget in Flutter (only for displaying data).

Currenly I have used Datatable but it does not support 1. fixed header 2. scrollable body.

I want following features:

  1. The headers shoule be fixed.
  2. the body should be scrollable (in both axes)

Currently my Datatable is inside a column > Expanded > SingleChildScrollView(horizontal) > SingleChildScrollView (vertical) > DataTable. Although I am able to scroll the complete Table in both the directions but 1. not simultaneously (i.e. it scrolls either horizontally or vertically), 2. Headers should not scroll, when scrolled vertically.

How can I achieve this ?

Suresh Kumar
  • 1,077
  • 1
  • 12
  • 21
  • You can get some idea from this user's answer : https://stackoverflow.com/questions/59709234/is-there-a-way-to-create-a-spreadsheet-like-editable-grid-on-flutter – Atish Shakya Jan 22 '20 at 06:26
  • You can use excel: ^1.1.5 , this will create empty excel sheet add data of your choice as parsed json , if any further explanation need , i can help you out – poonam kalra May 20 '21 at 10:50

2 Answers2

1

It seems that you need scroll controller that allows two or more scroll views to be in sync. In his case, you can use linked_scroll_controller plugin.

You can follow the example in this blog post for a step by step tutorial on how to achieve this.

Sample taken from the blog, check the complete source code here:

enter image description here

MαπμQμαπkγVπ.0
  • 5,887
  • 1
  • 27
  • 65
0

Here is an another package for this purpose: syncfusion_flutter_datagrid.

It has several features:

  • Editing - Allows users to edit cell values.
  • Sorting - Sort one or more columns in the ascending or descending order.
  • Stacked headers - Show unbound header rows.
  • Paging - Load data in segments.
  • Freeze Panes - Freeze the rows and columns when scrolling the grid.
  • And more, details in document

However, scrolling simultaneously is something different feature in this case.

You can try InteractiveViewer, but this not recommended in this case. Because both widgets, InteractiveViewer and DataTable, are very powerful widget that may build some conflict.

呂學洲
  • 1,123
  • 8
  • 19