[flutter] 플러터 슬라이딩 패널 화면 전환

플러터는 디자인적으로 다양한 화면 전환 효과를 제공합니다. 그 중에서도 슬라이딩(Sliding) 패널 화면 전환을 다루어보겠습니다.

패키지 설치

먼저, flutter_sliding_tutorial 패키지를 설치해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  flutter_sliding_tutorial: ^0.3.2

저장 후, 패키지를 가져올 수 있습니다.

import 'package:flutter_sliding_tutorial/flutter_sliding_tutorial.dart';

슬라이딩 패널 작성

슬라이딩 패널을 작성하기 위해서는 SlidingPanel 위젯을 사용합니다. 이 위젯은 다양한 속성을 제공하여 화면 전환을 커스터마이즈할 수 있습니다.

class SlidingPanelScreen extends StatefulWidget {
  @override
  _SlidingPanelScreenState createState() => _SlidingPanelScreenState();
}

class _SlidingPanelScreenState extends State<SlidingPanelScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel'),
      ),
      body: SlidingPanel(
        initialPanelSize: 0.5,
        panel: Container(
          color: Colors.white,
          child: Center(
            child: Text('Sliding Panel Content'),
          ),
        ),
        collapsedPanel: Container(
          color: Colors.white,
          child: Center(
            child: Icon(Icons.arrow_upward),
          ),
        ),
      ),
    );
  }
}

슬라이딩 패널 화면 전환

페이지 전환을 위해서는 Navigator.push() 메소드를 사용합니다. 슬라이딩 패널 화면으로 전환하려면 MaterialPageRoute 클래스를 사용하고, builder 메소드를 통해 슬라이딩 화면을 만들어 반환해야 합니다.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SlidingPanelScreen(),
  ),
);

슬라이딩 패널 화면에서 다른 화면으로 전환하려면 이와 동일한 방식으로 페이지 전환을 할 수 있습니다.

참고 자료

이제 슬라이딩 패널 화면 전환을 구현할 준비가 되었습니다. 코드를 따라 작성하고 실행해보세요. 잘 동작하는지 확인해보세요!