Center the header title is "impossible" due to the invisible sorting arrow

[wer-mathurin]

Use case: We defined a table with the option sortArrowAlwaysVisible: false, the default. We want to center the header and we can't really center it. When you center the rows under the column this is disturbing.

This is cause by a always rendered invisible "Arrow" + SizedBox.... in the Data_table_2.dart file at line 422-431

label = Row(
      textDirection: numeric ? TextDirection.rtl : null,
      children: <Widget>[
        Flexible(child: label),
      ========== >    if (onSort != null) ...<Widget>[
          customArrows ??
              _SortArrow(
                visible: sorted,
                up: sorted ? ascending : null,
                duration: sortArrowAnimationDuration,
                sortArrowIcon: sortArrowIcon,
              ),
        const SizedBox(width: _sortArrowPadding),  
        ],<==========
      ],
    );

One possible fix can be ===>

label = Row(
      textDirection: numeric ? TextDirection.rtl : null,
      children: <Widget>[
        Flexible(child: label),
        if (onSort != null && sorted)
          Padding(
            padding: EdgeInsets.only(right: _sortArrowPadding),
            child: customArrows ??
                _SortArrow(
                  visible: sorted,
                  up: sorted ? ascending : null,
                  duration: sortArrowAnimationDuration,
                  sortArrowIcon: sortArrowIcon,
                ),
          )
      ],
    );

AND

Change the _SortArrawState build method to use the Visibility widget from the framework This way when the visibility is set to false, the component take 0px

Widget build(BuildContext context) {
    return Visibility(
      visible: widget.visible,
      child: Opacity(
        opacity: _opacityAnimation.value,
        child: Transform(
          transform: Matrix4.rotationZ(
              _orientationOffset + _orientationAnimation.value)
            ..setTranslationRaw(0.0, _arrowIconBaselineOffset, 0.0),
          alignment: Alignment.center,
          child: Icon(
            widget.sortArrowIcon,
            size: _arrowIconSize,
          ),
        ),
      ),
    );
  }

This way the sort arrow is not there the title is really center (when you want it to be center). From my perspective this is not a breaking change, but rather an improvement in term of layout expectation.

[maxim-saplin]

This behavior (invisible arrow taking space) ensure that text is not moved when sorting is applied and arrow is displayed. It follows the behavior of standard Flutter data table.

In your case as a workaround not requiring widget code change can be pusplaying empty fixed width widget to the right.

[wer-mathurin]

@maxim-saplin Fair enough..

Would you consider adding a feature in the datacolumn2: an alignment property?

This can reduce the boilerplate code required to achieve this.

I will propose to the flutter framework, but the chances of having it rapidly is low...even if I provide a PR for this.

BTW, I will provide a PR if you agree that can be a nice addition.

Thanks for considering.

[maxim-saplin]

Thanks. Happy to review the PR

[wer-mathurin]

@maxim-saplin See the PR