Detalhes do pacotev2.0.2

flutter_chat_bubble

Obtenha um widget de interface de chat de alto nível para desenvolvimento de aplicativos Flutter. Crie designs diversos como o WhatsApp e o Telegram. Personalize propriedades para uma interface visual impressionante. Aperfeiçoe suas habilidades e eleve a experiência do usuário em aplicativos de comunicação em tempo real.

AndroidiOSWebmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 10,6 mil
Curtidas: 329
Pontos Pub: 150

Instalar pacote

flutter pub add flutter_chat_bubble

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote Flutter que fornece uma interface de bolha de chat personalizável para a construção de interfaces de mensagens em tempo real. Inspirado em aplicativos populares como o WhatsApp e o Telegram, permite que desenvolvedores criem experiências de chat visualmente atraentes e interativas em múltiplas plataformas. Com opções extensivas de personalização de cores, formas e animações, atende às diversas necessidades de design mantendo o desempenho. Ideal para aumentar o engajamento do usuário em aplicações focadas em comunicação.

Casos de uso

aplicativos de mensagens em tempo real
Interfaces de chat de suporte ao cliente
Recursos de mensagens em redes sociais
Implementações de bate-papo em grupo
Notificações no aplicativo com estilo de bate-papo
fóruns de discussão de aplicativos educacionais

Principais recursos

Estilos de bolha personalizáveis
Suporte para alinhamento de mensagem (esquerda/direita)
Efeitos de animação embutidos
Compatibilidade multiplataforma
Integração fácil com a lógica de chat existente
Design responsivo para todos os tamanhos de tela

Indicado para

Desenvolvedores construindo aplicativos de chat
Designers de UI procurando componentes reutilizáveis
Equipes criando soluções de mensagens multiplataforma
Startups prototipando recursos de comunicação
Engenheiros de frontend focados na melhoria da experiência do usuário

Considerações

Requer gerenciamento adicional de estado para funcionalidade completa de chat
Pode ser necessário estilização personalizada para layouts complexos
Impacto no desempenho com grandes listas de mensagens
Indicadores de digitação ou confirmações de leitura internos limitados
Não é uma solução completa de chat fora da caixa

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Flutter Chat Bubble/UI

Discover the ultimate Flutter widget for creating diverse chat UI designs like WhatsApp, Telegram, and more. With its customizable properties, create stunning chat UI and elevate the user experience in your messaging app. Enhance your Flutter development skills with this top-notch chat UI widget and make a mark in the world of real-time communication.

Usage

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_chat_bubble: <latest-version>

Examples

Easily create dynamic chat bubbles with the ChatBubble widget in Flutter with the extensive range of properties.

Example 1

  ChatBubble(
        clipper: ChatBubbleClipper1(type: BubbleType.sendBubble),
        alignment: Alignment.topRight,
        margin: EdgeInsets.only(top: 20),
        backGroundColor: Colors.blue,
        child: Container(
          constraints: BoxConstraints(
            maxWidth: MediaQuery.of(context).size.width * 0.7,
          ),
          child: Text(
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            style: TextStyle(color: Colors.white),
          ),
        ),
      )
  
  ChatBubble(
    clipper: ChatBubbleClipper1(type: BubbleType.receiverBubble),
    backGroundColor: Color(0xffE7E7ED),
    margin: EdgeInsets.only(top: 20),
    child: Container(
      constraints: BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width * 0.7,
      ),
      child: Text(
        "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat",
        style: TextStyle(color: Colors.black),
      ),
    ),
  )

Example 2

ChatBubble(
    clipper: ChatBubbleClipper2(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper2(type: BubbleType.receiverBubble),
  )

Example 3

ChatBubble(
    clipper: ChatBubbleClipper3(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper3(type: BubbleType.receiverBubble),
  )

Example 4

ChatBubble(
    clipper: ChatBubbleClipper4(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper4(type: BubbleType.receiverBubble),
  )

Example 5

ChatBubble(
    clipper: ChatBubbleClipper5(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper5(type: BubbleType.receiverBubble),
  )

Example 6

ChatBubble(
    clipper: ChatBubbleClipper6(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper6(type: BubbleType.receiverBubble),
  )

Example 7

ChatBubble(
    clipper: ChatBubbleClipper7(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper7(type: BubbleType.receiverBubble),
  )

Example 8

ChatBubble(
    clipper: ChatBubbleClipper8(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper8(type: BubbleType.receiverBubble),
  )

Example 9

ChatBubble(
    clipper: ChatBubbleClipper9(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper9(type: BubbleType.receiverBubble),
  )

Example 10

ChatBubble(
    clipper: ChatBubbleClipper10(type: BubbleType.sendBubble),
  )
  
ChatBubble(
    clipper: ChatBubbleClipper10(type: BubbleType.receiverBubble),
  )