[flutter] 플러터 스택드 위젯에서 화면 전환 기능 구현하기

15 Dec 2023

flutter

플러터에서는 스택드 위젯을 사용하여 여러 화면을 쌓고, 화면 전환을 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 각각의 화면을 쉽게 관리할 수 있습니다.

스택드 위젯은 화면 전환을 위해 여러 위젯을 쌓아놓는 데 사용됩니다. 이를 활용하면 사용자 인터페이스를 유연하게 제어할 수 있으며, 화면 전환 기능을 손쉽게 구현할 수 있습니다.

예제 코드

다음은 스택드 위젯을 사용하여 화면 전환을 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScreenManager(),
    );
  }
}

class ScreenManager extends StatefulWidget {
  @override
  _ScreenManagerState createState() => _ScreenManagerState();
}

class _ScreenManagerState extends State<ScreenManager> {
  final List<Widget> _screens = [
    Screen1(),
    Screen2(),
    Screen3(),
  ];

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Screen 1',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Screen 2',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Screen 3',
          ),
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Screen 1'),
    );
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Screen 2'),
    );
  }
}

class Screen3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Screen 3'),
    );
  }
}

위 코드는 BottomNavigationBar와 함께 스택드 위젯을 사용하여 세 개의 화면을 전환하는 예제입니다.

마치며

위 예제를 참고하여 플러터에서 스택드 위젯을 사용하여 화면 전환 기능을 구현할 수 있습니다. 이를 통해 다양한 화면을 효율적으로 관리하고 사용자 경험을 향상시킬 수 있습니다.

참고 문서

스택드 위젯(Stacked Widget)이란?

예제 코드

마치며