У меня есть анимированный виджет (изображение), расположенный вверху страницы, а под виджетом должен быть текст.
Я использую виджет перехода размера, и он подталкивает все виджеты под себя. Я не хочу, чтобы моя анимация нажимала на другие виджеты. Все должно оставаться на своих местах. Я ожидаю что-то вроде этого:
Widget _animation() {
Image img= Image.asset(
'assets/images/myImg.jpg',
);
_controller.forward(from: 0);
return SizeTransition(
child: img,
sizeFactor: CurvedAnimation(
curve: Curves.fastOutSlowIn,
parent: _controller,
),
);
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_animation(),
Text(
"My Text",
style: TextStyle(color: Colors.black87, fontSize: 30),
),
],
),
),
);
}
Мне нужен этот эффект кривой, могу ли я использовать для него другой виджет анимации?
как вы хотите переместить виджет?
Попробуйте использовать элемент Stack and Positioned, чтобы ваш элемент обрезал элементы, которые вы «перемещаете». Думайте об этом как о position: absolute
в html.
Попробуйте использовать SlideTransition
вместо SizeTransition
, потому что вы хотите переместить изображение сверху в реальную позицию.
Widget _animation() {
Image img= Image.asset(
'assets/images/myImg.jpg',
);
_controller.forward(from: 0);
return SlideTransition(
child: img,
position: Tween<Offset>(begin: Offset(0.0, -1.0), end: Offset.zero)
.animate(_controller),
);
}
Подробнее здесь:
https://docs.flutter.io/flutter/widgets/SlideTransition-class.html
На самом деле SizeTransition не будет работать, если вы задали родительскому элементу фиксированный размер. Я покажу вам, как это сделать, используя Stack
.
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Stack(
children: <Widget>[
Positioned(left: 0, child: _animation()),
Positioned(top: 100, child: Text("This is your text",)),
],
),
),
);
}
Это то, что я точно хочу, и я пробовал это раньше. Таким образом, он не запускает анимацию.
На самом деле SizeTransition
не будет работать, если вы задали его родителю фиксированный размер. Таким образом, вы можете использовать SlideTransition
или Stack
, первое уже предоставлено пользователем, если вы хотите, чтобы я предоставил вам реализацию Stack
, я могу это сделать.
Хорошо, я отредактировал решение, попробуйте сейчас.
тогда почему вы используете SizeTransition ? какой эффект вам нужен?