[flutter] 플러터 슬라이딩 패널 화면 열기

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 강력하고 성능이 우수한 UI를 제공합니다. 이 문서에서는 플러터를 사용하여 슬라이딩 패널 화면을 열기 위한 방법에 대해 알려드리겠습니다.

1. 슬라이딩 패널을 위한 패키지 추가

먼저, flutter_sliding_panel 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 다음과 같이 패키지를 추가합니다:

dependencies:
  flutter_sliding_panel: ^0.4.0

패키지 추가 후, 터미널에서 flutter pub get 명령어를 실행하여 종속성을 가져옵니다.

2. 슬라이딩 패널 위젯 구현

이제, 슬라이딩 패널을 구현하기 위해 SlidingPanel 위젯을 생성합니다. 아래는 간단한 예제입니다:

import 'package:flutter/material.dart';
import 'package:flutter_sliding_panel/flutter_sliding_panel.dart';

class MySlidingPanel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SlidingPanel(
      panelBuilder: (ScrollController scrollController) => Container(
        // 패널 내용을 구성하는 위젯
      ),
      body: Scaffold(
        appBar: AppBar(
          title: Text('Sliding Panel Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 슬라이딩 패널 열기
              SlidingPanel.of(context)?.open();
            },
            child: Text('Open Sliding Panel'),
          ),
        ),
      ),
    );
  }
}

SlidingPanel 위젯은 두 개의 필수 속성을 가져야 합니다. panelBuilder 속성은 패널 내용을 구성하는 위젯을 반환하는 콜백 함수를 지정합니다. 여기에서는 패널 위젯을 단순히 Container 위젯으로 구성했습니다.

body 속성은 슬라이딩 패널을 열기 위한 동작을 수행하는 부모 위젯입니다. 예제에서는 Scaffold 위젯을 사용하고, ElevatedButton을 눌렀을 때 슬라이딩 패널을 열도록 설정했습니다.

3. 슬라이딩 패널 화면 열기

마지막으로, 슬라이딩 패널 화면을 열기 위해 MySlidingPanel 위젯을 불러옵니다. 예를 들어, 아래와 같이 main.dart 파일에서 MySlidingPanel 위젯을 실행할 수 있습니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sliding Panel Demo',
      home: MySlidingPanel(),
    );
  }
}

애플리케이션을 실행하면 “Open Sliding Panel” 버튼이 포함된 화면이 표시됩니다. 버튼을 클릭하면 슬라이딩 패널이 열리는 것을 확인할 수 있습니다.

이제 플러터에서 슬라이딩 패널 화면을 열 수 있게 되었습니다. 원하시는 방식으로 패널 내용을 구성하고, 슬라이딩 패널을 열고 닫을 수 있는 인터랙션을 추가해보세요!

참고 자료