Question 76058 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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.
enter image description here

I want a table that has an auto-fit height feature like this.
enter image description here

I tried to create my table custom but this isn’t working.
I can’t add the border in the vertical of each column.
enter image description here
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(),
                    ),
                  ),
                ),
              );
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search