[flutter] 플러터 LinearLoader와 함께 사용하는 에러 핸들링 방법

11 Dec 2023

flutter

플러터에서 네트워크 요청을 처리할 때, 에러 핸들링은 중요한 과제입니다. 이번 블로그에서는 LinearLoader와 함께 에러를 핸들링하는 방법에 대해 알아보겠습니다.

1. LinearLoader 소개

LinearLoader는 플러터에서 네트워크 요청이나 다른 작업을 수행할 때 유용한 위젯입니다. 작업이 완료될 때까지 사용자에게 진행 상황을 시각적으로 보여줄 수 있습니다.

2. 에러 핸들링

예를 들어, 네트워크 요청 중에 에러가 발생했을 때 LinearLoader를 이용하여 사용자에게 알림을 보여줄 수 있습니다. 에러가 발생할 때, LinearLoader를 제거하고 에러 메시지를 화면에 표시하는 방법으로 사용자에게 해당 에러를 보다 명확하게 전달할 수 있습니다.

아래는 예시 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _loading = false;
  String _errorMessage = '';

  void fetchData() async {
    setState(() {
      _loading = true;
    });
    try {
      // 네트워크 요청 수행
      // ...
      // 응답 처리
    } catch (e) {
      setState(() {
        _errorMessage = '에러가 발생했습니다: $e';
      });
    } finally {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LinearLoader 예제'),
      ),
      body: Center(
        child: _loading
            ? CircularProgressIndicator()
            : Text(_errorMessage),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: fetchData,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

위의 코드에서 fetchData 메서드는 네트워크 요청을 수행하는 메서드입니다. 요청이 시작될 때 _loading을 true로 설정하여 LinearLoader를 보여줍니다. 요청이 완료되면 다시 _loading을 false로 설정하여 LinearLoader를 제거하고, 에러가 발생하면 _errorMessage를 설정하여 에러 메시지를 화면에 표시합니다.

결론

이번 포스트에서는 LinearLoader와 함께 플러터 앱에서의 에러 핸들링에 대해 알아보았습니다. 이를 통해 사용자에게 진행 상황과 에러를 보다 명확하게 전달할 수 있으며, 더 나은 사용자 경험을 제공할 수 있습니다.

참고문헌:

https://flutter.dev/docs
https://flutter.dev/docs/cookbook/networking/fetch-data