[flutter] 플러터(IndexedStack)에서 화면 전환 애니메이션을 사용할 수 있나요?

07 Dec 2023

flutter

IndexedStack 위젯은 여러 개의 위젯을 쌓아놓고, 현재 인덱스에 해당하는 위젯만 보여주는 역할을 합니다. 이를 활용하여 화면 전환 애니메이션을 구현할 수 있습니다.

먼저, 애니메이션이 필요한 각 화면을 위젯으로 구현합니다. 예를 들어, 첫 번째 화면을 위한 위젯은 FirstScreen 이라고 가정해보겠습니다.

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('첫 번째 화면'),
    );
  }
}

다음으로, 두 번째 화면을 위한 위젯도 구현합니다. 이 예제에서는 SecondScreen 이라는 클래스를 사용하겠습니다.

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('두 번째 화면'),
    );
  }
}

마지막으로, IndexedStack 위젯을 사용하여 화면 전환 애니메이션을 구현합니다. IndexedStack 위젯에는 children 속성으로 화면으로 사용할 위젯들을 리스트 형태로 전달합니다. 현재 화면의 인덱스를 바꾸면 해당 화면이 보여지게 됩니다.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('플러터 화면 전환 애니메이션'),
        ),
        body: IndexedStack(
          index: _currentIndex,
          children: [
            FirstScreen(),
            SecondScreen(),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '첫 번째 화면',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: '두 번째 화면',
            ),
          ],
        ),
      ),
    );
  }
}

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

위 예제 코드는 첫 번째 화면과 두 번째 화면을 위젯으로 구현하고, IndexedStack 위젯을 사용하여 화면 전환을 구현한 예시입니다. 추가적으로, bottomNavigationBar를 활용하여 화면 전환을 간편하게 할 수 있도록 하였습니다.

참고로, 플러터에서는 이외에도 다양한 화면 전환 애니메이션을 구현할 수 있는 여러 가지 방법이 있습니다. 경로 기반의 화면 전환, Hero 애니메이션 등을 활용할 수도 있습니다. 각각의 방법에 대해서는 플러터 공식 문서를 참고하시면 됩니다.

참고문서: