extended_wrapper 1.0.2

A customizable wrapper widget with spine/tail designs for chat bubbles, tooltips, and other directional UI elements. Enhanced version of the original wrapper package with improved shadow system and co [...]

Extended Wrapper

A extended version of wrapper by toly1994.com - a Flutter package that provides customizable wrapper widgets with spine/tail designs, perfect for creating chat bubbles, tooltips, and other UI elements that need directional indicators.

Features

• 🎨 Customizable Spines: Create wrappers with spines pointing in any direction (top, left, right, bottom)
• 🎯 Flexible Styling: Customize colors, borders, shadows, and corner radius
• 📐 Precise Control: Adjust spine height, angle, offset, and positioning
• 🎭 Custom Paths: Build your own custom spine paths using the SpinePathBuilder
• 🌟 Shadow Support: Add beautiful shadows with full BoxShadow control
• 📱 Responsive: Works seamlessly across different screen sizes and orientations

🆚 Differences from Original Package

This package is based on the excellent wrapper package by toly1994.com, but includes significant improvements and modifications:

✨ Enhanced Features

Feature	Original wrapper	extended_wrapper
Shadow System ⭐	Simple elevation and shadowColor	Full BoxShadow support with proper spine shadow calculation

🔧 Technical Improvements

1. Enhanced Shadow System ⭐ Major Improvement

The most significant enhancement in extended_wrapper is the advanced shadow system that properly handles spines:

// Original wrapper - limited shadow that doesn't work with spines
Wrapper(
  elevation: 1,
  shadowColor: Colors.grey.withAlpha(88),
  child: Text('Message'),
)
// ❌ Shadow only applies to the main container, spine appears flat

// Extended wrapper - full BoxShadow with spine shadow calculation
Wrapper(
  shadow: BoxShadow(
    color: Colors.black26,
    blurRadius: 8,
    spreadRadius: 2,
    offset: Offset(2, 2),
  ),
  child: Text('Message'),
)
// ✅ Shadow properly calculated for both container AND spine

Getting Started

Installation

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

dependencies:
  extended_wrapper: ^1.0.0

Import

import 'package:extended_wrapper/extended_wrapper.dart';

Usage

Basic Usage

Wrapper(
  color: Colors.blue,
  child: Text('Hello World!'),
)

Chat Bubble with Left Spine

Wrapper(
  spineType: SpineType.left,
  spineHeight: 12.0,
  angle: 60,
  color: Colors.blue,
  shadow: BoxShadow(
    color: Colors.black26,
    blurRadius: 8,
    offset: Offset(2, 2),
  ),
  child: Padding(
    padding: EdgeInsets.all(12),
    child: Text('This is a chat message'),
  ),
)

Tooltip with Top Spine

Wrapper(
  spineType: SpineType.top,
  spineHeight: 8.0,
  angle: 45,
  color: Colors.grey[800]!,
  radius: 8.0,
  child: Padding(
    padding: EdgeInsets.all(8),
    child: Text(
      'Tooltip text',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

Custom Spine Path

Wrapper(
  spineType: SpineType.right,
  spinePathBuilder: (canvas, spineType, range) {
    return Path()
      ..moveTo(range.left, range.top)
      ..lineTo(range.right, range.center.dy)
      ..lineTo(range.left, range.bottom)
      ..close();
  },
  color: Colors.green,
  child: Text('Custom spine!'),
)

Simple Wrapper (No Spine)

Wrapper.just(
  color: Colors.orange,
  radius: 12.0,
  shadow: BoxShadow(
    color: Colors.orange.withOpacity(0.3),
    blurRadius: 12,
    spreadRadius: 2,
  ),
  child: Text('Simple wrapper'),
)

API Reference

Wrapper Properties

Property	Type	Default	Description
spineHeight	double	8.0	Height of the spine
angle	double	75	Angle of the spine in degrees
radius	double	5.0	Corner radius of the wrapper
offset	double	15	Offset from the edge for spine positioning
spineType	SpineType	SpineType.left	Direction of the spine
color	Color	Colors.green	Background color
shadow	BoxShadow?	null	Shadow configuration
strokeWidth	double?	null	Border width (if null, no border)
formEnd	bool	false	Position spine at the end
padding	EdgeInsets	EdgeInsets.all(8)	Internal padding
spinePathBuilder	SpinePathBuilder?	null	Custom spine path builder

SpineType Enum

• SpineType.top - Spine pointing upward
• SpineType.left - Spine pointing leftward
• SpineType.right - Spine pointing rightward
• SpineType.bottom - Spine pointing downward

SpinePathBuilder

typedef SpinePathBuilder = Path Function(
  Canvas canvas,
  SpineType spineType,
  Rect range,
);

Examples

Check out the example folder for a complete demonstration app showcasing various use cases and configurations.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.