[flutter] 플러터 슬라이딩 패널 프로젝트 예제

이번 예제에서는 플러터(Flutter)를 사용하여 슬라이딩 패널을 만드는 방법을 알아보겠습니다. 슬라이딩 패널은 화면에서 왼쪽이나 오른쪽으로 스와이프하여 나타나거나 사라지는 패널입니다. 이는 사용자 경험을 향상시키고 효율적인 네비게이션을 제공하는데 유용합니다.

1. 프로젝트 설정

먼저, 플러터 프로젝트를 만들고 의존성을 추가해야 합니다. 다음 명령어를 사용하여 새로운 플러터 프로젝트를 생성합니다:

flutter create sliding_panel_project

프로젝트 폴더에 들어가서 pubspec.yaml 파일을 열어 다음과 같이 flutter_sliding_panel 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  flutter_sliding_panel: ^1.0.0

의존성 추가 후, 터미널에서 다음 명령어를 실행하여 의존성을 가져옵니다:

flutter pub get

2. 슬라이딩 패널 구현

이제 슬라이딩 패널을 구현해보겠습니다. main.dart 파일을 열고 다음과 같이 코드를 작성합니다:

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

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

class SlidingPanelApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sliding Panel Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  final panelController = SlidingPanelController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sliding Panel Example'),
      ),
      body: SlidingPanel(
        controller: panelController,
        panel: Container(
          color: Colors.grey[200],
          child: Center(
            child: Text('Sliding Panel Content'),
          ),
        ),
        body: Container(
          color: Colors.white,
          child: Center(
            child: RaisedButton(
              onPressed: () {
                panelController.slidePanel();
              },
              child: Text('Slide Panel'),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 flutter_sliding_panel 패키지를 사용하여 슬라이딩 패널을 구현합니다. main.dart 파일에서 SlidingPanelApp 위젯을 정의하고, HomePage 위젯에서 슬라이딩 패널을 생성합니다.

3. 앱 실행

프로젝트 폴더에서 다음 명령어를 실행하여 슬라이딩 패널 앱을 실행합니다:

flutter run

앱이 실행되면 화면에는 “Slide Panel” 이라고 쓰인 버튼이 있습니다. 버튼을 클릭하면 왼쪽에서 슬라이딩 패널이 나타납니다. 다시 버튼을 클릭하면 패널이 사라집니다.

결론

이제 플러터를 사용하여 슬라이딩 패널을 만드는 방법을 알아보았습니다. 슬라이딩 패널은 사용자 경험을 향상시키는 데 큰 도움이 되며, 플러터의 다른 기능과 함께 조합하여 다양한 앱을 개발할 수 있습니다. 이 예제를 기반으로 자신만의 슬라이딩 패널을 만들어보세요.