[flutter] 플러터 슬라이딩 패널 설정 화면

플러터는 크로스 플랫폼 모바일 앱 개발을 위한 프레임워크로서, 다양한 기능과 UI를 지원합니다. 슬라이딩 패널은 화면의 일부를 밀어서 보이거나 감추는 기능을 제공하는데, 이번에는 플러터에서 슬라이딩 패널을 설정하는 방법에 대해 알아보겠습니다.

1. 패키지 추가

먼저, 슬라이딩 패널을 사용하기 위해 sliding_up_panel 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  sliding_up_panel: ^1.0.0

패키지를 추가한 후에는 pub get 명령어를 실행해서 패키지를 설치해야 합니다.

2. 슬라이딩 패널 위젯 생성

슬라이딩 패널을 생성하기 위해서는 SlidingUpPanel 위젯을 사용해야 합니다. 해당 위젯을 사용하기 위해 다음과 같이 코드를 작성해주세요:

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

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

class _SlidingPanelScreenState extends State<SlidingPanelScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("슬라이딩 패널 설정 화면"),
      ),
      body: SlidingUpPanel(
        panel: Center(child: Text("슬라이딩 패널")),
        collapsed: Container(
          color: Colors.blue,
          child: Center(child: Text("슬라이딩 패널 (접힘)")),
        ),
        minHeight: 100,
        maxHeight: 500,
      ),
    );
  }
}

위 코드에서는 SlidingUpPanel 위젯을 Scaffold 위젯의 body로 사용하고 있습니다. panel 속성에는 슬라이딩 패널이 펼쳐진 상태에서 보여질 위젯을 설정하고, collapsed 속성에는 슬라이딩 패널이 접혀진 상태에서 보여질 위젯을 설정하고 있습니다. 또한, minHeightmaxHeight 속성을 통해 패널의 최소와 최대 높이를 설정할 수 있습니다.

3. 슬라이딩 패널 사용

위 코드에서 작성한 SlidingPanelScreen 위젯을 앱의 화면으로 사용하려면 다음과 같이 코드를 작성해주세요:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: SlidingPanelScreen(),
  ));
}

위 코드에서는 SlidingPanelScreen 위젯을 MaterialApphome 속성으로 설정하여 앱의 첫 화면으로 사용하고 있습니다.

이제 앱을 실행하면 슬라이딩 패널이 설정된 화면을 볼 수 있습니다.

결론

플러터에서 슬라이딩 패널을 설정하는 방법에 대해 알아보았습니다. sliding_up_panel 패키지를 추가하고, SlidingUpPanel 위젯을 사용하여 슬라이딩 패널을 생성하고 사용할 수 있습니다. 이를 통해 플러터 앱에 다양한 기능과 UI를 더욱 추가할 수 있습니다.