[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을 사용하면 플러터 앱에서 페이지 전환을 구현할 수 있습니다.
더 많은 정보는 플러터 공식 문서를 참조하시기 바랍니다.