【FlutterFlow】ウィジェットの「幅」と「パッディング」の緻密な関係を知る：Dividerの外観設定

前回記事からの続きです。Dividerウィジェットを使ってページにエリア区切りをつけるテクニックを学習中です！

前回は、Dividerを設置して太さ、高さ、ラインスタイルなどをカスタマイズしました。いずれも重要な設定ですね。ちなみに、ラインスタイル設定メニューから破線と点線の意味の違いを知りましたｗ。まだまだ勉強することが世の中には多いと思うのでした。

Dividerの例

さて、今回は、後半編。Dividerの色、左右のパッディング、幅指定、これらの設定をやりましょう！

レッツゴー♪

色を変更する

まずは、色を変更してみましょう。DividerのプロパティでColorを見つけます。

色を指定すれば反映されます。それだけ。

簡単ですね～。でも、この色を動的に変更する方法もあるのですが、それはいずれ調べてご紹介したいな～と思います。

はい、色の変更でした。

左右のパッディングを調整

さて、お次は左右のパッディングです。下図のように、デフォルトでは左右に目いっぱい広がっています。ここでは、左右に余白をもうけましょう！

DividerのプロパティでIndentとEnd-Indentのメニューを見つけます。それぞれ、左側の余白、右側の余白と対応しています。いずれも20pxにしてみました。

するとこうなります。はい、左右に余白ができましたね。

でも、素朴な疑問が…。画面の横幅を広げたらどうなるの？このようになります。画面の幅が広がっても左右の余白は一定です。

ここで注意したいのは、Dividerウィジェットが占有するスペースです。

パッディングを変更しても、ウィジェットが占有するスペースに変更はないのです。占有しているスペースの中でDividerの線の表示が短くなっただけです。

以上、左右のパッディングです。

幅を指定する

では、Dividerウイジェットが占有する幅自体を変更してみましょう。

DividerプロパティのWidthに値を追加します。仮に300pxとします。

上記のパッディングは保持されたまま、Dividerウィジェットが占有する範囲が小さくなりましたね。

画面幅を広げるとこうなります。画面の幅に依存せず、Dividerウィジェットの幅は一定になりました。

デザイン的にはどちらがいいのでしょうね。ディバイダの幅が、動的に変わるのか、固定されているのか…。詳しい方、ぜひ教えてください！

幅の指定については、以上です。

はい、本日は、ここまで。Dividerの外観調整はこれで終わりです。

ちなみに、わたくし、CSSが書けないのでが、上記のような設定をしていると、CSSでどんな設定をすべきなのか想像できるようになりますね。これもノーコード・ツールを学ぶ意義なのではないかと思っております！

次回は、基本ウィジェットの一つ、コンテナをやります～。

ではまた。