Flutter UI Bits

A comprehensive Flutter UI library with 100+ animated, interactive & fully customizable widgets. Build stunning, memorable user interfaces with ease.

Features

• 🎨 20+ Beautiful Components - Buttons, Cards, Text Effects, Backgrounds, Inputs & more
• ✨ Smooth Animations - All components feature smooth, performant animations
• 🎯 Highly Customizable - Extensive customization options via props
• 📱 Responsive - Works seamlessly across all screen sizes
• 🚀 Zero Dependencies - Pure Flutter implementation with no external dependencies
• 💪 Production Ready - Battle-tested components ready for production use

Categories

Buttons

• AnimatedButton - Scale and shadow animations on hover
• ShimmerButton - Shimmer effect that glides across the button
• GlowButton - Pulsating glow effect
• RippleButton - Custom ripple effect on tap

Cards

• BounceCard - Bounces on tap with smooth animations
• FlipCard - Flip animation to reveal back content
• GlassCard - Glassmorphism design with blur effect

Text Effects

• BlurText - Text that animates from blurred to clear
• WaveText - Wave animation for each character
• GlitchText - Glitch effect with color shifts
• TypewriterText - Typewriter animation effect

Backgrounds

• AuroraBackground - Animated aurora borealis gradient
• ParticlesBackground - Animated particles with connections
• GradientMesh - Animated gradient mesh background

Inputs

• AnimatedTextField - Text field with scale and glow on focus
• FloatingLabelInput - Material-style floating label input

Animations

• BlobCursor - Morphing blob that follows cursor
• ParticleEffect - Particle explosion effect on tap
• MagneticEffect - Magnetic attraction effect on hover

Installation

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

dependencies:
  flutter_ui_bits: ^0.0.1

Then run:

flutter pub get

Usage

Import the package:

import 'package:flutter_ui_bits/flutter_ui_bits.dart';

Button Examples

AnimatedButton(
  text: 'Click Me',
  onPressed: () {
    print('Button pressed!');
  },
  backgroundColor: Colors.blue,
)

ShimmerButton(
  text: 'Shimmer',
  onPressed: () {},
  backgroundColor: Colors.purple,
)

GlowButton(
  text: 'Glow',
  onPressed: () {},
  backgroundColor: Colors.pink,
)

Card Examples

BounceCard(
  child: Text('Tap me!'),
  onTap: () {},
)

FlipCard(
  front: Container(
    color: Colors.blue,
    child: Center(child: Text('Front')),
  ),
  back: Container(
    color: Colors.red,
    child: Center(child: Text('Back')),
  ),
)

Text Effect Examples

BlurText(
  text: 'Hello World',
  autoAnimate: true,
)

WaveText(
  text: 'Wave Effect',
  repeat: true,
)

TypewriterText(
  text: 'Typing animation...',
  showCursor: true,
)

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.

Inspiration

Inspired by ReactBits and other modern UI component libraries.