[flutter] 플러터(IndexedStack)를 사용하여 복잡한 화면 전환 구현이 가능한가요?
다음은 IndexedStack을 사용하여 복잡한 화면 전환을 구현하는 간단한 예제입니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
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('IndexedStack Example'),
),
body: Column(
children: [
// 화면 전환을 위한 버튼들
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
child: Text('Screen 1'),
onPressed: () {
setState(() {
currentIndex = 0;
});
},
),
RaisedButton(
child: Text('Screen 2'),
onPressed: () {
setState(() {
currentIndex = 1;
});
},
),
RaisedButton(
child: Text('Screen 3'),
onPressed: () {
setState(() {
currentIndex = 2;
});
},
),
],
),
// 인덱스에 해당하는 화면을 표시하는 IndexedStack
Expanded(
child: IndexedStack(
index: currentIndex,
children: [
Container(
color: Colors.red,
child: Center(
child: Text('Screen 1'),
),
),
Container(
color: Colors.blue,
child: Center(
child: Text('Screen 2'),
),
),
Container(
color: Colors.green,
child: Center(
child: Text('Screen 3'),
),
),
],
),
),
],
),
),
);
}
}
위 예제에서는 IndexedStack을 사용하여 세 개의 화면(Screen 1, Screen 2, Screen 3)을 관리하고, 각각의 화면에 대한 버튼을 통해 화면 전환을 할 수 있습니다. 현재 선택된 인덱스에 해당하는 화면이 나타납니다.
IndexedStack을 사용하면 복잡한 화면 전환을 간단하게 구현할 수 있으며, 많은 수의 화면을 관리해야 할 때 특히 유용합니다.
더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.