Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guccisekspir/opscroll_web
One Page Scroll package for Flutter Web
https://github.com/guccisekspir/opscroll_web
animation dart flutter flutter-ui flutterweb flutterwebapp
Last synced: 4 months ago
JSON representation
One Page Scroll package for Flutter Web
- Host: GitHub
- URL: https://github.com/guccisekspir/opscroll_web
- Owner: guccisekspir
- License: mit
- Created: 2021-09-16T12:30:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-01T10:58:02.000Z (over 2 years ago)
- Last Synced: 2024-10-12T08:42:12.331Z (4 months ago)
- Topics: animation, dart, flutter, flutter-ui, flutterweb, flutterwebapp
- Language: Dart
- Homepage:
- Size: 1.77 MB
- Stars: 8
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# OPscroll_web
OPScroll
A simple and easy to use library that creates OnePage sites for Flutter Web Developers! Make a beautiful and smooth landing pages with OPScroll with in minutes. Try out our Web Demo App.
[](https://www.buymeacoffee.com/shekspir)
# Table of contents
- [Installing](#installing)
- [Usage](#usage)
- [Up Coming](#up-coming)
- [Scrolling Options](#scrolling-options)
- [Scrolling Animations](#scrolling-animations)
- [Fading Scrolling Animation](fading-scrolling-animation)
- [Circle Scrolling Animation](circle-scrolling-animation)
- [Drop Scrolling Animation](drop-scrolling-animation)
# Installing
### 1. Depend on it
Add this to your package's `pubspec.yaml` file:
```yaml
dependencies:
opscroll_web: ^0.0.2
```
### 2. Install it
You can install packages from the command line:
with `pub`:
```
$ pub get
```
with `Flutter`:
```
$ flutter pub get
```
### 3. Import it
Now in your `Dart` code, you can use:
```dart
import 'package:opscroll_web/opscroll_web.dart';
```
# Usage
`OPScroll` is a _Stateful Widget_ that produces OnePage scroll mechanicsm for your
Flutter Web Projects.
Include it in your `build` method like:
```dart
OpscrollWeb({
onePageChildren:[],
pageController:PageController(),
scrollCurve : Curves.easeIn,
scrollSpeed : const Duration(milliseconds: 900),
floatingButtonBackgroundColor :Colors.white,
floatingButtonSplashColor : Colors.white,
isFloatingButtonActive : false,
isTouchScrollingActive : false,
scrollingAnimationOptions: ScrollingAnimationOptions.Default,
scrollDirection = Axis.vertical,
})
```
# Scrolling Options
You can allow to scrolling by tapping.Just give the true value to `isTouchScrollingActive`
```dart
isTouchScrollingActive=true,
```
You can allow to scrolling by Floating Action Button.Just give the true value to `isFloatingButtonActive`
Also you can change background & splash colors.
```dart
isTouchScrollingActive=true, //Optional
floatingButtonBackgroundColor :Colors.white, //Optional
floatingButtonSplashColor : Colors.white, //Optional
```
# Scrolling Animations
There are 4 scrolling options for OPScroll.
```dart
enum ScrollingAnimationOptions { Fading, Drop, Circle, Default }
```
You can only choice 1 scrolling animation options.
---
## Fading Scrolling Animation
```dart
OpscrollWeb(
isFloatingButtonActive: true,
isTouchScrollingActive: true,
pageController: pageController,
scrollingAnimationOptions: ScrollingAnimationOptions.Fading,
scrollSpeed: const Duration(milliseconds: 900,
onePageChildren:[]),
```
---
## Circle Scrolling Animation
```dart
OpscrollWeb(
isFloatingButtonActive: true,
isTouchScrollingActive: true,
pageController: pageController,
scrollingAnimationOptions: ScrollingAnimationOptions.Circle,
scrollSpeed: const Duration(milliseconds: 600,
onePageChildren:[]),
```
---
## Drop Scrolling Animation
```dart
OpscrollWeb(
isFloatingButtonActive: true,
isTouchScrollingActive: true,
pageController: pageController,
scrollingAnimationOptions: ScrollingAnimationOptions.Drop,
scrollSpeed: const Duration(milliseconds: 600,
onePageChildren:[]),
```
# Up Coming
- [:white_check_mark:] Fade Scroll Effect
- [:white_check_mark:] Drop Scroll Effect
- [:hourglass_flowing_sand:] New Scroll Effects