[flutter] 플러터 ProgressIndicator를 사용하여 비밀번호 재설정 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

비밀번호 재설정 기능을 구현할 때, 사용자에게 진행 상태를 시각적으로 보여주는 것은 매우 중요합니다. Flutter에서는 ProgressIndicator 위젯을 사용하여 이를 간단하게 구현할 수 있습니다.

아래는 비밀번호 재설정 과정 전체를 표시하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PasswordResetPage(),
    );
  }
}

class PasswordResetPage extends StatefulWidget {
  @override
  _PasswordResetPageState createState() => _PasswordResetPageState();
}

class _PasswordResetPageState extends State<PasswordResetPage> {
  bool _isResetting = false;

  void _resetPassword() async {
    setState(() {
      _isResetting = true;
    });
    // 비밀번호 재설정 절차 수행

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('비밀번호 재설정'),
      ),
      body: Center(
        child: _isResetting
            ? CircularProgressIndicator()
            : ElevatedButton(
                onPressed: _resetPassword,
                child: Text('비밀번호 재설정'),
              ),
      ),
    );
  }
}

위의 예제에서는 _isResetting 변수를 사용하여 현재 비밀번호 재설정 작업이 진행 중인지 나타내고 있습니다. 해당 변수가 true로 설정되면 CircularProgressIndicator가 표시되며, 그 외에는 비밀번호 재설정 버튼이 표시됩니다.

이렇게 하면 사용자가 비밀번호 재설정 작업이 진행 중임을 시각적으로 파악할 수 있게 됩니다.

더 자세한 내용은 공식 문서를 참고하세요.