【Flutter】paddingを効率的に書くためのpackageを公開した話🚀【like tailwind CSS】
こんにちは、はがくんです。
FlutterでPaddingを設定するのがちょっと面倒だったので、tailwindみたいに3文字くらいでシンプルに設定するためのPackage - simple_spacerを公開しました！🎊
(よかったらGoodボタンお願いします🙏✨)
FlutterのPadding、ちょっとだけ書くのめんどくさくないか！？
PaddingはFlutterの中でもトップクラスに多く使うWidgetの1つ。ホワイトスペースはUIデザインの最も重要な要素です。必然的に書く回数が多くなりますよね。
でも、ちょっと書くのが面倒だと思いませんか・・・？
例えば、左に2pxのpaddingを設定するためにこのくらいの記載が必要です。
Padding(
padding: const EdgeInsets.only(left: 2),
child : ...
)
Tailwind cssを使った経験がある方ならお分かりの通り、Tailwindならclassにpl-2と設定するだけで、同じようなことができます。
const EdgeInsets.only(left: x)やconst EdgeInsets.symmetric(horizontal: x)などいちいち設定することなく、Padding Widgetに'pl-2'と書くだけで使えるようにしたい！
と思ったのが、今回のPackageを作ったモチベーションです。
simple_spacerのつかいかた
なにはともあれインストール。
flutter pub add simple_spacer
シンプルに全方向に2pxのpaddingを設定したいとき
pl-2を指定します。
Padding(
padding: pl_2, // const EdgeInsets.only(left: 2)と同じ
// pl-2ではなくpl_2なので注意！
// pr_右方向
// pt_上方向
// pb_下方向
child : ...
)
x方向に2pxのpaddingを設定したいとき
px_2を指定します。
Padding(
padding: px_2, // const EdgeInsets.symmetric(horizontal: 2)と同じ
//y方向なら py_2 と記載。
child : ...
)
非対称なpaddingを設定したいとき
ここからがちょっと便利なところなのですが、子Widgetに対して、全体に2pxのpaddingを与えつつ、上方向に追加で10pxのpaddingを与えたいときはこのように記載できます。
Padding(
padding: p_2.add(pt_10), // add() でpaddingを連結することができる。
child : ...
)
どうでしょうか？
結構、少ない記載で自由度高くpaddingをいじれる...ようになったのではないでしょうか？🙌
実装はめっちゃ簡単です
packageつくった！とか言っちゃってますが、実装は至ってシンプル。
誰でもできるカンタンなお仕事です。
//padding all the way around
EdgeInsets p_0 = const EdgeInsets.all(0);
EdgeInsets p_1 = const EdgeInsets.all(1);
EdgeInsets p_2 = const EdgeInsets.all(2);
...
こんな感じでずらーっと並べてあるだけです。ダサいなー笑
paddingの各数値はTailwind CSSの実装に合わせてあるので、12pxまでは1px刻み。24pxまでは2px刻みといった感じで数値を設定しています。もし実装されていない数値を使いたい方はうまいこと数値を変えたり追加したりしながら使っていただけると良いかと思います。
まとめ
実は、初めてのpackage公開だったのですが、ちゅーやんさんの記事を参考にしたら、思ったよりも簡単に（1時間程度で）公開までこぎつけることが出来ました。ちゅーやんさん、ありがとうございます！
今回のコードはコチラで公開しておりますので、気になる方はぜひご覧ください！
よかったらTwitterもよろしくお願いします！
Discussion