애니메이션 백드롭 필터 플러터

애니메이션 백드롭 필터 플러터

페이드 인과 페이드 아웃으로 화면에 블러를 추가할 수 있는지 알고 싶었습니다. 당신은 알기라도 하나요? 현재 화면을 흐리게 하는 데 사용하고 있지만 화면이 나타날 때 색이 바래지 않습니다...

---

라는 위젯으로 에 애니메이션을 만들 수 있다는 것을 알게 되었습니다. 로 사용할 수 있습니다!

즐거운 시간 되세요.

---

블러에 대한 시그마 값을 애니메이션화할 수 있습니다,

TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0.0, end: 15.0),
  duration: const Duration(milliseconds: 500),
  builder: (_, value, child) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: value, sigmaY: value),
      child: child,
    );
  },
  child: DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.white.withOpacity(0.5),
  ),
),

https://api.flutter.dev/flutter/widgets/Tween Animation Builder-class.html

---

@Damon's와 거의 같은 대답이지만 실제 사례를 포함한다

class BackgroundBlurExample extends StatefulWidget {
  @override
  _BackgroundBlurExampleState createState() => _BackgroundBlurExampleState();
}

class _BackgroundBlurExampleState extends State<BackgroundBlurExample> {
  double _begin = 10.0;
  double _end = 0.0;

  void _animateBlur() {
    setState(() {
      _begin == 10.0 ? _begin = 0.0 : _begin = 10.0;
      _end == 0.0 ? _end = 10.0 : _end = 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: FlutterLogo(
              size: 100,
            ),
          ),
          
          // ... Things you want to blur above the IgnorePointer

          IgnorePointer( // This is in case you want to tap things under the BackdropFilter
            child: TweenAnimationBuilder<double>(
              tween: Tween<double>(begin: _begin, end: _end),
              duration: Duration(milliseconds: 500),
              curve: Curves.easeIn,
              builder: (_, value, __) {
                return BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: value,
                    sigmaY: value,
                  ),
                  child: Container(
                    width: double.maxFinite,
                    height: double.maxFinite,
                    color: Colors.transparent,
                  ),
                );
              },
            ),
          ),

          Align(
            alignment: Alignment.bottomCenter,
            child: ElevatedButton(
              onPressed: _animateBlur,
              child: Text('Animate'),
            ),
          )
        ],
      ),
    );
  }
}