0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【dart】Dividerで区切り線を引くとデザインが微妙に崩れる問題

Posted at

問題となるコードと現象

Dividerのthicknessが「線の太さ」なので1.0を指定して線を引いてみます。

Row(
  children: [
    pageTitleContainer(),

    const Divider(
      thickness: 1.0,
    ),

    mainContents(),
  ]
)

超適当ですけどRowでコンテンツを並べてその間に区切り線を入れたい時のコードです。
背景色が異なると下画像のように区切り線の位置が微妙にずれます。
原因がわかるまではContainer(height: 1)とかで区切り線作ってました。

スクリーンショット 2023-01-20 11.34.00.png

原因

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,
),

スクリーンショット 2023-01-20 11.44.25.png

無事希望の位置に区切り線引けましたね。めでたし。
thicknessを0.0にするのと1.0にするのとではそんなに変わらなかったです。なんか若干色が薄いな程度です。

widgetは理解して正しく使いましょう、、
てかその辺気にする必要があるならContainerで設定する方が楽なのでは?
区切り線に見えないheightが欲しいパターンあるんですかね?
コンテンツの方にmargin付けた方が分かりやすいと思うし。
Containerで区切り線つけるのはパフォーマンス的に問題あるんですかねえ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?