Анимированный виджет подталкивает другие виджеты

У меня есть анимированный виджет (изображение), расположенный вверху страницы, а под виджетом должен быть текст.

Я использую виджет перехода размера, и он подталкивает все виджеты под себя. Я не хочу, чтобы моя анимация нажимала на другие виджеты. Все должно оставаться на своих местах. Я ожидаю что-то вроде этого:

макет

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),
      ),
    ],
  ),
 ),
);
}

тогда почему вы используете SizeTransition ? какой эффект вам нужен?

diegoveloper 08.04.2019 03:35

Мне нужен этот эффект кривой, могу ли я использовать для него другой виджет анимации?

jozeru 08.04.2019 03:47

как вы хотите переместить виджет?

diegoveloper 08.04.2019 03:51
0
3
454
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Попробуйте использовать элемент 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",)),
        ],
      ),
    ),
  );
}

Это то, что я точно хочу, и я пробовал это раньше. Таким образом, он не запускает анимацию.

jozeru 08.04.2019 11:55

На самом деле SizeTransition не будет работать, если вы задали его родителю фиксированный размер. Таким образом, вы можете использовать SlideTransition или Stack, первое уже предоставлено пользователем, если вы хотите, чтобы я предоставил вам реализацию Stack, я могу это сделать.

CopsOnRoad 08.04.2019 12:37

Хорошо, я отредактировал решение, попробуйте сейчас.

CopsOnRoad 08.04.2019 12:44

Другие вопросы по теме