[flutter] 플러터에서 오프라인 파일 업로드 방법

온라인이 아닌 상황에서 파일을 업로드해야 하는 경우가 있습니다. 이 글에서는 Flutter 앱에서 오프라인 파일 업로드를 구현하는 방법을 알아보겠습니다.

1. flutter_file_picker 라이브러리 설치

오프라인 파일 업로드를 위해 파일을 선택할 수 있는 기능이 필요합니다. flutter_file_picker 라이브러리를 사용하여 파일 선택을 처리할 수 있습니다. 먼저 pubspec.yaml 파일에 아래의 의존성을 추가합니다:

dependencies:
  flutter_file_picker: ^4.0.0

의존성을 추가한 후, flutter pub get 명령어를 실행하여 라이브러리를 설치합니다.

2. 파일 선택 및 업로드 구현

파일 선택 및 업로드를 처리하기 위해 다음과 같은 코드를 작성합니다:

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

class OfflineFileUploader extends StatefulWidget {
  @override
  _OfflineFileUploaderState createState() => _OfflineFileUploaderState();
}

class _OfflineFileUploaderState extends State<OfflineFileUploader> {
  String _filePath;

  Future<void> _selectFile() async {
    FilePickerResult result = await FilePicker.platform.pickFiles();

    if (result != null) {
      setState(() {
        _filePath = result.paths.first;
      });

      // 파일 업로드 로직을 구현합니다
      _uploadFile();
    } else {
      // 파일 선택이 취소되었을 경우 처리할 내용을 작성합니다
      print('파일 선택이 취소되었습니다.');
    }
  }

  void _uploadFile() {
    // 선택한 파일을 서버로 업로드하는 로직을 작성합니다
    print('파일을 업로드합니다: $_filePath');

    // 업로드 완료 후 filePath를 초기화합니다
    setState(() {
      _filePath = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('오프라인 파일 업로드'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _selectFile,
              child: Text('파일 선택'),
            ),
            SizedBox(height: 16),
            if (_filePath != null) Text('선택한 파일: $_filePath'),
          ],
        ),
      ),
    );
  }
}

위의 코드는 flutter_file_picker 라이브러리를 사용하여 파일을 선택하고 업로드하는 기능을 구현한 예시입니다. FilePicker.platform.pickFiles() 메서드를 사용하여 파일을 선택하고, 선택한 파일의 경로를 _filePath 변수에 저장합니다. 이후 _uploadFile() 메서드를 호출하여 파일을 서버로 업로드합니다. 파일 선택이 취소된 경우에는 해당 내용을 처리할 수 있도록 로직을 추가하였습니다.

3. 앱에 OfflineFileUploader 위젯 추가

이제 위에서 작성한 OfflineFileUploader 위젯을 앱에 추가해보겠습니다. 예를 들어, 앱의 main.dart 파일을 아래와 같이 수정합니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 오프라인 파일 업로드',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: OfflineFileUploader(),
    );
  }
}

이제 앱을 실행하면 “파일 선택” 버튼이 표시되며, 클릭하여 파일을 선택하고 업로드할 수 있습니다.

결론

Flutter 앱에서 오프라인 파일 업로드를 구현하기 위해 flutter_file_picker 라이브러리를 사용하는 방법에 대해 알아보았습니다. 파일 선택과 업로드 처리에 대한 예시 코드를 통해 오프라인 환경에서도 파일을 업로드할 수 있는 기능을 구현할 수 있습니다.

참고 자료