Have different styling for Columns and Rows in DataTable Flutter

user_8940630 0
Viewed 1227

enter image description here

I want to create such table using data table or table. but data table does the decoration for the whole rows and columns. and table does not have margin parameter to add the margin between.

This is the table code:

return Table(
      defaultVerticalAlignment: TableCellVerticalAlignment.middle,
      children: [
        TableRow(
          decoration: BoxDecoration(
            color: Color.fromRGBO(237, 239, 245, 1),
            borderRadius: BorderRadius.all(Radius.circular(8)),
          ),
          children: [
            headerItem("Name"),
            headerItem("Email"),
            headerItem("Video Courses"),
            headerItem("Webinar Courses"),
            headerItem("Total course view time"),
            headerItem("Progress", flex: 1),
            headerItem("Details", flex: 1),
          ],
        ),
        TableRow(
          decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(12), boxShadow: [AppShadow.simple]),
          children: [
            item(
              child: Row(
                children: [CircleAvatar(), Text("\t\t\tKristin Watson", style: AppTextStyle.cardTitle)],
              ),
            ),
            item(child: FittedBox(child: Text("dolores.chambers@example.com", style: AppTextStyle.body))),
            item(child: Text("3 Courses", style: AppTextStyle.body)),
            item(child: Text("7 Courses", style: AppTextStyle.body)),
            item(child: Text("Time Spent: 8:46:13", style: AppTextStyle.body)),
            item(
              child: Align(
                alignment: Alignment.centerLeft,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    CircularProgressIndicator(value: 0.7, color: Colors.green),
                    Text("34%", style: AppTextStyle.body.copyWith(color: Colors.green)),
                  ],
                ),
              ),
            ),
            item(child: Text("See Profile", style: AppTextStyle.textButtonPrimary)),
          ],
        ),
        TableRow(
          decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(12), boxShadow: [AppShadow.simple]),
          children: [
            item(
              child: Row(
                children: [CircleAvatar(), Text("\t\t\tKristin Watson", style: AppTextStyle.cardTitle)],
              ),
            ),
            item(child: FittedBox(child: Text("dolores.chambers@example.com", style: AppTextStyle.body))),
            item(child: Text("3 Courses", style: AppTextStyle.body)),
            item(child: Text("7 Courses", style: AppTextStyle.body)),
            item(child: Text("Time Spent: 8:46:13", style: AppTextStyle.body)),
            item(
              child: Align(
                alignment: Alignment.centerLeft,
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    CircularProgressIndicator(value: 0.7, color: Colors.green),
                    Text("34%", style: AppTextStyle.body.copyWith(color: Colors.green)),
                  ],
                ),
              ),
            ),
            item(child: Text("See Profile", style: AppTextStyle.textButtonPrimary)),
          ],
        ),
      ],
    )

and this is datatable code:

DataTable(
        decoration: BoxDecoration(
          color: Colors.grey.shade100,
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(20),
        ),
        dataRowColor: MaterialStateProperty.all(Colors.white),
        columns: [
          DataColumn(label: Text("Num", style: AppTextStyle.tableItemHeader)),
          DataColumn(label: Text("Quiz Name", style: AppTextStyle.tableItemHeader)),
          DataColumn(label: Text("Lesson", style: AppTextStyle.tableItemHeader)),
          DataColumn(label: Text("Date", style: AppTextStyle.tableItemHeader)),
          DataColumn(label: Text("Details", style: AppTextStyle.tableItemHeader)),
        ],
        rows: [
          DataRow(
            cells: [
              DataCell(Text("07", style: AppTextStyle.tableItem)),
              DataCell(Text("Mid-Term Quiz", style: AppTextStyle.tableItem)),
              DataCell(Text("The art of  2D character design", style: AppTextStyle.tableItem)),
              DataCell(
                Row(
                  children: [
                    Image.asset("assets/calendar.png"),
                    SizedBox(width: 10),
                    Text("11/04/2020, 13:30 PM", style: AppTextStyle.tableItem),
                  ],
                ),
              ),
              DataCell(Image.asset("assets/menu_horizontal.png")),
            ],
          ),
        ],
      )
dart flutter datatable
2 Answers

Unfortunately, as far as I know now, there is no padding or margin setting for each TableRow/DataRow. But you can set empty TableRow/DataRow as a workaround:

TableRow emptyRow(int columnCount, double rowHeight){
  return TableRow(
    children: List.generate(columnCount, (index) => SizedBox(height: rowHeight,),),
  );
}

The horizontal margin you can set outside of the Table/DataTable.

If it still cannot fit your requirement, you may need to customize your table.

user_142728820

You can use below padded TableCell.

class TableCellPadded extends StatelessWidget {
  final EdgeInsets padding;
  final Widget child;
  final TableCellVerticalAlignment verticalAlignment;

  const TableCellPadded({Key key, this.padding, @required this.child, this.verticalAlignment}) : super(key: key);

  @override
  TableCell build(BuildContext context) => TableCell(
    verticalAlignment: verticalAlignment,
      child: Padding(
          padding: padding ?? EdgeInsets.all(5.0),
          child: child));
}

if you need more details please see this https://github.com/flutter/flutter/issues/36816

user_66665030
Related