oichat_ui 0.1.1

Pre-built UI widgets for OiChat SDK. Room list, chat view, and more.

oichat_ui

Pre-built Flutter UI widgets for OiChat SDK — drop-in room list, chat view, message bubbles, and more. Works with oichat_sdk.

한국어 | English

Features

• OiChatRoomList — Room list with pagination and unread badges
• OiChatView — Chat screen with real-time messaging and read receipts
• OiMessageBubble — Message bubble (text, image, file, system)
• OiMessageInput — Message input with file/image attachment
• OiChatThemeData — Theme customization (light/dark/fromMaterial)
• OiChatFeatures — 11 feature toggles
• Server Mode + Client Mode support

Getting Started

Installation

dependencies:
  oichat_sdk: ^0.1.0
  oichat_ui: ^0.1.0

flutter pub get

Quick Start

import 'package:oichat_sdk/oichat_sdk.dart';
import 'package:oichat_ui/oichat_ui.dart';

// Wrap your app with OiChatProvider
OiChatProvider(
  client: oichatClient,
  child: OiChatRoomList(
    onRoomTap: (room) {
      Navigator.push(context, MaterialPageRoute(
        builder: (_) => OiChatView(roomId: room.roomId),
      ));
    },
  ),
);

Widgets

OiChatProvider

Provides SDK context and theme to all child widgets.

OiChatProvider(
  client: oichatClient,
  theme: OiChatThemeData.dark(),
  features: OiChatFeatures(
    typing: true,
    readReceipt: true,
    fileUpload: true,
  ),
  child: child,
);

OiChatRoomList

Paginated room list with unread count badges and last message preview.

OiChatRoomList(
  onRoomTap: (room) => navigateToChat(room),
);

OiChatView

Full chat screen with real-time messaging, typing indicators, and read receipts.

OiChatView(
  roomId: 'room-abc',
  onBack: () => Navigator.pop(context),
);

OiMessageBubble

Individual message bubble supporting text, image, file, and system messages.

OiMessageBubble(
  message: message,
  isMine: true,
);

OiMessageInput

Message input with file/image attachment support.

OiMessageInput(
  roomId: 'room-abc',
);

Theming

// Built-in themes
OiChatThemeData.light()
OiChatThemeData.dark()

// From Material theme
OiChatThemeData.fromMaterial(Theme.of(context))

// Custom theme
OiChatThemeData(
  primaryColor: Colors.indigo,
  bubbleMineColor: Color(0xFFE0E7FF),
  bubbleOtherColor: Colors.white,
  backgroundColor: Colors.grey[50]!,
);

Feature Toggles

OiChatFeatures(
  typing: true,          // Typing indicator
  readReceipt: true,     // Read receipts
  fileUpload: true,      // File attachment
  imageUpload: true,     // Image attachment
  messageEdit: true,     // Edit sent messages
  messageDelete: true,   // Delete messages
  presence: true,        // Online/offline status
  reactions: false,      // Emoji reactions
  threads: false,        // Thread replies
  search: false,         // Message search
  mentions: false,       // @mentions
);

Links

• Documentation — Full guides and API reference
• Sample: Flutter App — Complete working example
• Core SDK (oichat_sdk) — Underlying chat SDK
• Server SDK (Node.js) — Backend token issuance
• Server SDK (Java) — Spring Boot backend

---

한국어

즉시 사용 가능한 Flutter 채팅 UI 위젯 — 채팅방 목록, 채팅 화면, 메시지 버블 등. oichat_sdk와 함께 사용합니다.

설치

dependencies:
  oichat_sdk: ^0.1.0
  oichat_ui: ^0.1.0

flutter pub get

빠른 시작

import 'package:oichat_sdk/oichat_sdk.dart';
import 'package:oichat_ui/oichat_ui.dart';

OiChatProvider(
  client: oichatClient,
  child: OiChatRoomList(
    onRoomTap: (room) {
      Navigator.push(context, MaterialPageRoute(
        builder: (_) => OiChatView(roomId: room.roomId),
      ));
    },
  ),
);

제공 위젯

위젯	설명
OiChatProvider	SDK 컨텍스트 제공, 테마/기능 설정
OiChatRoomList	채팅방 목록 (페이지네이션, 안읽은 수 뱃지)
OiChatView	채팅 화면 (실시간 메시징, 읽음 확인)
OiMessageBubble	메시지 버블 (텍스트, 이미지, 파일, 시스템)
OiMessageInput	메시지 입력 (파일/이미지 첨부)

테마 지원

• OiChatThemeData.light() / .dark() 기본 제공
• OiChatThemeData.fromMaterial()로 Material 테마 연동
• 커스텀 색상 직접 지정 가능
• 11개 기능 토글 (typing, readReceipt, fileUpload 등)

관련 링크

• 공식 문서 — 가이드 및 API 레퍼런스
• 샘플: Flutter 앱 — 전체 동작 예제
• 코어 SDK (oichat_sdk) — 기반 채팅 SDK
• 서버 SDK (Node.js) — 백엔드 토큰 발급
• 서버 SDK (Java) — Spring Boot 백엔드용

License

MIT