{"id":18207471,"url":"https://github.com/js-bhavyansh/sliverappbar","last_synced_at":"2026-02-14T03:37:08.641Z","repository":{"id":258947117,"uuid":"875275377","full_name":"js-bhavyansh/SliverAppBar","owner":"js-bhavyansh","description":"A Flutter app showcasing a cool scrolling effect with a flexible SliverAppBar and smooth sliver content transitions","archived":false,"fork":false,"pushed_at":"2024-10-19T16:56:52.000Z","size":273,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-04T13:38:40.467Z","etag":null,"topics":["appbar","dart","flutter","sliverappbar"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/js-bhavyansh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-19T14:53:25.000Z","updated_at":"2024-10-21T05:57:55.000Z","dependencies_parsed_at":"2024-10-21T09:54:01.359Z","dependency_job_id":null,"html_url":"https://github.com/js-bhavyansh/SliverAppBar","commit_stats":null,"previous_names":["bhavyansh03-tech/sliverappbar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/js-bhavyansh/SliverAppBar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FSliverAppBar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FSliverAppBar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FSliverAppBar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FSliverAppBar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js-bhavyansh","download_url":"https://codeload.github.com/js-bhavyansh/SliverAppBar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js-bhavyansh%2FSliverAppBar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278322185,"owners_count":25967872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appbar","dart","flutter","sliverappbar"],"created_at":"2024-11-03T13:03:05.618Z","updated_at":"2025-10-04T13:38:43.161Z","avatar_url":"https://github.com/js-bhavyansh.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SliverAppBar with CustomScrollView\n\nThis Flutter app demonstrates the use of a `SliverAppBar` combined with a `CustomScrollView` to create a scrolling effect with multiple sliver items. The app showcases how to implement a flexible, responsive UI with scrollable content and a customizable app bar.\n\n## Features\n- **SliverAppBar**: A customizable app bar that scrolls along with the content, with options to pin or float.\n- **CustomScrollView**: Manages multiple sliver items that can be scrolled vertically.\n- **FlexibleSpaceBar**: An expandable app bar with a background image and dynamic title behavior.\n- **Sliver Items**: Multiple `SliverToBoxAdapter` items styled with padding, rounded corners, and different colors.\n\n## Preview\n\u003cimg src=\"https://github.com/user-attachments/assets/e2b3583f-218b-4aa6-8f83-b02f451adf83\" alt=\"First Screenshot\" style=\"width: 200px; height: auto; margin-right: 10px;\"\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/fae136a6-39b2-4913-8861-2cc1c82a006f\" alt=\"Second Screenshot\" style=\"width: 200px; height: auto; margin-right: 10px;\"\u003e\n\u003cimg src=\"https://github.com/user-attachments/assets/7d50c275-3375-4bb6-8708-0ce717e9029d\" alt=\"Third Screenshot\" style=\"width: 200px; height: auto;\"\u003e\n\n## Code Explanation\n\n- **`MyApp` class**: Initializes the app and applies the theme.\n- **`HomePage` class**: Implements the core UI, including the `CustomScrollView` and `SliverAppBar`.\n- **SliverAppBar**: \n  - **Floating**: The app bar appears as you scroll up.\n  - **Pinned**: Optionally pins the app bar so it stays visible at the top.\n  - **FlexibleSpaceBar**: Expands or collapses the app bar while scrolling.\n- **SliverToBoxAdapter**: Adds multiple styled containers to the scroll view, each with padding and a background color.\n\n## Customization\n\n- **ExpandedHeight**: Modify the `expandedHeight` property of `SliverAppBar` to control how much space it occupies when fully expanded.\n- **Pin/Floating**: Toggle the `floating` and `pinned` properties of `SliverAppBar` to adjust its behavior during scroll events.\n\n## Getting Started\n\nTo run this project on your local machine:\n\n1. Clone the repository and open it in your IDE:\n   ```bash\n   git clone https://github.com/Bhavyansh03-tech/FlutterTabBar.git\n   ```\n2. Run the project on an emulator or a physical device.\n   ```bash\n   flutter run\n   ```\n\n## Contributing\n\nContributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.\n\n1. Fork the repository.\n2. Create your feature branch (`git checkout -b feature/your-feature`).\n3. Commit your changes (`git commit -am 'Add some feature'`).\n4. Push to the branch (`git push origin feature/your-feature`).\n5. Create a new Pull Request.\n\n## Contact\n\nFor questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech) on GitHub or connect with me on [LinkedIn](https://www.linkedin.com/in/bhavyansh03/).\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-bhavyansh%2Fsliverappbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs-bhavyansh%2Fsliverappbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs-bhavyansh%2Fsliverappbar/lists"}