[flutter] 플러터 슬라이딩 패널 저장소 화면

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 크로스 플랫폼 앱을 손쉽게 만들 수 있습니다. 이번 글에서는 플러터를 사용하여 슬라이딩 패널을 만들고, 저장소 화면을 구현하는 방법을 소개하겠습니다.

슬라이딩 패널 구현하기

우선, 슬라이딩 패널을 구현하기 위해 flutter_sliding_panel 패키지를 사용합니다. 이 패키지는 플러터 프로젝트에서 슬라이딩 패널을 쉽게 추가할 수 있도록 도와줍니다.

  1. pubspec.yaml 파일에서 아래의 의존성을 추가해주세요.
dependencies:
  flutter_sliding_panel: ^0.2.0
  1. 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

  2. 다음으로, 슬라이딩 패널을 사용할 위젯을 만들어주세요. 예를 들어, 아래와 같이 SlidingPanelScreen 위젯을 만들어보겠습니다.

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

class SlidingPanelScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널'),
      ),
      body: SlidingPanel(
        panelSize: PanelSize(percent: 0.8),
        body: Container(
          color: Colors.white,
        ),
        panel: Container(
          color: Colors.grey[300],
        ),
      ),
    );
  }
}
  1. 슬라이딩 패널을 사용할 화면으로 이동하기 위해, 메인 화면에서 SlidingPanelScreen을 호출하는 버튼을 추가해주세요.
import 'package:flutter/material.dart';
import 'package:your_project_name/sliding_panel_screen.dart';

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

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('홈'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => SlidingPanelScreen()),
            );
          },
          child: Text('슬라이딩 패널로 이동'),
        ),
      ),
    );
  }
}

저장소 화면 구현하기

이제 슬라이딩 패널을 사용하여 저장소 화면을 구현해보겠습니다. 저장소 화면은 파일 목록을 보여주고, 파일을 선택하면 해당 파일을 열 수 있도록 해주는 기능을 갖추고 있습니다.

  1. sliding_panel_screen.dart 파일에 다음과 같이 파일 목록을 보여주는 위젯을 추가해주세요.
class SlidingPanelScreen extends StatelessWidget {
  final List<String> files = ['file1.txt', 'file2.txt', 'file3.txt'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('슬라이딩 패널'),
      ),
      body: SlidingPanel(
        panelSize: PanelSize(percent: 0.8),
        body: ListView.builder(
          itemCount: files.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text(files[index]),
              onTap: () {
                // 파일을 열도록 처리
              },
            );
          },
        ),
        panel: Container(
          color: Colors.grey[300],
        ),
      ),
    );
  }
}
  1. 파일을 선택했을 때 해당 파일을 열 수 있도록 처리해야 합니다. 파일을 열기 위해 file_picker 패키지를 사용해보도록 하겠습니다.

    • pubspec.yaml 파일에서 아래의 의존성을 추가해주세요.
    dependencies:
      file_picker: ^4.1.0
    
    • 파일을 열도록 처리하는 코드를 추가해주세요.
    import 'package:file_picker/file_picker.dart';
    
    // ...
    
    onTap: () async {
      try {
        FilePickerResult? result = await FilePicker.platform.pickFiles();
        if (result != null) {
          // 파일을 선택한 후의 처리
        }
      } catch (e) {
        // 오류 처리
      }
    },
    
  2. 파일을 선택한 후, 선택한 파일을 열도록 처리하는 로직을 추가해주세요. 파일을 열기 위해서는 해당 파일에 대한 정보를 필요로 합니다. 예를 들어, 파일의 경로, 파일 이름 등의 정보가 필요합니다.

    if (result != null) {
      for (PlatformFile file in result.files) {
        String filePath = file.path!;
        // 파일을 열도록 처리
      }
    }
    
  3. 이제 파일을 열도록 처리하는 부분을 구현해보세요. 파일을 열기 위해서는 flutter_pdfview와 같은 패키지를 사용하여 PDF 파일을 열거나, 파일을 다운로드하는 등의 작업을 수행할 수 있습니다.

저장소 화면을 구현하는 방법에 대해 알아보았습니다. 이제 플러터를 사용하여 슬라이딩 패널을 만들고, 저장소 화면을 구현하는 방법을 이해하셨을 것입니다.

참고 자료: