問題となるコードと現象
Dividerのthicknessが「線の太さ」なので1.0を指定して線を引いてみます。
Row(
children: [
pageTitleContainer(),
const Divider(
thickness: 1.0,
),
mainContents(),
]
)
超適当ですけどRowでコンテンツを並べてその間に区切り線を入れたい時のコードです。
背景色が異なると下画像のように区切り線の位置が微妙にずれます。
原因がわかるまではContainer(height: 1)とかで区切り線作ってました。
原因
Dividerの定義ファイルは以下です、
const Divider({
super.key,
this.height,
this.thickness,
this.indent,
this.endIndent,
this.color,
})
~~~中略~~~
/// If this is null, then the [DividerThemeData.space] is used. If that is
/// also null, then this defaults to 16.0.
final double? height;
書いてますね、heightに何も指定しないとデフォルトで16.0になるみたいです。
thickness=線の太さと他の記事でも書かれていて、それしか指定していない記事も結構あるのですが、Widget自体のheightがデフォルトで16もあるのでデザインがちょっとずれますよね。
解決策
const Divider(
height: 1.0,
),
無事希望の位置に区切り線引けましたね。めでたし。
thicknessを0.0にするのと1.0にするのとではそんなに変わらなかったです。なんか若干色が薄いな程度です。
widgetは理解して正しく使いましょう、、
てかその辺気にする必要があるならContainerで設定する方が楽なのでは?
区切り線に見えないheightが欲しいパターンあるんですかね?
コンテンツの方にmargin付けた方が分かりやすいと思うし。
Containerで区切り線つけるのはパフォーマンス的に問題あるんですかねえ