flutter DataTable multiline wrapping and centering

user_4770729 0
Viewed 7616

I'm trying to have multiple, centered lines in the DataColumn() row of a DataTable() in flutter. It seems, though, that there is no support for centering or for multiple lines.

My DataTable Code looks something like this:

class TestDayData extends StatelessWidget {
  final List<String> timesList = [
    "This is",
    "a bunch",
    "of strings",
  ];

  final String day;

  TestDayData({Key key, this.day}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: DataTable(
        showCheckboxColumn: false,
        columns: [
          DataColumn(
            label: Center(child: Text(day)),
            numeric: false,
          ),
        ],
        rows: timesList
            .map(
              (times) => DataRow(cells: [
                DataCell(
                  Text(times.toString()),
                ),
              ]),
            )
            .toList(),
      ),
    );
  }
}

I made a dartpad file here to show the above code in a larger context. (the reason that I am putting multiple DataTables in a Row widget, instead of using one DataTable for all of the days, is because I plan on putting each of them into a Stack widget so that I can overlay appointments on top of the columns.)

https://dartpad.dev/44bbb788e0d5f1e6393dd38a29430981

So far, I can approximate a multi-lined, centered DataColumn row by adding spaces and using a newline character as seen in the dartpad file. (but there has to be a better way!)

flutter datatable
4 Answers

You are missing textAlign property in Text widget

DataTable(
  showCheckboxColumn: false,
  columns: [
    DataColumn(
      label: Center(child: Text(day, textAlign:TextAlign.center)),
        numeric: false,
      ),
    ],
    rows: timesList
      .map((times) => DataRow(cells: [
         DataCell(
           Text(times.toString(), textAlign: TextAlign.center),
         ),
      ]),
    )
    .toList(),
),
user_55574790

You can try this to center your text in Datacolumn

DataColumn(
label: Center( widthFactor: 1.4,
child: Text("HELLO", textAlign: TextAlign.center,
        style: TextStyle(fontSize: 18.0,),),)),

You can try this to center your text in Datacell for rows.

DataCell( Center(child: Text("Hello")))
user_173379430

For me on the DataColumn, using the Center widget or the textAlign property on the Text widget didn't work:

this is my solution:

DataColumn(
  label: Expanded(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [Text("text")],
    ),
  ),
),

DataCell worked just fine with the Center widget

user_73546140

I figured out the solution.

you just need to wrap the text with Center widget and then wrap it again with Expanded widget just like this:

DataTable(
          columns: [
                   DataColumn(label: Expanded(child: Center(child: Text('ID', textAlign: TextAlign.center,))),),
                   DataColumn(label: Expanded(child: Center(child: Text('name', textAlign: TextAlign.center,)))),
                   ]
          )
user_98835470
Related