[플러터] 이미지에 그림자 넣기

이미지의 바깥 선을 따라 그림자를 넣고자 할 때,

BoxShadow로는 이미지의 바깥선이 아닌 위젯에 그림자를 생성한다.

 

의도한대로 디자인하기 위해 패키지화 된 아래의 코드를 삽입해보자.

아래의 코드는 본래 패키지이지만 단순한 코드이므로 패키지로 추가하지 않고 코드로 빼서 사용하자.

simple_shadow | Flutter Package

library image_shadow;

import 'dart:ui';
import 'package:flutter/material.dart';

class ImageShadow extends StatelessWidget {
  final Widget child;
  final double opacity;
  final double sigma;
  final Color color;
  final Offset offset;

  ImageShadow({
    required this.child,
    this.opacity = 0.5,
    this.sigma = 2,
    this.color = Colors.black,
    this.offset = const Offset(2, 2),
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Transform.translate(
          offset: offset,
          child: ImageFiltered(
            imageFilter: ImageFilter.blur(sigmaY: sigma, sigmaX: sigma),
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.transparent,
                  width: 0,
                ),
              ),
              child: Opacity(
                opacity: opacity,
                child: ColorFiltered(
                  colorFilter: ColorFilter.mode(color, BlendMode.srcATop),
                  child: child,
                ),
              ),
            ),
          ),
        ),
        child,
      ],
    );
  }
}

 

 

사용

ImageShadow(
        child: Widget
        sigma: 7,
        offset: Offset(2, 2),
      )

적용 전 링고리 캐릭터

적용 후 링고리 캐릭터