VerticalDividerをRowに配置したらすべきこと.

対処できる配置

Rowで何かしらのアイテム間にVerticalDividerを配置しているパターン。

以下のような場合だと表示されない

.dart

Row(
  children: const [
    Felxible(child: Text('Item 1')),
    VerticalDivider(),
    Flexible(child: Text('Item 1')),
  ],
)

正解はIntrinsicHeightで囲む。
何をしているかというと、このアイテムの高さを揃えるということをしている。
VerticalDividerの高さについての指定はないためこのような記法で他のアイテムと高さを揃えることを明示する必要がある。

IntrinsicHeight(
  child: Row(
    children: const [
      Felxible(child: Text('Item 1')),
      VerticalDivider(),
      Flexible(child: Text('Item 1')),
    ],
  ),
)

３０分ほど時間を費やしたので記事にしました。