[flutter] 플러터에서의 Stack 위젯을 활용한 다중 화면 관리 방법
플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 크로스 플랫폼 앱 개발을 위한 강력한 도구입니다. 플러터에서는 Stack 위젯을 활용하여 여러 개의 화면을 관리하는 것이 가능합니다. 이번 글에서는 Stack 위젯을 이용한 다중 화면 관리 방법에 대해 알아보겠습니다.
Stack 위젯
Stack 위젯은 플러터에서 여러 위젯을 겹쳐서 사용할 수 있게 해주는 위젯입니다. Stack 위젯은 자식 위젯들을 쌓아 올리는 방식으로 동작합니다. 가장 상위에 있는 자식 위젯이 가장 앞에 보이게 됩니다. 이를 통해 다중 화면을 관리할 수 있습니다.
다중 화면 관리 방법
- Stack 위젯을 선언합니다.
Stack(
children: <Widget>[
// 화면 1
Container(
child: Text('화면 1'),
),
// 화면 2
Container(
child: Text('화면 2'),
),
// 화면 3
Container(
child: Text('화면 3'),
),
],
)
- Stack 위젯의 각 자식 위젯에게 위치를 지정합니다.
Stack(
children: <Widget>[
// 화면 1
Positioned(
top: 0,
left: 0,
child: Container(
child: Text('화면 1'),
),
),
// 화면 2
Positioned(
top: 50,
left: 50,
child: Container(
child: Text('화면 2'),
),
),
// 화면 3
Positioned(
top: 100,
left: 100,
child: Container(
child: Text('화면 3'),
),
),
],
)
위 코드에서는 Stack 위젯의 자식 위젯인 Container 위젯을 선언하고, 각각의 위치를 지정했습니다.
- 화면 전환을 위해 상태를 관리합니다.
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int currentScreen = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
// 화면 1
Positioned(
top: 0,
left: 0,
child: Container(
child: Text('화면 1'),
),
),
// 화면 2
Positioned(
top: 50,
left: 50,
child: Container(
child: Text('화면 2'),
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
currentScreen = (currentScreen + 1) % 2;
});
},
child: Icon(Icons.swap_horiz),
),
),
);
}
}
위 코드에서는 MyApp 클래스의 상태를 관리하기 위해 StatefulWidget을 사용했습니다. 화면 전환을 위해 currentScreen 변수를 설정하고, floatingActionButton의 onPressed 이벤트에서 currentScreen 값을 변경하도록 구현했습니다.
- 화면 전환을 위한 애니메이션 추가(Optional)
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
currentScreen = (currentScreen + 1) % 2;
});
},
child: AnimatedSwitcher(
duration: Duration(milliseconds: 300),
child: currentScreen == 0 ? Icon(Icons.arrow_forward) : Icon(Icons.arrow_back),
),
),
위 코드에서는 AnimatedSwitcher 위젯을 활용하여 화면 전환 시 부드러운 애니메이션 효과를 추가했습니다.
이제 플러터에서 Stack 위젯을 활용하여 다중 화면을 관리하는 방법을 알게 되었습니다. Stack 위젯은 원하는 위치에 자식 위젯을 배치하고, 화면 전환을 위해 상태를 관리하는 방식으로 다양한 다중 화면 관리 기능을 구현할 수 있습니다.