Best Way to Create Table In Flutter-CodePudding

Here i create table using using container and based on expanded using flex number to make header and the row relatable. I think this is not best way, but i don't know the other way how to create table like this, anyone can give me a suggestion?

Here is the code:

_tableSection

Widget _bookingListSection(OnlineBookingListController controller) {
    return Column(
      children: [
        _buildHeaderTable(),
        Expanded(
          child: ListView.builder(
            padding: EdgeInsets.zero,
            itemCount: controller.listBooking.length,
            itemBuilder: (context, index) {
              int lastIndex = controller.listBooking.length - 1;

              return _buildContentTable(
                index,
                lastIndex,
                context,
                controller,
              );
            },
          ),
        ),
      ],
    );
  }

_buildHeaderTable(),

Widget _buildHeaderTable() {
    return Container(
      width: double.maxFinite,
      height: AppSize.DIMEN_64.h,
      padding: EdgeInsets.fromLTRB(
        AppSize.DIMEN_22.h,
        AppSize.DIMEN_16.h,
        AppSize.DIMEN_22.h,
        AppSize.DIMEN_16.h,
      ),
      decoration: BoxDecoration(
        color: AppColors.GREY_BLACK_BACKGROUND,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(AppSize.RADIUS_8.h),
          topRight: Radius.circular(AppSize.RADIUS_8.h),
        ),
      ),
      child: Row(children: [
        _titleHeaderTable('Time', 3),
        _titleHeaderTable('Phone Number', 3),
        _titleHeaderTable('Customer Name', 3),
        _titleHeaderTable('Room', 3),
        _titleHeaderTable('Waitress', 3),
        _titleHeaderTable('Status', 2),
        _titleHeaderTable('Action', 4),
      ]),
    );
  }

Widget _titleHeaderTable(String title, int flexNum) {
    return Expanded(
      flex: flexNum,
      child: Container(
        child: Text(
          title,
          textAlign: TextAlign.left,
          maxLines: 2,
          style: textStyleW700S14.copyWith(
            color: AppColors.WHITE,
          ),
        ),
      ),
    );
  }

Then for the content i using flex inside row. Did you have any suggestion about this one?

CodePudding user response：

You can create Table in Flutter using Table and Data Table

Using Table Class:

Refer Table Class

Using DataTable Class:

Refer DataTable Class

You can refer this package also for Table

CodePudding user response：

Flutter has a Table class for this (but you can also do it using a simple Row Column combo).

Here's the link to the Table docs: Flutter Table

Container(
        color: Colors.white,
        padding: EdgeInsets.all(20.0),
        child: Table(
          border: TableBorder.all(color: Colors.black),
          children: [
            TableRow(children: [
              Text('Cell 1'),
              Text('Cell 2'),
              Text('Cell 3'),
            ]),
            TableRow(children: [
              Text('Cell 4'),
              Text('Cell 5'),
              Text('Cell 6'),
            ])
          ],
        ),
      )