我创建了一个 Color Tween 动画来改变 Dialog 的背景颜色,但它仍然没有改变。
我的代码:
void _showDialog() {
AnimationController? animationController = AnimationController(
vsync: this,
duration: const Duration(
milliseconds: 1000,
)
);
Animation<Color?>? animation = ColorTween(
begin: Colors.black54,
end: Colors.redAccent,
).animate(animationController!.view);
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
backgroundColor: animation!.value,
elevation: 6,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
child: MyTextWidget(
onSubmitted: (text) {
animationController.forward();
}
);
}
).then((value) => {
print(value)
});
}
然后我使用 animationController.forward(),但没有任何反应。
我做错了什么?
答案 0 :(得分:1)
没有动画,因为你没有用任何可以动画的小部件包装你的对话框。请参阅下面的工作代码,我所做的唯一一件事就是用 AnimatedBuider 包装 Dialog 并调用 animationController.repeat()。您可以从您的自定义文本小部件调用 animationController.forward :
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
//theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidgets(),
),
),
);
}
}
class MyWidgets extends StatefulWidget {
@override
_MyWidgetsState createState() => _MyWidgetsState();
}
class _MyWidgetsState extends State<MyWidgets> with TickerProviderStateMixin {
void _showDialog() {
AnimationController animationController = AnimationController(
vsync: this,
duration: const Duration(
milliseconds: 1000,
));
Animation<Color> animation = ColorTween(
begin: Colors.black54,
end: Colors.redAccent,
).animate(animationController.view);
showDialog(
context: context,
builder: (BuildContext context) {
animationController.repeat();
return AnimatedBuilder(
animation: animation,
builder: (context, snapshot) {
return Dialog(
backgroundColor: animation.value,
elevation: 6,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)),
child: Container());
});
}).then((value) => {print(value)});
}
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () {
_showDialog();
//animationController
},
child: const Text("Show Dialog"),
);
}
}