[flutter] FlatButton을 사용하여 로딩 표시기를 만드는 방법은?

26 Dec 2023

flutter

Flutter 앱에서 사용자가 버튼을 누르면 로딩 표시기를 표시하는 기능을 구현하고 싶으시군요. 이를 위해 FlatButton 위젯을 사용하여 로딩 상태를 관리하는 방법을 알려드리겠습니다.

1. FlatButton 위젯 생성

먼저, FlatButton을 생성하여 사용자 액션이 발생했을 때 로딩 상태를 시작하도록 합니다.

FlatButton(
  onPressed: () {
    // 로딩 시작
    setState(() {
      isLoading = true;
    });
    
    // 여기에 비동기 작업을 수행할 수 있습니다.
    // 작업이 완료되면 로딩 상태를 해제합니다.
  },
  child: Text('로딩 시작'),
),

2. 로딩 표시기 표시

로딩이 진행 중일 때 화면에 로딩 표시기를 표시합니다.

bool isLoading = false;

Widget build(BuildContext context) {
  return Center(
    child: isLoading
      ? CircularProgressIndicator()
      : FlatButton(
          onPressed: () {
            // 로딩 시작
            setState(() {
              isLoading = true;
            });
            
            // 여기에 비동기 작업을 수행할 수 있습니다.
            // 작업이 완료되면 로딩 상태를 해제합니다.
          },
          child: Text('로딩 시작'),
        ),
  );
}

위 예제에서는 CircularProgressIndicator를 사용하여 로딩 중임을 사용자에게 알립니다.

3. 비동기 작업 완료 시 로딩 상태 해제

비동기 작업이 완료된 후에는 로딩 상태를 해제하여 로딩 표시기를 제거합니다. 예를 들어, 네트워크 요청이 완료된 후에 로딩을 중지할 수 있습니다.

FlatButton(
  onPressed: () async {
    // 로딩 시작
    setState(() {
      isLoading = true;
    });
    
    // 비동기 작업 수행
    await fetchUserData();
    
    // 로딩 상태 해제
    setState(() {
      isLoading = false;
    });
  },
  child: Text('로딩 시작'),
),

이제 당신의 Flutter 앱에서 FlatButton을 사용하여 로딩 표시기를 만드는 방법을 알게 되었습니다. 원하는 기능을 구현하는 데 도움이 되기를 바랍니다!