apptomate_custom_silver_appbar 0.0.1

A highly customizable `SliverAppBar` widget that provides a flexible app bar for scrollable views with built-in best practices and sensible defaults.

CustomSliverAppBar - Flutter Package

A highly customizable SliverAppBar widget for Flutter that provides elegant scroll effects with minimal setup.

Features ✨

• 🎭 Multiple scroll behaviors (pinned, floating)
• 🖼 Custom background (color, gradient, or widget)
• 🏷 Flexible title options (text or custom widget)
• 🛠 Built-in safe defaults and null checks
• 🎨 Fully customizable appearance
• 📱 Responsive design ready

Installation 📦

Add this line to your pubspec.yaml:

dependencies:
  apptomate_custom_silver_appbar: ^1.0.0

Then run:

flutter pub get

Basic Usage 🚀

CustomScrollView(
  slivers: [
    CustomSliverAppBar(
      title: 'My Profile',
      expandedHeight: 250,
      background: Image.network(
        'https://example.com/header.jpg',
        fit: BoxFit.cover,
      ),
    ),
    // Other slivers...
  ],
)

Customization Options ⚙️

Parameter	Description	Default
title	App bar title text	null
pinned	Whether app bar stays visible	true
floating	Whether app bar appears immediately on scroll up	false
expandedHeight	Fully expanded height	200.0
background	Custom background widget	Gradient fallback
titleWidget	Custom title widget (overrides title)	null
actions	List of action widgets	null
backgroundColor	Background color	Colors.blue

Advanced Examples 🎨

With Custom Title Widget

CustomSliverAppBar(
  titleWidget: Row(
    children: [
      Icon(Icons.verified_user, color: Colors.white),
      SizedBox(width: 8),
      Text('Verified Profile', style: TextStyle(shadows: [Shadow(color: Colors.black, blurRadius: 4)])),
    ],
  ),
)

With Gradient Background

CustomSliverAppBar(
  background: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.deepPurple, Colors.pink],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
)

With Actions

CustomSliverAppBar(
  actions: [
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
    IconButton(icon: Icon(Icons.more_vert), onPressed: () {}),
  ],
)

Best Practices ✅

1. For images: Use BoxFit.cover for background images

   background: Image.asset('assets/header.jpg', fit: BoxFit.cover)
   

2. For performance: Use const widgets where possible

   titleWidget: const MyCustomTitle(),
   

3. For accessibility: Always provide semantic labels

   actions: [
     IconButton(
       icon: Icon(Icons.search),
       tooltip: 'Search',
       onPressed: () {},
     ),
   ],
   

4. For responsiveness: Use relative sizing

   expandedHeight: MediaQuery.of(context).size.height * 0.3,
   

Troubleshooting 🛠

Issue: Title not visible
Fix: Adjust titlePadding or ensure text color contrasts with background

Issue: App bar not collapsing
Fix: Verify scrollable content exists in parent CustomScrollView

Issue: Performance problems
Fix: Optimize background widgets (use cached images, avoid complex layouts)