What package that can create table with auto-fit height with content and auto width, height of the table

Question

I want to create a table with the height of each row equal to the highest of the data. (fix the width of each column by me) And this table can set the width and height of this table with a double or null value. (null value will set auto width and height of the table) How to do that? Have any package that can do that?

I am using pluto_grid package, but I don't see this feature. My table is very long(width) because I must increase the width of some columns for some rows that contain a long content. The user must scroll to the right and the user doesn't want this.

This is my table.

I want a table that has an auto-fit height feature like this.

I tried to create my table custom but this isn't working. I can't add the border in the vertical of each column. This code:

    List data = [
      ['a', 'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb', '11111111'],
      ['ccccccccccccccccccccccccccccccccccccccc', 'ddddd', '2'],
      ['eeeeeeeeeeeee', 'ffffffffff', '333333333333333333333333'],
    ];
       return Container(
                height: 400,
                width: 400,
                color: Colors.green,
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: SingleChildScrollView(
                    child: Column(
                      children: data.map((e) {
                        Widget buildCell({required double width, required String text}) {
                          return Container(
                            alignment: Alignment.topLeft,
                            color: Colors.amber,
                            width: width,
                            child: Text(text),
                          );
                        }

                        Widget a = buildCell(width: 50, text: e[0]);
                        Widget b = buildCell(width: 100, text: e[1]);
                        Widget c = buildCell(width: 200, text: e[2]);

                        const BorderSide bs = BorderSide();

                        return Container(
                          decoration: BoxDecoration(border: Border(left: bs, right: bs, top: bs, bottom: e == data.last ? bs : BorderSide.none)),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              a,
                              b,
                              c,
                            ],
                          ),
                        );
                      }).toList(),
                    ),
                  ),
                ),
              );

Answer 1

try using ListView with ListTile.

eg:

ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(data[index][0]),
      subtitle: Text(data[index][1]),
    );
  },
)

In this example, data is a list of lists containing the data for the list items. The ListView.builder widget creates a scrollable list of items, and the itemBuilder function is called for each item in the list. The ListTile widget is used to display each item in the list, with the title and subtitle properties used to display the data.

by default the size of a ListTile widget will be determined by the content of its child widgets. Specifically, the height of the ListTile will be determined by the height of its title and subtitle widgets (if present), and the width of the ListTile will be determined by the width of its parent container.

Answer 2

For the default widget, use the table widget. ref: https://stackoverflow.com/a/66090095/17798537

for the package, use the syncfusion_flutter_datagrid. ref: https://github.com/syncfusion/flutter-widgets/issues/1105#issuecomment-1450139651