[flutter] 플러터 ProgressIndicator를 사용하여 사진 편집 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

이 블로그 포스트에서는 플러터의 ProgressIndicator 위젯을 사용하여 사진 편집 진행 상태를 시각적으로 표시하는 방법에 대해 알아보겠습니다.

ProgressIndicator란?

ProgressIndicator는 작업이 진행 중임을 사용자에게 알리기 위해 사용되는 플러터 위젯입니다. 주로 네트워크 요청, 데이터 다운로드, 또는 긴 작업의 진행 상태를 표시하는 데 사용됩니다.

사진 편집 진행 상태 표시하기

사진 편집 앱을 개발 중이고, 이미지 필터링이나 크롭 등의 작업을 수행하는 동안 사용자에게 진행 상태를 시각적으로 표시해야 한다고 가정해 봅시다. 이때 ProgressIndicator를 사용하여 작업이 진행 중임을 알리는 것이 좋은 방법입니다.

import 'package:flutter/material.dart';

class PhotoEditorPage extends StatefulWidget {
  @override
  _PhotoEditorPageState createState() => _PhotoEditorPageState();
}

class _PhotoEditorPageState extends State<PhotoEditorPage> {
  bool _isEditing = false;

  void _editPhoto() async {
    setState(() {
      _isEditing = true;
    });

    // 이미지 편집 작업 수행
    await performEditingTasks();

    setState(() {
      _isEditing = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _isEditing
            ? CircularProgressIndicator()
            : ElevatedButton(
                onPressed: _editPhoto,
                child: Text('사진 편집 시작'),
              ),
      ),
    );
  }
}

위 코드는 PhotoEditorPage 위젯에서 _isEditing 상태 변수를 사용하여 이미지 편집 작업의 진행 상태를 관리하고, CircularProgressIndicator를 사용하여 편집 작업이 진행 중임을 표시하는 예시입니다.

마무리

이렇게하여 ProgressIndicator를 사용하여 플러터 앱에서 이미지 편집과 같은 작업의 진행 상태를 시각적으로 표시할 수 있습니다. 사용자가 실행 중인 작업을 인지할 수 있도록 하여 앱의 사용성을 향상시킬 수 있습니다.

참고: Flutter 공식 문서 - ProgressIndicator