我构建了一个简单的代码来知道如何使用Overlay
带有动画的菜单,在此代码中,当我单击按钮时,我们可以看到简单的Container
以及其他一些小部件,我很累为此设置高度动画,这是我的问题,在Container
内的Overlay
中,我有一些小部件,例如ListTile
,此项的数量是可选的
我们如何在没有height
参数的情况下通过指定子项计数来调整Container的高度动画大小
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Overlay Menu',
home: OverlayMenu(),
);
}
}
class OverlayMenu extends StatefulWidget {
@override
State<StatefulWidget> createState() => _OverlayMenu();
}
class _OverlayMenu extends State<OverlayMenu> with TickerProviderStateMixin {
AnimationController _animationController;
Animation<double> _animation;
@override
void initState() {
super.initState();
_animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 250));
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: RaisedButton(
child: Text('Click Here'),
onPressed: () {
return _showOverlayHomeMenu(context, _animationController);
},
),
),
);
}
Future<void> _showOverlayHomeMenu(BuildContext context, AnimationController animationController) async {
final OverlayState _overlayState = Overlay.of(context);
final OverlayEntry _overlayEntry = OverlayEntry(builder: (context) {
return Positioned(
top: kToolbarHeight - 20,
right: 20.0,
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
color: const Color(0xFF32313C),
child: AnimatedSize(
vsync: this,
curve: Curves.fastLinearToSlowEaseIn,
duration: const Duration(milliseconds: 2000),
child: Container(
width: 200.0,
height: 300.0, //should be optional with children size
child: const ListTile(
title: Text(
'aaaaaaa',
style: TextStyle(color: Colors.white),
),
leading: Icon(
Icons.assessment,
color: Colors.white,
),
),
),
),
));
});
_animationController.addListener(() {
_overlayState.setState(() {});
});
_overlayState.insert(_overlayEntry);
_animationController.forward();
await Future.delayed(const Duration(milliseconds: 3500));
_animationController.reverse();
_overlayEntry.remove();
}
}