Flutter의 채팅 애니메이션(Chat Animation) 구현하기

채팅 애니메이션은 사용자 경험을 향상시키는 중요한 요소입니다. Flutter는 강력한 애니메이션 라이브러리를 제공하여 채팅 애니메이션을 쉽게 구현할 수 있습니다. 이번 글에서는 Flutter에서 채팅 애니메이션을 구현하는 방법을 단계별로 설명하겠습니다.

1. Flutter 프로젝트 설정

먼저, 새로운 Flutter 프로젝트를 생성하고 필요한 패키지를 추가합니다.

1.1 프로젝트 생성

 

flutter create chat_animation
cd chat_animation

 

1.2 패키지 추가

pubspec.yaml 파일에 애니메이션 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.1

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. 기본 채팅 UI 구현

간단한 채팅 UI를 구성합니다. main.dart 파일을 수정하여 채팅 메시지를 표시할 수 있는 기본 구조를 만듭니다.

 

import 'package:flutter/material.dart';

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

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

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final List<String> messages = [];
  final TextEditingController _controller = TextEditingController();

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        messages.add(_controller.text);
        _controller.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Animation'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: messages.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(messages[index]),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 기본적인 채팅 UI를 구현한 예제입니다. 사용자가 메시지를 입력하고 전송하면 메시지가 리스트에 추가됩니다.

 

 

728x90

 

3. 채팅 애니메이션 구현

채팅 메시지에 애니메이션을 추가하여 사용자 경험을 향상시킵니다.

 

import 'package:flutter/material.dart';

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

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

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
  final List<ChatMessage> messages = [];
  final TextEditingController _controller = TextEditingController();

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      ChatMessage message = ChatMessage(
        text: _controller.text,
        animationController: AnimationController(
          vsync: this,
          duration: Duration(milliseconds: 300),
        ),
      );

      setState(() {
        messages.add(message);
      });

      message.animationController.forward();
      _controller.clear();
    }
  }

  @override
  void dispose() {
    for (ChatMessage message in messages) {
      message.animationController.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Animation'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: messages.length,
              itemBuilder: (context, index) {
                return messages[index];
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class ChatMessage extends StatelessWidget {
  final String text;
  final AnimationController animationController;

  ChatMessage({required this.text, required this.animationController});

  @override
  Widget build(BuildContext context) {
    return SizeTransition(
      sizeFactor: CurvedAnimation(
        parent: animationController,
        curve: Curves.easeOut,
      ),
      axisAlignment: 0.0,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 10.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              margin: EdgeInsets.only(right: 16.0),
              child: CircleAvatar(child: Text('A')),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('User', style: Theme.of(context).textTheme.subtitle1),
                Container(
                  margin: EdgeInsets.only(top: 5.0),
                  child: Text(text),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 메시지가 리스트에 추가될 때 애니메이션 효과를 적용한 예제입니다. SizeTransition 위젯을 사용하여 메시지가 추가될 때 애니메이션을 적용합니다. AnimationController를 사용하여 애니메이션의 지속 시간과 속도를 조절합니다.

 

반응형

 

 

4. 애니메이션 커스터마이징

애니메이션을 더욱 생동감 있게 커스터마이징할 수 있습니다. 다음은 메시지 전송 시 페이드 인 애니메이션을 추가한 예제입니다.

import 'package:flutter/material.dart';

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

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

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> with TickerProviderStateMixin {
  final List<ChatMessage> messages = [];
  final TextEditingController _controller = TextEditingController();

  void _sendMessage() {
    if (_controller.text.isNotEmpty) {
      ChatMessage message = ChatMessage(
        text: _controller.text,
        animationController: AnimationController(
          vsync: this,
          duration: Duration(milliseconds: 300),
        ),
      );

      setState(() {
        messages.add(message);
      });

      message.animationController.forward();
      _controller.clear();
    }
  }

  @override
  void dispose() {
    for (ChatMessage message in messages) {
      message.animationController.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Animation'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: messages.length,
              itemBuilder: (context, index) {
                return messages[index];
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: _sendMessage,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class ChatMessage extends StatelessWidget {
  final String text;
  final AnimationController animationController;

  ChatMessage({required this.text, required this.animationController});

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: animationController,
      child: SizeTransition(
        sizeFactor: CurvedAnimation(
          parent: animationController,
          curve: Curves.easeOut,
        ),
        axisAlignment: 0.0,
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 10.0),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.only(right: 16.0),
                child: CircleAvatar(child: Text('A')),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('User', style: Theme.of(context).textTheme.subtitle1),
                  Container(
                    margin: EdgeInsets.only(top: 5.0),
                    child: Text(text),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드는 FadeTransition을 추가하여 메시지가 추가될 때 페이드 인 애니메이션을 적용한 예제입니다. FadeTransition과 SizeTransition을 함께 사용하여 메시지가 자연스럽게 나타나는 효과를 구현합니다.

결론

Flutter에서 애니메이션을 사용하여 채팅 애니메이션을 구현하면 사용자 경험을 크게 향상시킬 수 있습니다. AnimationController, SizeTransition, FadeTransition 등을 사용하여 메시지 전송 시 다양한 애니메이션 효과를 적용할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 매력적이고 생동감 있는 채팅 애니메이션을 구현해보세요. 채팅 애니메이션을 통해 사용자에게 더욱 즐거운 경험을 제공할 수 있습니다.