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 🎨

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 ✅

For images: Use BoxFit.cover for background images

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

For performance: Use const widgets where possible
```
titleWidget: const MyCustomTitle(),
```

For accessibility: Always provide semantic labels

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

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)