🙆‍♀️

【Flutter】Dividerのheightとthicknessの違いについて

に公開
Flutter
Dart
divider
thickness
tech

はじめに

DatePickerDialogを使うことがあり、内部のコードを読んでいるとこんなコードに出会いました。

Divider(height: 0, color: datePickerTheme.dividerColor),

heightが0の場合どうなるんだろうと興味を持ったため記事にしようと思います。

Dividerについて

Dividerの内部のコードは以下のようになっています。

   return SizedBox(
     height: height,
     child: Center(
       child: Container(
         height: thickness,
         margin: EdgeInsetsDirectional.only(start: indent, end: endIndent),
         decoration: BoxDecoration(
           borderRadius: radius,
           border: Border(bottom: createBorderSide(context, color: color, width: thickness)),
         ),
       ),
     ),
   );

実際に線を引いている箇所はContainerのdecorationのborderになります。そしてheightがDividerの高さに相当し、線の太さはthicknessで決まります。そしてthicknessのデフォルトの値が1なので今回のようにheight < thickness の場合はどうなるのでしょうか？

検証

以下のコードのheightとthicknessを変えてみてみます。

    return Scaffold(
     body: Column(
       children: [
         Container(
           height: 200,
           color: Colors.orange,
         ),
         SizedBox(
           width: 300,
           child: Divider(height: 20, thickness: 10, color: Colors.grey),
         ),
       ],
     ),
   );
height: 20, thickness: 10 height: 10, thickness: 10 height: 0, thickness: 10

height: 0, thickness: 10の場合を見て頂くと、この場合Divider自体は高さを持たないため、上のContainerに重なるように線が引かれます。

Discussion