[flutter] 플러터 ProgressIndicator를 사용하여 채팅 메시지 전송 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

채팅 애플리케이션을 개발할 때, 메시지 전송이 진행 중인 동안 사용자에게 진행 상태를 시각적으로 보여주는 것은 중요합니다. 이를 위해 플러터의 ProgressIndicator 위젯을 사용할 수 있습니다.

ProgressIndicator 위젯

ProgressIndicator 위젯은 진행 상태를 시각적으로 표시하는 위젯으로, 주로 네트워크 요청이나 데이터 처리 등의 작업이 진행 중일 때 화면에 표시됩니다.

import 'package:flutter/material.dart';

class MyChatScreen extends StatefulWidget {
  // ... 다른 코드
  // sendMessage 함수 등을 가지고 있는 상태 위젯

  @override
  _MyChatScreenState createState() => _MyChatScreenState();
}

class _MyChatScreenState extends State<MyChatScreen> {
  bool _isSending = false;

  void _handleSendMessage() async {
    setState(() {
      _isSending = true;
    });

    // 메시지 전송을 위한 처리 로직

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('채팅'),
      ),
      body: Column(
        children: [
          // 채팅 메시지 목록 위젯
          // ...
          _isSending ? CircularProgressIndicator() : Container(),
          // 전송 버튼
          ElevatedButton(
            onPressed: _handleSendMessage,
            child: Text('메시지 전송'),
          ),
        ],
      ),
    );
  }
}

위의 코드 예시에서, _isSending 변수는 메시지 전송이 진행 중인지를 나타내며, _handleSendMessage 함수는 메시지 전송을 처리합니다. CircularProgressIndicator 위젯은 _isSending 값이 true일 때 나타나며, 메시지 전송이 완료된 후에는 사라집니다.

이렇게하여 사용자는 메시지 전송이 진행 중인 동안 화면에 로딩 상태를 확인할 수 있습니다.

결론

플러터의 ProgressIndicator 위젯을 사용하여 채팅 메시지 전송 시 진행 상태를 시각적으로 표시할 수 있습니다. 이를 통해 애플리케이션 사용자는 메시지 전송이 진행 중임을 쉽게 확인할 수 있으며, 좀 더 사용자 친화적인 환경을 제공할 수 있습니다.

이상으로 채팅 애플리케이션에서 ProgressIndicator를 활용하여 메시지 전송 상태를 표시하는 방법에 대해 알아보았습니다.