https://github.com/js-bhavyansh/sliverappbar
A Flutter app showcasing a cool scrolling effect with a flexible SliverAppBar and smooth sliver content transitions
https://github.com/js-bhavyansh/sliverappbar
appbar dart flutter sliverappbar
Last synced: 4 months ago
JSON representation
A Flutter app showcasing a cool scrolling effect with a flexible SliverAppBar and smooth sliver content transitions
- Host: GitHub
- URL: https://github.com/js-bhavyansh/sliverappbar
- Owner: js-bhavyansh
- Created: 2024-10-19T14:53:25.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-19T16:56:52.000Z (over 1 year ago)
- Last Synced: 2025-10-04T13:38:40.467Z (8 months ago)
- Topics: appbar, dart, flutter, sliverappbar
- Language: C++
- Homepage:
- Size: 267 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SliverAppBar with CustomScrollView
This 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.
## Features
- **SliverAppBar**: A customizable app bar that scrolls along with the content, with options to pin or float.
- **CustomScrollView**: Manages multiple sliver items that can be scrolled vertically.
- **FlexibleSpaceBar**: An expandable app bar with a background image and dynamic title behavior.
- **Sliver Items**: Multiple `SliverToBoxAdapter` items styled with padding, rounded corners, and different colors.
## Preview
## Code Explanation
- **`MyApp` class**: Initializes the app and applies the theme.
- **`HomePage` class**: Implements the core UI, including the `CustomScrollView` and `SliverAppBar`.
- **SliverAppBar**:
- **Floating**: The app bar appears as you scroll up.
- **Pinned**: Optionally pins the app bar so it stays visible at the top.
- **FlexibleSpaceBar**: Expands or collapses the app bar while scrolling.
- **SliverToBoxAdapter**: Adds multiple styled containers to the scroll view, each with padding and a background color.
## Customization
- **ExpandedHeight**: Modify the `expandedHeight` property of `SliverAppBar` to control how much space it occupies when fully expanded.
- **Pin/Floating**: Toggle the `floating` and `pinned` properties of `SliverAppBar` to adjust its behavior during scroll events.
## Getting Started
To run this project on your local machine:
1. Clone the repository and open it in your IDE:
```bash
git clone https://github.com/Bhavyansh03-tech/FlutterTabBar.git
```
2. Run the project on an emulator or a physical device.
```bash
flutter run
```
## Contributing
Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.
1. Fork the repository.
2. Create your feature branch (`git checkout -b feature/your-feature`).
3. Commit your changes (`git commit -am 'Add some feature'`).
4. Push to the branch (`git push origin feature/your-feature`).
5. Create a new Pull Request.
## Contact
For 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/).
---