[flutter] 플러터 ProgressIndicator를 사용하여 파일 업로드 상태를 표시하는 방법은?

20 Dec 2023

flutter

ProgressIndicator

ProgressIndicator를 사용하여 파일 업로드 상태를 표시하는 단계는 다음과 같습니다.

파일 업로드 요청

Future<void> uploadFile() async {
  // 파일 업로드 요청 로직 추가
}

ProgressIndicator 표시 파일 업로드 과정에서 ProgressIndicator를 표시합니다.
```
Center(
  child: CircularProgressIndicator(),
)
```

파일 업로드 완료 시 ProgressIndicator 숨김

Future<void> uploadFile() async {
  // 파일 업로드 완료 시 ProgressIndicator 숨김
  // 파일 업로드 완료 후 로직 추가
}

예제

다음은 파일 업로드 상태를 표시하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('File Upload'),
        ),
        body: UploadScreen(),
      ),
    );
  }
}

class UploadScreen extends StatelessWidget {
  // 파일 업로드 요청
  Future<void> uploadFile() async {
    // 파일 업로드 요청 로직 추가
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          uploadFile();
        },
        child: Text('Upload File'),
      ),
    );
  }
}

위의 코드는 파일 업로드 버튼을 누르면 ProgressIndicator가 표시되도록 구현된 예제입니다.

위 예제를 참고하여 앱의 파일 업로드 상태를 표시하는 데에 ProgressIndicator를 활용할 수 있습니다.