just_bubble 0.0.1

A flexible and highly customizable bubble widget for Flutter. Easily create chat bubbles, tooltips, or any speech bubble style with custom tails, borders, gradients, images, and shadows.

just_bubble

English | 简体中文

A flexible and highly customizable bubble widget for Flutter. Easily create chat bubbles, tooltips, or any speech bubble style with custom tails, borders, gradients, images, and shadows.

Online Preview

Features

• Customizable Tails: Support for triangular tails with adjustable alignment, gap, and join styles (sharp or rounded).
• Rich Decoration: Supports background colors, gradients, and images.
• Flexible Borders: Customizable border width, color, gradient, and corner radius.
• Shadows: Support for multiple box shadows.
• Easy Alignment: Built-in alignment options for tails on any side (top, bottom, left, right).

Getting started

Add just_bubble to your pubspec.yaml:

dependencies:
  just_bubble: ^0.0.1

Usage

Here is a simple example of how to use Bubble:

import 'package:just_bubble/just_bubble.dart';

Bubble(
  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
  color: Colors.white,
  shadows: [
    BoxShadow(blurRadius: 10, offset: Offset(0, 4), color: Colors.black26)
  ],
  border: BubbleBorder(
    tail: Tail.triangle(tailJoin: TailJoin.rounded),
    gradient: LinearGradient(colors: [Color(0xFF8E2DE2), Color(0xFF4A00E0)]),
    borderRadius: BorderRadius.circular(10),
    width: 4,
  ),
  child: Text(
    'Action is the foundational key to all success.',
    style: TextStyle(fontSize: 18, color: Color(0xFF4A00E0)),
  ),
)

Customizing the Tail

You can customize the tail using the Tail class:

• Tail.triangle(): Create a triangular tail.
  • edgeGap: Distance from the corner.
  • alignment: Position of the tail (e.g., BubbleAlignment.bottomLeft, BubbleAlignment.topRight).
  • tailJoin: Shape of the tail tip (TailJoin.sharp or TailJoin.rounded).
• Tail.none(): No tail.
• Advanced Customization: You can also create your own tail by extending the Tail class and overriding the getClipPath method.

Additional information

For more complex examples, check out the example project.