[flutter] 플러터(expandable)을 활용한 채팅 및 메신저 앱 개발 방법

04 Dec 2023

flutter

소개

채팅 및 메신저 앱은 현대적인 모바일 애플리케이션의 핵심 요소 중 하나입니다. 이러한 앱을 개발할 때 사용할 수 있는 효과적인 도구 중 하나가 플러터의 expandable 위젯입니다. 이 위젯을 활용하면 사용자가 채팅창을 확장하거나 축소할 수 있는 기능을 구현할 수 있습니다.

expandable 위젯

플러터의 expandable 위젯은 사용자가 앱에서 프로필, 사진, 동영상 등의 콘텐츠를 확장하거나 축소할 수 있는 기능을 제공합니다. 이를 통해 채팅창에 있는 콘텐츠를 더 편리하게 관리할 수 있습니다. expandable 위젯은 ExpansionTile 위젯을 사용하여 구현할 수 있습니다.

ExpansionTile(
  title: Text('채팅창'),
  children: <Widget>[
    ListTile(
      title: Text('메시지 1'),
    ),
    ListTile(
      title: Text('메시지 2'),
    ),
    ListTile(
      title: Text('메시지 3'),
    ),
  ],
)

위의 코드는 간단한 expandable 위젯을 생성하는 예시입니다. ExpansionTile 위젯을 사용하여 채팅창의 제목(title)과 하위 아이템(children)을 정의할 수 있습니다.

앱에 expandable 적용하기

이제 expandable 위젯을 사용하여 채팅 및 메신저 앱을 개발하는 방법을 알아보겠습니다.

Flutter 프로젝트를 생성합니다.
pubspec.yaml 파일에서 expandable 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  expandable: ^5.0.1

main.dart 파일을 열고 다음 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '채팅 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ChatPage(),
    );
  }
}

class ChatPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('채팅창'),
      ),
      body: ListView(
        children: <Widget>[
          ExpandablePanel(
            header: Text('메시지 1'),
            collapsed: Text('메시지 1 내용'),
            expanded: Text('메시지 1의 확장 내용'),
          ),
          ExpandablePanel(
            header: Text('메시지 2'),
            collapsed: Text('메시지 2 내용'),
            expanded: Text('메시지 2의 확장 내용'),
          ),
          ExpandablePanel(
            header: Text('메시지 3'),
            collapsed: Text('메시지 3 내용'),
            expanded: Text('메시지 3의 확장 내용'),
          ),
        ],
      ),
    );
  }
}

위의 코드는 메시지를 확장 가능한 패널로 표시하는 채팅 앱을 구현하는 예시입니다. ListView 위젯 내부에 ExpandablePanel 위젯을 사용하여 메시지를 표시하고, 확장 및 축소 상태에 따라 내용을 변경합니다.

앱을 실행하여 채팅창을 확인합니다.

결론

플러터의 expandable 위젯을 활용하면 채팅 및 메신저 앱을 보다 쉽게 개발할 수 있습니다. 이 위젯을 사용하여 사용자가 메시지를 확장하거나 축소할 수 있는 기능을 제공할 수 있습니다. 개발자는 expandable 패키지를 추가하고 위젯을 적절히 구성하여 원하는 디자인을 구현할 수 있습니다.

참고 자료: