Flutter で Tailwind CSS みたいなことやる

はじめに

この記事では、Flutterのスタイリングを効率化するコツを解説する。

対象とする読者

• FlutterでTailwind CSSみたいなことがしたい
• borderRadiusやmarginまたはpaddingの数値をそろえたい（基準を作る）
• 保守性（メンテナンス性）を高めたい

Tailwind CSS とは？

ユーティリティファーストであるCSSフレームワークの１つ。
SpacingやColorがあらかじめ用意されているので、開発を高速化できる。（数値合わせに気を取られない）

例えば、CSSである要素（tag）の角を丸めたい時のコードは以下になる。

.html

<div style="border-radius: 16px"></div>

これをTailwind CSSで書き換えると以下になる。

.html

<div class="rounded-2xl"></div>

同じスタイルを適用したい要素が多いほどメリットを活かせる。

Flutterのスタイリング

Flutterで要素（widget）の角を丸めたい時のコードは以下になる。

.dart

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.circular(16),
    ),
  ),
);

これを上部の左右のみ丸めるようにすると、、、

.dart

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(16),
      topRight: Radius.circular(16),
    ),
  ),
);

これはメンテナンス性が著しく低い。
後から角丸を8にするには、全てのRadius.circular(16)を書き換える必要がある。

角丸にはトレンドがあるので後から統一して変更できるようにしたい。

Flutterでユーティリティを作る

ここではenumを使う。

以降の例は

• Dart: 2.17以上（Enhanced enums）
• classに置き換え可

例えば、角丸なら以下のユーティリティになる。

border_roundness.dart

enum BorderRoundness {
  none(0),
  xs(4),
  sm(8),
  md(12),
  lg(16),
  xl(24),
  full(9999),
  ;

  const BorderRoundness(this.value);

  final double value;
}

これを使いたい際は、以下のようにすればよい。

widget.dart

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.all(
      Radius.circular(BorderRoundness.lg.value),
    ),
  ),
);

さらに便利なユーティリティ（コード例）

border_roundness.dart

import 'package:flutter/material.dart';

enum BorderRoundness {
  none(radius: Radius.circular(0), value: 0),
  xs(radius: Radius.circular(4), value: 4),
  sm(radius: Radius.circular(8), value: 8),
  md(radius: Radius.circular(12), value: 12),
  lg(radius: Radius.circular(16), value: 16),
  xl(radius: Radius.circular(24), value: 24),
  full(radius: Radius.circular(9999), value: 9999),
  ;

  const BorderRoundness({
    required this.radius,
    required this.value,
  });

  final Radius radius;
  final double value;
}

さいごに

以上のように、marginやpaddingもユーティリティ化できる。
活用形は無限大。

おまけ

コメントを書くとIDE（VS Code等）でドキュメントになる。
ちょーべんり💉

コメント例（コード）

border_roundness.dart

/// Border roundness values for styling widgets.
///
/// Inspired by [Tailwind CSS](https://tailwindcss.com/docs/border-radius). 🐬
///
/// ```dart
/// Container(
///   decoration: BoxDecoration(
///     borderRadius: BorderRadius.only(
///       topLeft: Radius.circular(BorderRoundness.sm.value),
///       topRight: Radius.circular(BorderRoundness.sm.value),
///     ),
///   ),
/// );
/// ```
///
/// The values are:
/// * [none] - 0
/// * [xs] - 4
/// * [sm] - 8
/// * [md] - 12
/// * [lg] - 16
/// * [xl] - 24
/// * [full] - 9999
enum BorderRoundness {
  none(0),
  xs(4),
  sm(8),
  md(12),
  lg(16),
  xl(24),
  full(9999),
  ;

  const BorderRoundness(this.value);

  final double value;
}