[flutter] 플러터(IndexedStack)에서 인덱스 변경시 애니메이션의 시간 지연을 설정하는 방법은 무엇인가요?

07 Dec 2023

flutter

아래는 IndexedStack 위젯에 애니메이션 시간 지연을 설정하는 예제 코드입니다.

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Indexed Stack Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text('Change Index'),
              onPressed: () {
                setState(() {
                  _index = (_index + 1) % 3;
                });
              },
            ),
            AnimatedSwitcher(
              duration: Duration(milliseconds: 500), // 애니메이션의 시간 지연 설정
              child: IndexedStack(
                index: _index,
                children: [
                  Container(
                    key: ValueKey(0),
                    width: 200,
                    height: 200,
                    color: Colors.red,
                  ),
                  Container(
                    key: ValueKey(1),
                    width: 200,
                    height: 200,
                    color: Colors.green,
                  ),
                  Container(
                    key: ValueKey(2),
                    width: 200,
                    height: 200,
                    color: Colors.blue,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MyWidget());
}

위의 코드에서 AnimatedSwitcher로 감싸진 IndexedStack을 사용하여 인덱스 변경 시 애니메이션이 적용됩니다. AnimatedSwitcher의 duration 속성을 사용하여 애니메이션의 시간 지연을 설정할 수 있습니다. 위의 코드에서는 0.5초(500밀리초)로 설정되어 있습니다.

이제 애니메이션이 적용된 IndexedStack 위젯을 사용하여 인덱스를 변경할 때, 애니메이션의 시간 지연을 설정할 수 있습니다.