如何为 ListView 生成器子 flutter 设置动画？

Question

Hi i am new to Flutter development and Basically i am working on quiz type demo. when there will be 1 question and dynamic answers in ListView and after selecting answer and pressing next button another question will be there with dynamic answers.

above demo is working fine but i wan to animate ListView dynamic child from right to left.

To animate listview items i have tried https://pub.dev/packages/flutter_staggered_animations but it applies to entire ListView only for the 1st time and not applied for the rest of question answers.

Can anyone please let me know how can i do this or give me any reference link.

Answer 1

you can try this package This package will help you to animate your list item.

https://pub.dev/packages/auto_animated

List usage example

// With predefined options
LiveList.options(
  options: options,

  // Like ListView.builder, but also includes animation property
  itemBuilder: buildAnimatedItem,

  // Other properties correspond to the 
  // `ListView.builder` / `ListView.separated` widget
  scrollDirection: Axis.horizontal,
  itemCount: 10,
);

// Or raw
LiveList(
  delay: /*...*/,
  showItemInterval: /*...*/,
  // ... and all other arguments from `LiveOptions` (see above)
);

Answer 2

I highly recommend you to use PageView in this case, Just create new file and paste my code to see how it's work.

The code do what you want exactly, but off course doesn't implements any styling or your app mechanism. I just used buttons for simplicity. Implement it with your desired way:

import 'package:flutter/material.dart';

class TestPage extends StatelessWidget {
  TestPage({Key? key}) : super(key: key);
  final PageController controller = PageController();
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: PageView(
            controller: controller,
            children: List.generate(
                6, (index) => QuestionPage(questionNumber: index)),
          ),
        ),
        Row(
          children: [
            Expanded(
              child: ElevatedButton(
                onPressed: () {
                  controller.previousPage(
                      duration: const Duration(milliseconds: 500),
                      curve: Curves.easeInOut);
                },
                child: const Text('Back'),
              ),
            ),
            const SizedBox(width: 20),
            Expanded(
              child: ElevatedButton(
                onPressed: () {
                  controller.nextPage(
                      duration: const Duration(milliseconds: 500),
                      curve: Curves.easeInOut);
                },
                child: const Text('Next'),
              ),
            ),
          ],
        )
      ],
    );
  }
}

class QuestionPage extends StatelessWidget {
  const QuestionPage({Key? key, required this.questionNumber})
      : super(key: key);

  final int questionNumber;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Text(
            'Question $questionNumber',
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 8),
          ElevatedButton(
            onPressed: () {},
            child: const Text('Answer 1'),
          ),
          const SizedBox(height: 8),
          ElevatedButton(
            onPressed: () {},
            child: const Text('Answer 2'),
          ),
          const SizedBox(height: 8),
          ElevatedButton(
            onPressed: () {},
            child: const Text('Answer 3'),
          ),
          const SizedBox(height: 8),
          ElevatedButton(
            onPressed: () {},
            child: const Text('Answer 4'),
          ),
        ],
      ),
    );
  }
}