FlutterのDataTableのデフォルトで表示される横線を消す

この物語はFlutterのDataTable内部の横線を消すひとりのエンジニアの記録である。

デフォルトではこのように横線が表示される。
この横線を消して文字だけ表示したい。

この記事は Flutter 3.3.3 の結果を元に執筆してある。

結論

dividerの色を変える。

Theme(
  data: Theme.of(context).copyWith(
    dividerColor: Color.fromARGB(0, 0, 0, 0),
  ),
  child: DataTable(
    //装飾系のないシンプルなDataTable実装
  ),
)

しくみ

DataTableの横線が付く仕組みには2通りある。

• Border
• Divider

Border

DataTableには border というものがあって、外側や内側の線を指定できる。

DataTable(
  border: TableBorder(
    horizontalInside: BorderSide( //内側の横線
      width: 2,
      color: Color.fromARGB(255, 255, 0, 0),
    ),
  ),

DataTableの border を指定しない場合、border機能による線は付かない。
今回は線を付けたくないので border を指定しない。

DataTable(
  //border: コメントアウトで指定しないことを表している

Divider

border を指定しない場合でもdivider機能によって内部の横線がつく。
この線をコントロールするにはDataTableの dividerThickness というものを使う。これは太さを調整する機能がある。

DataTable(
  dividerThickness: 2.0,

デフォルト(指定しない場合)では1.0のようである。

しかしここに0.0を指定してもなぜか線が消えない。うっすら表示される。

DataTable(
  dividerThickness: 0.0, //なぜか線が消えない

今のバージョンでは線が消えないが、今後のアップデートにより、ここを0にすることで線が消えるようになったのなら、この対応で十分である。

結論

dividerの太さを0にしても線が消えないので、Themeによってdividerの色を透明(or背景と一緒)にする。

Theme(
  data: Theme.of(context).copyWith(
    dividerColor: Color.fromARGB(0, 0, 0, 0),
  ),
  child: DataTable(
    //装飾系のないシンプルなDataTable実装
  ),
)

線が消えた。