[flutter] 플러터(IndexedStack)를 사용하여 페이지를 전환할 수 있나요?

다음은 IndexedStack 위젯을 사용하여 페이지를 전환하는 간단한 예제입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    FirstPage(),
    SecondPage(),
    ThirdPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('페이지 전환 예제'),
        ),
        body: IndexedStack(
          index: _currentIndex,
          children: _pages,
        ),
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (int newIndex) {
            _currentIndex = newIndex;
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '첫 번째 페이지',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: '두 번째 페이지',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: '세 번째 페이지',
            ),
          ],
        ),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('첫 번째 페이지'),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('두 번째 페이지'),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('세 번째 페이지'),
    );
  }
}

이 예제에서는 IndexedStack 위젯을 Scaffold의 body 속성에 배치하여 현재 화면에 표시할 페이지를 선택합니다. BottomNavigationBar 위젯을 사용하여 페이지 전환을 위한 탭을 구성하고, onTap 콜백을 사용하여 현재 인덱스를 업데이트합니다.

위의 예제를 실행하면, 하단에 세 개의 탭이 표시되며 탭을 선택하면 해당 페이지로 전환됩니다.

이처럼 IndexedStack을 사용하면 플러터 앱에서 페이지 전환을 구현할 수 있습니다.

더 많은 정보는 플러터 공식 문서를 참조하시기 바랍니다.