프로필 사진 업로드와 같은 작업을 수행할 때 사용자에게 진행 상태를 시각적으로 전달하는 것은 중요합니다. 플러터의 ProgressIndicator를 사용하면 쉽게 진행 상태를 표시할 수 있습니다.

1. CircularProgressIndicator 위젯 추가

프로필 사진 업로드 버튼을 눌렀을 때, CircularProgressIndicator 위젯을 추가하여 진행 상태를 표시할 수 있습니다.

예를 들어, 다음과 같이 ElevatedButton을 누를 때 CircularProgressIndicator를 보이도록 할 수 있습니다:

bool isUploading = false;

ElevatedButton(
  onPressed: () {
    // 프로필 사진 업로드 작업 수행
    setState(() {
      isUploading = true;
    });
    uploadProfilePicture().then((value) {
      setState(() {
        isUploading = false;
      });
    });
  },
  child: Text('프로필 사진 업로드'),
),
isUploading ? CircularProgressIndicator() : Container(),

이 코드는 ElevatedButton을 누르면 isUploading 변수를 true로 설정하고, 프로필 사진을 업로드하는 uploadProfilePicture 함수가 완료되면 다시 isUploading을 false로 변경합니다.

2. CircularProgressIndicator의 속성 활용

ProgressIndicator에는 다양한 속성을 사용하여 디자인을 변경할 수 있습니다. 예를 들어, valueColor 속성을 사용하여 색상을 변경하거나, strokeWidth 속성을 사용하여 두께를 조절할 수 있습니다.

Center(
  child: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
    strokeWidth: 3,
  ),
),

이렇게 하면 파란색으로 된 두꺼운 선이 있는 CircularProgressIndicator가 생성됩니다.

프로필 사진 업로드와 같은 작업에서는 사용자가 진행 상태를 파악할 수 있도록 직관적으로 표시하는 것이 중요합니다. CircularProgressIndicator를 활용하여 사용자 경험을 향상시키세요.

이제 프로필 사진 업로드 작업이 진행 중일 때, ProgressIndicator를 통해 진행 상태를 표시할 수 있게 되었습니다.