Использование виджета SizeTransition

Question

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

https://docs.flutter.io/flutter/widgets/SizeTransition-class.html

Мне нужен мой логотип с этим эффектом в ссылке.Однако мне не хватает источника, чтобы узнать об этом виджете.Можете ли вы дать мне пример?Я пытался что-то вроде этого, но это не работает.

class _AnimTestState extends State<AnimTest>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    );
  }
}

Answer 1

Прежде всего, дайте контроллеру длительность, либо в конструкторе, подобном этому:

controller = AnimationController(vsync: this,duration: Duration(seconds: 1));

или в любом месте перед вызовом controller.forward(), например:

controller.duration = Duration(seconds: 1);

И последнее исамое главное, вам нужно запустить анимацию, позвонив

controller.forward();

Answer 2

class _AnimTestState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
    )..repeat(reverse: true); // automatically animation will be started
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    );
  }
}

Вы также можете использовать _controller.forward() или _controller.reverse() при нажатии кнопки, если вы не хотите, чтобы она запускалась автоматически, как я.

Answer 3

В дополнение к ответу Ryosuke (добавив controller.forward(), будьте осторожны, чтобы не делать это в build(), кроме как для целей тестирования), для достижения эффекта, отображаемого на странице, на которую вы ссылаетесь, вы можете рассмотреть

1. центрирование вашего SizeTransition виджета путем его оборачивания в Center() виджет
2. с указанием оси перехода путем добавления axisAlignment: -0.5 к вашему SizeTransition виджету (см. https://docs.flutter.io/flutter/widgets/SizeTransition/axisAlignment.html, чтобы узнать, почему).

@override
Widget build(BuildContext context) {
  controller.forward();
  return Scaffold(
    body: Center(
      child: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        axisAlignment: -0.5,
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    ),
  );
}