extended_wrapper 1.0.1
extended_wrapper: ^1.0.1 copied to clipboard
Customizable Flutter widgets with spine/tail designs for chat bubbles, tooltips, and directional UI elements.
1.0.1 #
- Modify the README.md to be more clear and concise.
1.0.0 #
Initial release of the Extended Wrapper package base on wrapper by toly1994.com - a Flutter widget for creating customizable containers with spined edges, perfect for chat bubbles, tooltips, and other UI elements.
✨ Features #
Core Widget
- Wrapper: Main widget for creating containers with customizable spines
- Wrapper.just: Simplified constructor for basic containers without spines
- WrapperPainter: Custom painter for rendering the wrapper with spines and shadows
Spine Types
- SpineType.top: Spine pointing upward (ideal for tooltips above content)
- SpineType.left: Spine pointing leftward (perfect for chat bubbles from others)
- SpineType.right: Spine pointing rightward (perfect for chat bubbles from user)
- SpineType.bottom: Spine pointing downward (ideal for tooltips below content)
Customization Options
- spineHeight: Controls the height/length of the spine (default: 8.0)
- angle: Controls the angle of the spine tip (default: 75°)
- radius: Controls the corner radius of the container (default: 5.0)
- offset: Controls the horizontal/vertical offset of the spine (default: 15)
- color: Sets the fill color of the wrapper (default: Colors.green)
- strokeWidth: Optional border stroke width
- formEnd: Positions the spine at the end instead of the beginning
- padding: Customizable padding around the child content
- shadow: Optional BoxShadow for depth and elevation
Advanced Features
- Custom Spine Path Builder: Define custom spine shapes using
SpinePathBuilder - Shadow Support: Built-in shadow rendering with proper spine shadow calculation
- Responsive Design: Automatically adjusts padding based on spine type
- Performance Optimized: Efficient rendering with minimal rebuilds
Use Cases
- Chat Bubbles: Create realistic chat interfaces with left/right spines
- Tooltips: Design tooltips with top/bottom spines
- Callouts: Highlight important information with custom spine shapes
- Speech Bubbles: Build comic-style speech bubbles
- Custom UI Elements: Create unique containers for any design need
🎯 Examples Included #
- Basic wrapper with default settings
- Simple wrapper without spine
- Chat bubble examples (left and right spines)
- Tooltip examples (top and bottom spines)
- Custom spine shapes (triangle, curved)
- Advanced features (stroke, end positioning, different angles)
📦 Dependencies #
- Flutter SDK
- No additional external dependencies
🔧 Technical Details #
- Built with Flutter's CustomPainter for optimal performance
- Supports all Flutter platforms (iOS, Android, Web, Desktop)
- Follows Material Design principles
- Fully customizable and extensible
- Comprehensive test coverage included