🐼

Flutter で Icon に斜線を引き "オン / オフ" アイコンを作成する

2024/01/01に公開

Flutter

Dart

icon

tech

はじめに

FlutterのIconsパッケージは、豊富なアイコンセットを提供しており,アプリケーションに視覚的な魅力を加えるのに役立ちます.しかし,当たり前ですがすべてのアイコンに対応するバリエーションが用意されているわけではありません.

例えば,「mic」アイコンに対して「mic_off」アイコンは含まれていますが，「touch」アイコンに対して,「touch_off」アイコンは含まれていません.

Icons.mic
Icons.mic_off
Icons.mic

Icons.touch_app

Icons.touch_app_off (存在しない)

本記事では「ON」　アイコンはあるんだけど，「OFF」アイコンが無い　... という痒いところに手が届かない方がコピペで手っ取り早くアイコンを作成できればと思い書いております．

方法

まず，　斜線を描画するクラスがこんな ⇩ 感じ

class SlashPainter extends CustomPainter {
  
  final Color lineColor;
  final Color backgroundColor;
  final bool downRight;

  SlashPainter({
    Color? lineColor,
    Color? backgroundColor,
    bool? downRight,
  })
  : lineColor       = lineColor ?? Colors.grey,
    backgroundColor = backgroundColor ?? Colors.white,
    downRight = downRight ?? true;

  @override
  void paint(Canvas canvas, Size size) {
    
    final paint = Paint();

    paint.color = backgroundColor;
    paint.strokeWidth = 3.5;
    _drawLine(canvas, size, paint);

    paint.color = lineColor;
    paint.strokeWidth = 1.5;
    _drawLine(canvas, size, paint);
  }

  // 線を描画するヘルパーメソッド
  void _drawLine(Canvas canvas, Size size, Paint paint) {
    if(downRight){
      canvas.drawLine(const Offset(0, 0), Offset(size.width, size.height), paint);
    } else {
      canvas.drawLine(Offset(0, size.height), Offset(size.width, 0), paint);
    }
  }

  @override
  bool shouldRepaint(covariant SlashPainter oldDelegate) {
    return false;
  }
}

lineColorには斜線の色を渡して， backgroundColorには背景色を指定します．
downRightには右下がりの斜線にしたいならtrueを左下りの斜線にしたいならfalseを指定します．
指定しない場合，'Colors.grey', Colors.white, trueがデフォルトで指定されます．
続いて ⇩ のように Stack で Icon と　先ほどの SlashPainter を重ねて描画してしまえば OK

  child: Stack(
    alignment: Alignment.center,
    children: [
      Icon(icon, color: Colors.grey, size: 20),
      if(slash)
      SizedBox(
        width: 15, height: 15,
        child: CustomPaint(
          painter: SlashPainter(
            lineColor: Colors.grey,
            backgroundColor: Theme.of(context).scaffoldBackgroundColor,
            downRight: true
          )
        )
      )
    ],
)

描画すると ⇩ こんな感じ

ライトモードでの touch ON/OFFアイコン

dダークモードでの touch ON/OFFアイコン

アイコンの色と斜線の向きを変えてみるとTeamsのマイクON/OFFみたいになりますね．

ご参考になったら嬉しいです😀
Flutter1年目なので,「もっといい方法があるよ！」という方はぜひコメントのほどよろしくお願いいたします 🙇

はじめに

方法

Discussion