silverappbar_demo

A new Flutter project.

Getting Started

SilverAppBar A customizable Flutter widget that creates an elegant collapsible app bar with smooth scroll animations and flexible content positioning. Getting Started Prerequisites

Flutter SDK (version 3.0.0 or higher) Dart SDK (version 2.17.0 or higher) Android Studio or VS Code with Flutter extensions

Installation & Setup

Clone the repository bashgit clone https://github.com/fidele012/silverappbar-demo.git cd silverappbar-demo

Install dependencies bashflutter pub get

Run the application bashflutter run Alternatively, for specific platforms: bash# For Android flutter run -d android

For iOS

flutter run -d ios

For Web

flutter run -d chrome

Build for production (optional) bash# Android APK flutter build apk --release

iOS

flutter build ios --release

Web

flutter build web --release

Core Attributes The SilverAppBar widget comes with three primary configurable attributes that control its behavior and appearance:

1. expandedHeight

Type: double Default: 200.0 Purpose: Defines the maximum height of the app bar when fully expanded Usage: Controls how much vertical space the app bar occupies before collapsing Example: expandedHeight: 250.0 creates a taller expanded state

2. pinned

Type: bool Default: true Purpose: Determines whether the app bar remains visible when collapsed Usage: When set to true, keeps a condensed version of the app bar at the top during scroll Example: pinned: false allows the app bar to completely disappear when scrolling

3. flexibleSpace

Type: Widget Default: FlexibleSpaceBar Purpose: Defines the content area that animates and transforms during scroll Usage: Houses the main visual content like images, gradients, or custom widgets Example: Can contain background images, titles, or complex layouts that respond to scroll

Features & Functionality Animation System

Smooth Transitions: Seamless morphing between expanded and collapsed states Scroll-Responsive: Real-time adaptation to user scroll gestures Performance Optimized: Efficient rendering without frame drops

Visual Elements

Custom Background: Support for images, gradients, or solid colors Typography Integration: Dynamic text scaling and positioning Shadow Effects: Automatic elevation changes during state transitions

Interactive Components

Touch Responsive: Immediate feedback to user interactions Gesture Recognition: Handles various scroll patterns and velocities State Persistence: Maintains scroll position across navigation

Widget Structure SilverAppBar ├── AppBar Properties │ ├── Title Management │ ├── Action Buttons │ └── Leading Widget ├── Flexible Space │ ├── Background Content │ ├── Overlay Elements │ └── Animation Controllers └── Scroll Behavior ├── Expansion Logic ├── Collapse Triggers └── State Management Use Cases

1. E-commerce Applications Perfect for product detail pages where you want to showcase large product images that elegantly collapse as users scroll through descriptions and reviews. The expanded state can display hero images while the collapsed state maintains branding and navigation.
2. Social Media Profiles Ideal for user profile screens where cover photos or profile information needs prominent display initially but shouldn't consume screen real estate when users browse through posts or content feeds.
3. News & Media Apps Excellent for article headers where featured images or video content can be displayed prominently, then gracefully minimize as readers focus on the article content below.
4. Travel & Tourism Great for destination pages where stunning location imagery captures attention in the expanded state, while practical information like weather, reviews, or booking options become the focus as users scroll.
5. Portfolio & Showcase Apps Suitable for creative portfolios where project previews or artist information can be featured prominently, then collapse to allow focus on detailed work samples or project descriptions.
6. Restaurant & Food Apps Perfect for menu or restaurant detail pages where appetizing hero images draw attention initially, then collapse to prioritize menu items, prices, and ordering functionality. Customization Options Color Schemes

Primary and accent color configuration Gradient support for dynamic backgrounds Theme-aware color adaptation

Content Layout

Flexible positioning of title elements Custom widget integration within flexible space Responsive design for different screen sizes

Animation Timing

Configurable animation duration Custom easing curves Scroll sensitivity adjustments

Technical Implementation The widget leverages Flutter's CustomScrollView and SliverAppBar components to create fluid animations. It utilizes the framework's built-in scroll physics and animation controllers to ensure smooth performance across different devices and screen densities. The implementation handles edge cases like over-scroll behavior, rapid scroll direction changes, and maintains consistency with platform-specific design guidelines while allowing for extensive customization. Screenshots Required To fully demonstrate the SilverAppBar functionality, include these screenshot types:

Expanded State Screenshot: Shows the app bar at full height with all content visible Transition State Screenshot: Captures the app bar mid-collapse to demonstrate the animation Collapsed State Screenshot: Displays the minimal app bar state during scroll Different Screen Sizes: Screenshots on phone, tablet, and web to show responsiveness Interaction Demonstration: Series showing scroll gesture effects Customization Examples: Various color schemes and content configurations

Contributing We welcome contributions! Please feel free to submit pull requests, report bugs, or suggest new features. Make sure to follow the existing code style and include appropriate tests for any new functionality.