一个带动画的背景模糊示例，同样使用BackdropFilter
import 'dart:ui';
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(
const MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
),
);
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: const Duration(seconds: 3));
controller.addListener(() {
setState(() {});
});
controller.repeat(reverse: true);
}
@override
void dispose() {
super.dispose();
controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Text('0' * 10000),
Align(
alignment: Alignment(controller.value, 0),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 2.0,
sigmaY: 2.0,
),
child: GestureDetector(
onTap: () {
print("clicked container");
},
child: Container(
alignment: Alignment.center,
color: Colors.lightBlue.withOpacity(0.1),
width: 400.0,
height: 400.0,
child: GestureDetector(
onTap: () => print("clicked text"),
child: const Text('Hello World'),
),
),
),
),
),
),
],
),
);
}
}
