curved_ribbon_banner #

A decorative Flutter widget that displays repeating text along a curved wave path with gradient fill, animated drop shadow, and shimmer effects.

Features #

• Repeating text along a curved wave path
• Gradient ribbon fill with smooth color transitions
• Animated drop shadow
• Periodic shimmer/shine sweep for a premium feel
• Configurable wave shape, animation speed, and text styling
• Precomputed text positions for better performance

Installation #

Add to your pubspec.yaml:

dependencies:
  curved_ribbon_banner: ^1.0.0

Then run:

flutter pub get

Usage #

import 'package:curved_ribbon_banner/curved_ribbon_banner.dart';

// Basic usage
CurvedRibbonBanner(
  text: 'SELAMAT DATANG',
  ribbonColor: Colors.indigo,
)

// Custom colors
CurvedRibbonBanner(
  text: 'FLASH SALE 50% OFF',
  ribbonColor: Colors.red,
  textColor: Colors.yellow,
)

// Custom size and font
CurvedRibbonBanner(
  text: 'PREMIUM MEMBER',
  ribbonColor: Colors.teal,
  height: 80,
  fontSize: 18,
)

// Custom wave shape
CurvedRibbonBanner(
  text: 'CUSTOM WAVE',
  ribbonColor: Colors.purple,
  waveAmplitude: 1.5,
  waveFrequency: 1.2,
)

// Fast animation
CurvedRibbonBanner(
  text: 'FAST',
  ribbonColor: Colors.orange,
  animationDuration: Duration(seconds: 4),
)

Properties #

Example #

See the example directory for a complete demo app.

License #

MIT License - see LICENSE for details.