🐾
dither_animalsv2.1.0
pub.dev
✏️Handcrafted Flutter package•~50 companions!~

Cute pixel pets,
ordered dithered.

Authentic 8×8 Bayer matrix stipples, editable color themes, gentle breathing, and signature special moves. Drop into any Flutter app.

flutter pub add dither_animals
🦉Owl
Color Theme Mode:solid
Edit Colors:
Presets:
Dot Matrix Geometry:square
Ordered Dither Engine•~how it works~

Dot Matrix Geometries

Switch between 4 distinct dot styles and adjust resolution density from coarse retro pixels to silky fine stipples.

Choose Dot Geometry:square
Grid Resolution:64 × 64 dots
32 (Retro)64 (Standard)96 (Ultra-Fine)
Try with:frog
// Flutter DitherAnimal:dot: DitherDot.square
DitherAnimal(
animal: DitherAnimalType.frog,
dot: DitherDot.square,
cells: 64,
)
Hover to wake
UI Recipes & Patterns•~copy & paste ✂~

Delightful Production Recipes

Ready-to-use Flutter patterns for empty states, gamification rewards, and interactive onboarding companions.

UI Pattern

Empty State Mascot

Delight users when no search results are found or an inbox is empty by dropping in a peaceful sleeping animal.

Column(
  mainAxisSize: MainAxisSize.min,
  children: const [
    SizedBox(
      width: 120,
      height: 120,
      child: DitherPet.koala(
        mood: PetMood.sleepy,
        dot: PetDot.square,
      ),
    ),
    SizedBox(height: 12),
    Text('No messages found', style: TextStyle(fontWeight: FontWeight.bold)),
    Text('Your inbox is peaceful and quiet.'),
  ],
)
Gamification

Reward Celebration

Celebrate user achievements with sparkling victory animations, fan shimmers, and subtle haptic buzzes.

Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.amber.shade50,
    borderRadius: BorderRadius.circular(20),
  ),
  child: Row(
    children: const [
      SizedBox(
        width: 80,
        height: 80,
        child: DitherAnimal(
          animal: DitherAnimalType.peacock,
          color: Color(0xFF0284C7),
          signature: true,
          sparkles: true,
        ),
      ),
      SizedBox(width: 14),
      Text('Level 10 Achieved!'),
    ],
  ),
)
Feedback

Animated Loading Mascot

Replace standard circular spinners with a cute waddling penguin or swimming turtle while waiting for assets.

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: const [
      SizedBox(
        width: 100,
        height: 100,
        child: DitherAnimal(
          animal: DitherAnimalType.penguin,
          motion: DitherMotion.loop,
          cells: 64,
        ),
      ),
      SizedBox(height: 8),
      Text('Loading assets...', style: TextStyle(fontFamily: 'monospace')),
    ],
  ),
)
Progress & Loading

Parade Progress Bar Loading Screen

Show an adorable parade of chibi animal widgets moving smoothly across a progress runway from right to left as loading advances.

// Flutter Right-to-Left Parade Progress Bar
Stack(
  alignment: Alignment.bottomCenter,
  children: [
    // Moving Parade Runway (Right-to-Left translation)
    AnimatedBuilder(
      animation: progressController,
      builder: (context, child) {
        final progress = progressController.value; // 0.0 -> 1.0
        return Transform.translate(
          // Moves characters from right (+screenWidth) to left
          offset: Offset(MediaQuery.of(context).size.width * (1.0 - progress * 2.2), -24),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: DitherAnimalType.values.take(12).map((type) =>
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Transform.flip(
                  flipX: true, // Face left towards motion direction
                  child: DitherAnimal(
                    animal: type,
                    motion: DitherMotion.loop,
                    cells: 48,
                  ),
                ),
              ),
            ).toList(),
          ),
        );
      },
    ),
    // Linear Progress Indicator Bar
    LinearProgressIndicator(
      value: progressController.value,
      color: const Color(0xFFFF6B35),
      backgroundColor: Colors.orange.shade50,
      minHeight: 8,
    ),
  ],
)
Engagement

Interactive Poke Pet

Keep users engaged on onboarding or profile screens with a cute pet companion that purrs and reacts when tapped.

SizedBox(
  width: 140,
  height: 140,
  child: DitherPet.cat(
    mood: PetMood.happy,
    dot: PetDot.square,
    theme: PetTheme.solid,
  ),
)