[Flutter]アイコン(Icon)に影(shadow)をつける(add)方法

どうも、ちょげ(@chogetarou)です。

アイコンに影をつける方法を紹介します。

方法

アイコンに影をつけるには、「decorated_icon」パッケージを使います。

まず、「pubspec.yaml」でパッケージを追加します。

dependencies:
  decorated_icon: ^1.2.1

そして、該当ファイルでパッケージをインポートします。

import 'package:decorated_icon/decorated_icon.dart';

次に、DecoratedIconを用意し、DecoratedIconの引数にアイコンを指定します。

DecoratedIcon(/*アイコン*/)

最後に、DecoratedIconの引数「shadows」に「[BoxShadow()]」を指定します。

DecoratedIcon(
  /*アイコン*/,
  shadows: [
    BoxShadow(),
  ],
)

あとは、BoxShadowの引数で影の設定をするだけです。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DecoratedIcon(
          Icons.flutter_dash,
          size: 200,
          shadows: [
            BoxShadow(
              color: Colors.blue, //色
              blurRadius: 42, //ぼやけ具合
            ),
          ],
        ),
      ),
    );
  }