### Bubble Reactions Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

Shows how to implement chat bubbles with reaction indicators. This example includes displaying reactions with counts and handling taps on reactions and an 'add reaction' button.

```dart
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    BubbleNormal(
      text: 'Great work! 🎉',
      isSender: false,
      color: Color(0xFF1B97F3),
    ),
    BubbleReaction(
      reactions: [
        Reaction(emoji: '👍', count: 3, isUserReacted: true),
        Reaction(emoji: '❤️', count: 2),
        Reaction(emoji: '🎉', count: 1),
      ],
      onReactionTap: (reaction) {
        print('Tapped on ${reaction.emoji}');
      },
      onAddReactionTap: () {
        print('Add reaction tapped');
      },
    ),
  ],
)
```

--------------------------------

### Typing Indicator Examples (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This section provides examples for the TypingIndicator and TypingIndicatorWave widgets, which display a visual cue that someone is typing. Both allow customization of the bubble and dot colors.

```dart
TypingIndicator(
  showIndicator: true,
  bubbleColor: Color(0xFFE8E8EE),
  dotColor: Colors.black54,
),

// Alternative wave animation style
TypingIndicatorWave(
  showIndicator: true,
  bubbleColor: Color(0xFFE8E8EE),
  dotColor: Colors.black54,
)
```

--------------------------------

### Audio Chat Bubble Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This example demonstrates the implementation of an audio chat bubble using BubbleNormalAudio. It includes parameters for managing audio playback state, duration, position, and user interactions like seeking and play/pause.

```dart
Duration duration = new Duration();
Duration position = new Duration();
bool isPlaying = false;
bool isLoading = false;
bool isPause = false;

BubbleNormalAudio(
  color: Color(0xFFE8E8EE),
  duration: duration.inSeconds.toDouble(),
  position: position.inSeconds.toDouble(),
  isPlaying: isPlaying,
  isLoading: isLoading,
  isPause: isPause,
  onSeekChanged: _changeSeek,
  onPlayPauseButtonClick: _playAudio,
  sent: true,
)
```

--------------------------------

### Link Preview Bubble Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

Demonstrates how to create a chat bubble that displays a preview of a linked URL. It includes parameters for the URL, title, description, image, and custom styling.

```dart
BubbleLinkPreview(
  url: 'https://flutter.dev',
  title: 'Flutter - Build apps for any screen',
  description: 'Flutter transforms the app development process.',
  imageUrl: 'https://storage.googleapis.com/cms-storage-bucket/70760bf1e88b184bb1bc.png',
  text: 'Check out this awesome framework!',
  isSender: false,
  color: Color(0xFF1B97F3),
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
)
```

--------------------------------

### iMessage Style Chat Bubbles Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This example demonstrates how to create chat bubbles with an iMessage-like appearance using the BubbleSpecialThree widget. It shows how to customize text, color, tail position, and sender status for different messages.

```dart
BubbleSpecialThree(
  text: 'Added iMessage shape bubbles',
  color: Color(0xFF1B97F3),
  tail: false,
  textStyle: TextStyle(
      color: Colors.white,
      fontSize: 16
  ),
),
BubbleSpecialThree(
  text: 'Please try and give some feedback on it!',
  color: Color(0xFF1B97F3),
  tail: true,
  textStyle: TextStyle(
    color: Colors.white,
    fontSize: 16
  ),
),
BubbleSpecialThree(
  text: 'Sure',
  color: Color(0xFFE8E8EE),
  tail: false,
  isSender: false,
),
BubbleSpecialThree(
  text: "I tried. It's awesome!!!",
  color: Color(0xFFE8E8EE),
  tail: false,
  isSender: false,
),
BubbleSpecialThree(
  text: "Thanks",
  color: Color(0xFFE8E8EE),
  tail: true,
  isSender: false,
)
```

--------------------------------

### Date Chip Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This example shows how to create a date chip, often used to separate messages by date in a chat interface, using the DateChip widget. It accepts a DateTime object and a color for customization.

```dart
DateChip(
  date: new DateTime(2021, 5, 7),
  color: Color(0x558AD3D5),
)
```

--------------------------------

### Message Bar Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This code demonstrates the MessageBar widget, which provides a text input field with optional action buttons, commonly used at the bottom of a chat screen. It includes an example of adding action icons like 'add' and 'camera'.

```dart
MessageBar(
    onSend: (_) => print(_),
    actions: [
      InkWell(
        child: Icon(
          Icons.add,
          color: Colors.black,
          size: 24,
        ),
        onTap: () {},
      ),
      Padding(
        padding: EdgeInsets.only(left: 8, right: 8),
        child: InkWell(
          child: Icon(
            Icons.camera_alt,
            color: Colors.green,
            size: 24,
          ),
          onTap: () {},
        ),
      ),
    ],
  )
```

--------------------------------

### Reply/Quote Bubble Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This example shows how to create a reply or quote bubble using the BubbleReply widget. It allows specifying the original message, the sender of the original message, the reply text, and styling options.

```dart
BubbleReply(
  repliedMessage: 'This is the original message',
  repliedMessageSender: 'John Doe',
  text: 'This is my reply!',
  isSender: false,
  color: Color(0xFF1B97F3),
  replyBorderColor: Colors.white,
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
  sent: true,
)
```

--------------------------------

### Install chat_bubbles Flutter Plugin

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

To use the chat_bubbles plugin, add the following dependency to your project's pubspec.yaml file. This ensures the package is included in your project's build.

```yaml
dependencies:
  chat_bubbles: ^1.8.0
```

--------------------------------

### Complete Chat Screen Example in Dart

Source: https://context7.com/prahack/chat_bubbles/llms.txt

This Dart code demonstrates a complete chat screen using the chat_bubbles package. It includes message display, a message bar for input, and basic message sending functionality. Dependencies include flutter/material.dart and chat_bubbles.

```dart
import 'package:flutter/material.dart';
import 'package:chat_bubbles/chat_bubbles.dart';

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

class _ChatScreenState extends State<ChatScreen> {
  List<Map<String, dynamic>> messages = [];
  bool isTyping = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chat')),
      body: Stack(
        children: [
          ListView.builder(
            padding: EdgeInsets.only(bottom: 80),
            itemCount: messages.length + (isTyping ? 1 : 0),
            itemBuilder: (context, index) {
              if (isTyping && index == messages.length) {
                return TypingIndicator(showIndicator: true);
              }

              final msg = messages[index];

              if (msg['type'] == 'date') {
                return DateChip(date: msg['date']);
              }

              return ReactionOverlay(
                onReactionSelected: (emoji) => addReaction(index, emoji),
                child: BubbleNormal(
                  text: msg['text'],
                  isSender: msg['isSender'],
                  color: msg['isSender']
                    ? Color(0xFFE8E8EE)
                    : Color(0xFF1B97F3),
                  textStyle: TextStyle(
                    color: msg['isSender'] ? Colors.black87 : Colors.white,
                  ),
                  tail: msg['tail'] ?? true,
                  sent: msg['sent'] ?? false,
                  delivered: msg['delivered'] ?? false,
                  seen: msg['seen'] ?? false,
                ),
              );
            },
          ),
          MessageBar(
            onSend: (text) => sendMessage(text),
            actions: [
              IconButton(
                icon: Icon(Icons.camera_alt),
                onPressed: () => pickImage(),
              ),
            ],
          ),
        ],
      ),
    );
  }

  void sendMessage(String text) {
    setState(() {
      messages.add({
        'text': text,
        'isSender': true,
        'sent': true,
        'tail': true,
      });
    });
  }

  void addReaction(int index, String emoji) {
    // Handle reaction logic
  }

  void pickImage() {
    // Handle image picking logic
  }
}

```

--------------------------------

### Single Chat Bubble Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This code snippet shows how to create a single chat bubble using the BubbleSpecialOne widget. It allows for customization of text, sender status, color, and text styling.

```dart
BubbleSpecialOne(
  text: 'Hi, How are you? ',
  isSender: false,
  color: Colors.purple.shade100,
  textStyle: TextStyle(
    fontSize: 20,
    color: Colors.purple,
    fontStyle: FontStyle.italic,
    fontWeight: FontWeight.bold,
  ),
)
```

--------------------------------

### Image Chat Bubble Example (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This code snippet illustrates how to display an image within a chat bubble using the BubbleNormalImage widget. It allows for specifying an image, color, tail position, and delivery status.

```dart
BubbleNormalImage(
  id: 'id001',
  image: _image(),
  color: Colors.purpleAccent,
  tail: true,
  delivered: true,
)
```

--------------------------------

### Implement Audio Message Bubble with Playback Controls (Dart)

Source: https://context7.com/prahack/chat_bubbles/llms.txt

Provides a complete example of an interactive audio message bubble using the audioplayers package. It includes play/pause functionality, a seek slider, duration display, and loading indicators.

```dart
import 'package:audioplayers/audioplayers.dart';

class AudioMessageWidget extends StatefulWidget {
  @override
  _AudioMessageWidgetState createState() => _AudioMessageWidgetState();
}

class _AudioMessageWidgetState extends State<AudioMessageWidget> {
  AudioPlayer audioPlayer = AudioPlayer();
  Duration duration = Duration();
  Duration position = Duration();
  bool isPlaying = false;
  bool isLoading = false;
  bool isPause = false;

  @override
  void initState() {
    super.initState();
    audioPlayer.onDurationChanged.listen((d) {
      setState(() {
        duration = d;
        isLoading = false;
      });
    });
    audioPlayer.onPositionChanged.listen((p) {
      if (isPlaying) setState(() => position = p);
    });
    audioPlayer.onPlayerComplete.listen((_) {
      setState(() {
        isPlaying = false;
        position = Duration();
      });
    });
  }

  void _playAudio() async {
    if (isPause) {
      await audioPlayer.resume();
      setState(() { isPlaying = true; isPause = false; });
    } else if (isPlaying) {
      await audioPlayer.pause();
      setState(() { isPlaying = false; isPause = true; });
    } else {
      setState(() => isLoading = true);
      await audioPlayer.play(UrlSource('https://example.com/audio.mp3'));
      setState(() => isPlaying = true);
    }
  }

  @override
  Widget build(BuildContext context) {
    return BubbleNormalAudio(
      color: Color(0xFFE8E8EE),
      duration: duration.inSeconds.toDouble(),
      position: position.inSeconds.toDouble(),
      isPlaying: isPlaying,
      isLoading: isLoading,
      isPause: isPause,
      onSeekChanged: (value) {
        audioPlayer.seek(Duration(seconds: value.toInt()));
      },
      onPlayPauseButtonClick: _playAudio,
      sent: true,
      isSender: true,
    );
  }
}
```

--------------------------------

### Implement MessageBar with send action and custom actions (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This code demonstrates the usage of the MessageBar widget, which includes a send functionality and the ability to add custom actions. The 'onSend' callback is triggered when a message is sent, and custom actions like adding attachments or taking photos can be included as children of the 'actions' list.

```dart
MessageBar(
  onSend: (_) => print(_),
  actions: [
    InkWell(
      child: Icon(
        Icons.add,
        color: Colors.black,
        size: 24,
      ),
      onTap: () {},
    ),
    Padding(
      padding: EdgeInsets.only(left: 8, right: 8),
      child: InkWell(
        child: Icon(
          Icons.camera_alt,
          color: Colors.green,
          size: 24,
        ),
        onTap: () {},
      ),
    ),
  ],
)
```

--------------------------------

### Display URL Link Previews with BubbleLinkPreview (Dart)

Source: https://context7.com/prahack/chat_bubbles/llms.txt

The BubbleLinkPreview widget displays rich link metadata, including title, description, and a preview image. It supports configurations with or without an image, and a minimal version showing only the URL. Dependencies include the flutter_link_preview package for fetching metadata and the url_launcher package for handling taps.

```dart
// Full link preview with image
BubbleLinkPreview(
  url: 'https://flutter.dev',
  title: 'Flutter - Build apps for any screen',
  description: 'Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.',
  imageUrl: 'https://storage.googleapis.com/cms-storage-bucket/70760bf1e88b184bb1bc.png',
  text: 'Check out this awesome framework!',
  isSender: false,
  color: Color(0xFF1B97F3),
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
  onLinkTap: () => launchUrl(Uri.parse('https://flutter.dev')),
)

// Link preview without image
BubbleLinkPreview(
  url: 'https://pub.dev/packages/chat_bubbles',
  title: 'chat_bubbles | Flutter Package',
  description: 'Flutter chat bubble widgets, similar to Whatsapp and more shapes.',
  text: 'Our package on pub.dev!',
  isSender: true,
  color: Color(0xFFE8E8EE),
  showImage: false,  // Hide preview image
  sent: true,
  imageHeight: 120,  // Custom image height when shown
)

// Minimal link preview (URL only)
BubbleLinkPreview(
  url: 'https://example.com/article',
  isSender: true,
  color: Color(0xFFE8E8EE),
)
```

--------------------------------

### Create Reply/Quote Chat Bubbles (Dart)

Source: https://context7.com/prahack/chat_bubbles/llms.txt

Shows how to implement a BubbleReply component for quoting previous messages, mimicking features like WhatsApp's reply functionality. It supports customizing sender, message content, and styling for quoted text.

```dart
BubbleReply(
  repliedMessage: 'This is the original message being quoted',
  repliedMessageSender: 'John Doe',
  text: 'This is my reply to your message!',
  isSender: false,
  color: Color(0xFF1B97F3),
  replyBorderColor: Colors.white,
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
  sent: true,
  onReplyTap: () => print('Scroll to original message'),
)

BubbleReply(
  repliedMessage: 'Thanks for the info',
  repliedMessageSender: 'Me',
  text: "You're welcome! Happy to help.",
  isSender: true,
  color: Color(0xFFE8E8EE),
  replyBorderColor: Color(0xFF1B97F3),
  replyBackgroundColor: Colors.grey.withOpacity(0.15),
  delivered: true,
  repliedMessageTextStyle: TextStyle(
    color: Colors.black54,
    fontSize: 13,
    fontStyle: FontStyle.italic,
  ),
  repliedMessageSenderTextStyle: TextStyle(
    color: Color(0xFF1B97F3),
    fontWeight: FontWeight.bold,
  ),
)
```

--------------------------------

### Dart Chat Bubble UI Components

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

Demonstrates the usage of various chat bubble widgets like BubbleNormal, BubbleNormalImage, BubbleNormalAudio, BubbleSpecialOne, and BubbleSpecialTwo. These widgets are used to construct a chat interface with different message types and styling options. It requires the Flutter SDK and relevant UI packages.

```dart
Duration duration = new Duration();
Duration position = new Duration();
bool isPlaying = false;
bool isLoading = false;
bool isPause = false;

@override
Widget build(BuildContext context) {
  final now = new DateTime.now();
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Stack(
      children: [
        SingleChildScrollView(
          child: Column(
            children: <Widget>[
              BubbleNormalImage(
                  id: 'id001',
                  image: _image(),
                  color: Colors.purpleAccent,
                  tail: true,
                  delivered: true
              ),
              BubbleNormalAudio(
                color: Color(0xFFE8E8EE),
                duration: duration.inSeconds.toDouble(),
                position: position.inSeconds.toDouble(),
                isPlaying: isPlaying,
                isLoading: isLoading,
                isPause: isPause,
                onSeekChanged: _changeSeek,
                onPlayPauseButtonClick: _playAudio,
                sent: true,
              ),
              BubbleNormal(
                text: 'bubble normal with tail',
                isSender: false,
                color: Color(0xFF1B97F3),
                tail: true,
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.white
                )
              ),
              BubbleNormal(
                text: 'bubble normal with tail',
                isSender: true,
                color: Color(0xFFE8E8EE),
                tail: true,
                sent: true
              ),
              DateChip(
                date: new DateTime(now.year, now.month, now.day - 2)
              ),
              BubbleNormal(
                text: 'bubble normal without tail',
                isSender: false,
                color: Color(0xFF1B97F3),
                tail: false,
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.white
                )
              ),
              BubbleNormal(
                text: 'bubble normal without tail',
                color: Color(0xFFE8E8EE),
                tail: false,
                sent: true,
                seen: true,
                delivered: true
              ),
              BubbleSpecialOne(
                text: 'bubble special one with tail',
                isSender: false,
                color: Color(0xFF1B97F3),
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.white
                )
              ),
              DateChip(
                date: new DateTime(now.year, now.month, now.day - 1)
              ),
              BubbleSpecialOne(
                text: 'bubble special one with tail',
                color: Color(0xFFE8E8EE),
                seen: true
              ),
              BubbleSpecialOne(
                text: 'bubble special one without tail',
                isSender: false,
                tail: false,
                color: Color(0xFF1B97F3),
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.black
                )
              ),
              BubbleSpecialOne(
                text: 'bubble special one without tail',
                tail: false,
                color: Color(0xFFE8E8EE),
                sent: true
              ),
              BubbleSpecialTwo(
                text: 'bubble special tow with tail',
                isSender: false,
                color: Color(0xFF1B97F3),
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.black
                )
              ),
              DateChip(
                date: now
              ),
              BubbleSpecialTwo(
                text: 'bubble special tow with tail',
                isSender: true,
                color: Color(0xFFE8E8EE),
                sent: true
              ),
              BubbleSpecialTwo(
                text: 'bubble special tow without tail',
                isSender: false,
                tail: false,
                color: Color(0xFF1B97F3),
                textStyle: TextStyle(
                  fontSize: 20,
                  color: Colors.black
                )
              ),
              BubbleSpecialTwo(
                text: 'bubble special tow without tail',
                tail: false,
                color: Color(0xFFE8E8EE),
                delivered: true
              )
            ]
          )
        )
      ]
    )
  );
}
```

--------------------------------

### Implement Message Input Bar with MessageBar (Dart)

Source: https://context7.com/prahack/chat_bubbles/llms.txt

The MessageBar widget provides a complete input bar for chat screens, featuring a text field, send button, and optional action buttons for attachments or camera. It supports a reply mode for responding to specific messages and offers extensive customization for appearance and behavior. The `onSend` callback is crucial for handling message submission.

```dart
// Basic message bar
MessageBar(
  onSend: (message) {
    print('Sending: $message');
    // Add message to chat list
  },
)

// Full-featured message bar with actions
MessageBar(
  onSend: (message) => sendMessage(message),
  onTextChanged: (text) => print('Typing: $text'),
  messageBarHintText: 'Type a message...',
  messageBarHintStyle: TextStyle(fontSize: 16, color: Colors.grey),
  textFieldTextStyle: TextStyle(color: Colors.black),
  sendButtonColor: Colors.blue,
  messageBarColor: Color(0xFFF4F4F5),
  actions: [
    InkWell(
      child: Icon(Icons.attach_file, color: Colors.black, size: 24),
      onTap: () => pickFile(),
    ),
    Padding(
      padding: EdgeInsets.symmetric(horizontal: 8),
      child: InkWell(
        child: Icon(Icons.camera_alt, color: Colors.green, size: 24),
        onTap: () => openCamera(),
      ),
    ),
  ],
)

// Message bar with reply mode
MessageBar(
  replying: true,
  replyingTo: 'John: Hey, how are you?',
  replyWidgetColor: Color(0xFFF4F4F5),
  replyIconColor: Colors.blue,
  replyCloseColor: Colors.grey,
  onTapCloseReply: () {
    setState(() => isReplying = false);
  },
  onSend: (message) {
    sendReplyMessage(message, originalMessageId);
    setState(() => isReplying = false);
  },
)
```

--------------------------------

### Display Network Images in Chat Bubbles (Dart)

Source: https://context7.com/prahack/chat_bubbles/llms.txt

Demonstrates how to use BubbleNormalImage to display network images, with support for Hero animations and cached images for performance. It handles image loading, error states, and tap interactions.

```dart
BubbleNormalImage(
  id: 'image_001',
  image: Image.network(
    'https://example.com/photo.jpg',
    fit: BoxFit.cover,
  ),
  color: Colors.purpleAccent,
  tail: true,
  delivered: true,
  isSender: true,
)

BubbleNormalImage(
  id: 'image_002',
  image: CachedNetworkImage(
    imageUrl: 'https://example.com/large_photo.jpg',
    progressIndicatorBuilder: (context, url, progress) =>
        CircularProgressIndicator(value: progress.progress),
    errorWidget: (context, url, error) => Icon(Icons.error),
  ),
  color: Colors.blueAccent,
  tail: true,
  seen: true,
  onTap: () => print('Custom tap handler'),
  onLongPress: () => print('Show image options'),
)

BubbleNormalImage(
  id: 'image_003',
  image: Image.asset('assets/photo.png'),
  isSender: false,
  color: Color(0xFFE8E8EE),
  tail: true,
  leading: CircleAvatar(child: Text('A')),
)
```

--------------------------------

### Display BubbleSpecialThree with and without tail (Dart)

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

This snippet shows how to render BubbleSpecialThree widgets with and without a tail. It demonstrates customization of text, color, tail visibility, and text styles. The 'isSender' property can also be set to differentiate sender and receiver bubbles.

```dart
BubbleSpecialThree(
  text: 'bubble special three without tail',
  color: Color(0xFF1B97F3),
  tail: false,
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
),
BubbleSpecialThree(
  text: 'bubble special three with tail',
  color: Color(0xFF1B97F3),
  tail: true,
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
),
BubbleSpecialThree(
  text: "bubble special three without tail",
  color: Color(0xFFE8E8EE),
  tail: false,
  isSender: false,
),
BubbleSpecialThree(
  text: "bubble special three with tail",
  color: Color(0xFFE8E8EE),
  tail: true,
  isSender: false,
)
```

--------------------------------

### Long-Press Reaction Picker Overlay in Dart

Source: https://context7.com/prahack/chat_bubbles/llms.txt

A wrapper widget that displays a reaction picker overlay upon long-pressing its child widget. This provides an intuitive way to add reactions to any message bubble. It can be enabled or disabled, and accepts a list of reactions and a callback for selection.

```dart
// Wrap any bubble with reaction overlay
ReactionOverlay(
  child: BubbleNormal(
    text: 'Long press me to react!',
    isSender: false,
    color: Color(0xFF1B97F3),
    textStyle: TextStyle(color: Colors.white),
  ),
  reactions: ['❤️', '👍', '😂', '😮', '😢', '🙏'],
  onReactionSelected: (emoji) {
    print('Selected: $emoji');
    addReactionToMessage(messageId, emoji);
  },
  enabled: true,
)

// Disabled overlay (for read-only views)
ReactionOverlay(
  child: BubbleSpecialOne(text: 'No reactions here', isSender: true),
  enabled: false,
)
```

--------------------------------

### WhatsApp-Style Bubble (BubbleSpecialOne) - Flutter

Source: https://context7.com/prahack/chat_bubbles/llms.txt

Illustrates the BubbleSpecialOne widget, designed to mimic WhatsApp's chat bubble appearance with a pointed tail. It supports message status indicators and allows for custom constraints to control bubble width. This widget is ideal for creating a familiar messaging experience.

```dart
// Sender bubble with seen status
BubbleSpecialOne(
  text: 'This looks just like WhatsApp!',
  isSender: true,
  color: Color(0xFFE8E8EE),
  tail: true,
  seen: true,
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.black87,
  ),
)

// Receiver bubble
BubbleSpecialOne(
  text: 'Yes, the design is very familiar',
  isSender: false,
  color: Color(0xFF1B97F3),
  tail: true,
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.white,
  ),
)

// Custom constraints for wider bubbles
BubbleSpecialOne(
  text: 'This is a longer message that needs more space',
  isSender: true,
  color: Color(0xFFE8E8EE),
  constraints: BoxConstraints(
    maxWidth: 300,
  ),
  delivered: true,
)
```

--------------------------------

### Wave Animation Typing Indicator in Dart

Source: https://context7.com/prahack/chat_bubbles/llms.txt

Implements a wave-style typing indicator where dots animate sequentially. It accepts parameters for visibility, bubble color, and dot color, with options for customization like dot size, border radius, and animation duration.

```dart
// Wave-style typing indicator
TypingIndicatorWave(
  showIndicator: true,
  bubbleColor: Color(0xFFE8E8EE),
  dotColor: Colors.black54,
)

// Customized wave indicator
TypingIndicatorWave(
  showIndicator: isTyping,
  bubbleColor: Colors.blue[50]!,
  dotColor: Colors.blue,
  dotSize: 8.0,
  borderRadius: 20.0,
  animationDuration: Duration(milliseconds: 1200),
)
```

--------------------------------

### Import chat_bubbles Package in Dart

Source: https://github.com/prahack/chat_bubbles/blob/master/README.md

After adding the dependency, import the chat_bubbles package into your Dart files to access its widgets and functionalities. This is a standard import statement for Flutter packages.

```dart
import 'package:chat_bubbles/chat_bubbles.dart';
```

--------------------------------

### Emoji Reaction Selection Widget in Dart

Source: https://context7.com/prahack/chat_bubbles/llms.txt

A horizontal widget for selecting emoji reactions, suitable for overlays, bottom sheets, or inline UI. It takes a list of available reactions and a callback for when a reaction is selected. Customization options include background color, emoji size, border radius, spacing, and padding.

```dart
// Basic reaction picker
ReactionPicker(
  reactions: ['❤️', '👍', '😂', '😮', '😢', '🙏'],
  onReactionSelected: (emoji) {
    addReactionToMessage(messageId, emoji);
  },
)

// Customized picker
ReactionPicker(
  reactions: ['👍', '❤️', '🔥', '💯', '🎉'],
  onReactionSelected: (emoji) => handleReaction(emoji),
  backgroundColor: Colors.white,
  emojiSize: 32,
  borderRadius: 28,
  spacing: 12,
  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
)

// Show in bottom sheet
showModalBottomSheet(
  context: context,
  builder: (context) => Padding(
    padding: EdgeInsets.all(16),
    child: ReactionPicker(
      onReactionSelected: (emoji) {
        Navigator.pop(context);
        addReaction(emoji);
      },
    ),
  ),
);
```

--------------------------------

### Display Emoji Reactions on Chat Messages in Dart

Source: https://context7.com/prahack/chat_bubbles/llms.txt

A widget to display emoji reactions on chat messages, mimicking platforms like Slack or Discord. It shows reaction counts and highlights user-selected reactions. It can be aligned left or right based on sender status and configured with custom colors and reaction buttons.

```dart
// Message with reactions
Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    BubbleNormal(
      text: 'Great work on this project!',
      isSender: false,
      color: Color(0xFF1B97F3),
      textStyle: TextStyle(color: Colors.white),
    ),
    BubbleReaction(
      reactions: [
        Reaction(emoji: '👍', count: 3, isUserReacted: true),
        Reaction(emoji: '❤️', count: 2),
        Reaction(emoji: '🎉', count: 1),
      ],
      onReactionTap: (reaction) {
        // Toggle reaction or show who reacted
        print('Tapped: ${reaction.emoji}');
      },
      onAddReactionTap: () {
        // Show reaction picker
        showReactionPicker();
      },
      alignRight: false,  // Align left for receiver
    ),
  ],
)

// Sender message with reactions (right-aligned)
Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    BubbleNormal(
      text: 'Thanks everyone!',
      isSender: true,
      color: Color(0xFFE8E8EE),
    ),
    BubbleReaction(
      reactions: [
        Reaction(emoji: '❤️', count: 5),
      ],
      alignRight: true,  // Align right for sender
      showAddButton: false,  // Hide add button
      backgroundColor: Color(0xFFF0F0F0),
      userReactionColor: Color(0xFFE3E3FD),
    ),
  ],
)
```

--------------------------------

### Show Typing Indicators with TypingIndicator (Dart)

Source: https://context7.com/prahack/chat_bubbles/llms.txt

The TypingIndicator widget displays animated bouncing dots to indicate when another user is typing. It offers smooth animations and performance optimizations, with customizable appearance including dot color, size, spacing, and animation duration. The `showIndicator` property controls its visibility, often tied to a state variable.

```dart
// Basic typing indicator
TypingIndicator(
  showIndicator: true,
  bubbleColor: Color(0xFFE8E8EE),
  dotColor: Colors.black54,
)

// Customized typing indicator
TypingIndicator(
  showIndicator: isOtherUserTyping,
  bubbleColor: Colors.grey[200]!,
  dotColor: Colors.blue,
  numberOfDots: 3,
  dotSize: 10.0,
  dotSpacing: 6.0,
  borderRadius: 24.0,
  animationDuration: Duration(milliseconds: 1500),
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 14),
)

// Toggle visibility based on state
TypingIndicator(
  showIndicator: typingUsers.isNotEmpty,
  bubbleColor: Color(0xFFE8E8EE),
  dotColor: Colors.black54,
)
```

--------------------------------

### Create Date Separators with DateChip (Dart)

Source: https://context7.com/prahack/chat_bubbles/llms.txt

The DateChip widget displays centered date separators in chat conversations, automatically formatting dates to 'Today', 'Yesterday', or the full date. It can be customized with different colors for various date ranges. This widget is useful for organizing chat history chronologically.

```dart
// Today's date
DateChip(
  date: DateTime.now(),
  color: Color(0x558AD3D5),
)

// Yesterday
DateChip(
  date: DateTime.now().subtract(Duration(days: 1)),
)

// Custom color for older dates
DateChip(
  date: DateTime(2024, 1, 15),
  color: Colors.grey.withOpacity(0.3),
)

// Usage in a chat list
ListView(
  children: [
    DateChip(date: DateTime(2024, 1, 10)),
    BubbleNormal(text: 'Old message', isSender: false, color: Colors.blue),
    DateChip(date: DateTime.now()),
    BubbleNormal(text: 'New message', isSender: true, color: Colors.grey[300]!),
  ],
)
```

--------------------------------

### iMessage-Style Bubble (BubbleSpecialThree) - Flutter

Source: https://context7.com/prahack/chat_bubbles/llms.txt

Demonstrates the BubbleSpecialThree widget, which replicates the appearance of iMessage bubbles with smooth curves. This widget is suitable for creating an iOS-like chat interface. It supports sender/receiver differentiation and tail customization for message grouping.

```dart
// iMessage sender style
BubbleSpecialThree(
  text: 'Added iMessage shape bubbles',
  color: Color(0xFF1B97F3),
  tail: false,
  textStyle: TextStyle(
    color: Colors.white,
    fontSize: 16,
  ),
)

// With tail for last message in group
BubbleSpecialThree(
  text: 'Please try and give some feedback!',
  color: Color(0xFF1B97F3),
  tail: true,
  textStyle: TextStyle(
    color: Colors.white,
    fontSize: 16,
  ),
)

// Receiver side
BubbleSpecialThree(
  text: "It's awesome!!!",
  color: Color(0xFFE8E8EE),
  tail: true,
  isSender: false,
  textStyle: TextStyle(
    color: Colors.black87,
    fontSize: 16,
  ),
)
```

--------------------------------

### Basic Text Chat Bubble (BubbleNormal) - Flutter

Source: https://context7.com/prahack/chat_bubbles/llms.txt

Demonstrates the usage of BubbleNormal, a basic text chat bubble widget. It supports sender/receiver differentiation, message status indicators (sent, delivered, seen), customizable text styles, and tap callbacks. Consecutive messages can be grouped by setting `tail` to false.

```dart
// Sender message with delivery status
BubbleNormal(
  text: 'Hello! How are you doing today?',
  isSender: true,
  color: Color(0xFFE8E8EE),
  tail: true,
  sent: true,
  delivered: true,
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.black87,
  ),
  onTap: () => print('Bubble tapped'),
  onLongPress: () => print('Show message options'),
)

// Receiver message with custom styling
BubbleNormal(
  text: 'I am doing great, thanks for asking!',
  isSender: false,
  color: Color(0xFF1B97F3),
  tail: true,
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.white,
  ),
  leading: CircleAvatar(
    radius: 16,
    child: Text('JD'),
  ),
)

// Consecutive messages without tail
BubbleNormal(
  text: 'This is a follow-up message',
  isSender: true,
  color: Color(0xFFE8E8EE),
  tail: false,  // No tail for grouped messages
  seen: true,   // Shows blue double checkmark
)
```

--------------------------------

### Alternative Tail Design Bubble (BubbleSpecialTwo) - Flutter

Source: https://context7.com/prahack/chat_bubbles/llms.txt

Showcases the BubbleSpecialTwo widget, which features a distinct tail shape curving from the bottom of the bubble. This provides an alternative visual style for chat messages, complementing other bubble designs. It supports standard message status indicators.

```dart
// Sender with bottom-curved tail
BubbleSpecialTwo(
  text: 'Check out this bubble style!',
  isSender: true,
  color: Color(0xFFE8E8EE),
  tail: true,
  sent: true,
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.black87,
  ),
)

// Receiver message
BubbleSpecialTwo(
  text: 'The tail curves differently here',
  isSender: false,
  color: Color(0xFF1B97F3),
  tail: true,
  textStyle: TextStyle(
    fontSize: 16,
    color: Colors.black,
  ),
)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.