플러터(Flutter) 앱을 개발하다보면 API 호출 시 발생하는 에러를 처리해야 할 때가 있습니다. 이때 Visibility 위젯을 이용하여 에러 발생 시 에러 메시지를 화면에 표시하는 방법을 알아보겠습니다.

에러 처리를 위한 Visibility 속성 활용

에러 처리를 위해 Visibility 위젯을 사용하면 특정 조건에 따라 화면에 위젯을 표시하거나 숨길 수 있습니다. API 호출 도중 에러가 발생할 때 화면에 에러 메시지를 표시하기 위해 Visibility 위젯을 활용합니다.

Visibility(
  visible: _errorOccurred,
  child: Text(
    '에러가 발생했습니다.',
    style: TextStyle(color: Colors.red),
  ),
),

위 예제에서 _errorOccurred는 에러가 발생했을 때 true가 됩니다. 이 때 Visibility 위젯이 자식 위젯을 보여주게 되고 에러 메시지를 화면에 표시합니다.

완전한 예제

아래는 FutureBuilder를 이용하여 API 호출 결과를 받아오고, 에러가 발생한 경우에 대한 예제입니다.

FutureBuilder(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Visibility(
        visible: true,
        child: Text(
          '에러가 발생했습니다.',
          style: TextStyle(color: Colors.red),
        ),
      );
    } else {
      return Text('데이터: ${snapshot.data}');
    }
  },
)

위 예제에서 fetchData 함수는 원격 API에서 데이터를 가져오는 비동기 함수입니다. FutureBuilder 위젯은 fetchData 함수가 완료될 때까지 기다린 후, 에러가 발생했는지를 확인하고 에러 메시지를 표시합니다.

이를 통해 플러터 앱에서 API 호출 시 발생하는 에러를 간편하게 처리할 수 있습니다.

에러 처리에 대한 더 자세한 정보는 플러터 공식 문서를 참고하세요.

위에서 설명한 것처럼 Visibility 속성을 이용하여 에러 메시지를 표시하고 숨기는 기능을 구현하여 플러터 앱의 사용자 경험을 향상시킬 수 있습니다.