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.
Table of contents
Installing
1. Depend on it
Add this to your package's pubspec.yaml file:
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:
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:
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
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.
isTouchScrollingActive=true, //Optional
floatingButtonBackgroundColor :Colors.white, //Optional
floatingButtonSplashColor : Colors.white, //Optional
Scrolling Animations
There are 4 scrolling options for OPScroll.
enum ScrollingAnimationOptions { Fading, Drop, Circle, Default }
You can only choice 1 scrolling animation options.
Fading Scrolling Animation
OpscrollWeb(
isFloatingButtonActive: true,
isTouchScrollingActive: true,
pageController: pageController,
scrollingAnimationOptions: ScrollingAnimationOptions.Fading,
scrollSpeed: const Duration(milliseconds: 900,
onePageChildren:[]),
Circle Scrolling Animation
OpscrollWeb(
isFloatingButtonActive: true,
isTouchScrollingActive: true,
pageController: pageController,
scrollingAnimationOptions: ScrollingAnimationOptions.Circle,
scrollSpeed: const Duration(milliseconds: 600,
onePageChildren:[]),
Drop Scrolling Animation
OpscrollWeb(
isFloatingButtonActive: true,
isTouchScrollingActive: true,
pageController: pageController,
scrollingAnimationOptions: ScrollingAnimationOptions.Drop,
scrollSpeed: const Duration(milliseconds: 600,
onePageChildren:[]),
Up Coming
- [
✅ ] Fade Scroll Effect - [
✅ ] Drop Scroll Effect - [
⏳ ] New Scroll Effects
0 Dec 29, 2021
20 Oct 11, 2022
30 Nov 11, 2022
50 Jan 6, 2022
6 Nov 23, 2022
6 Sep 21, 2022
9 Dec 26, 2022
6 Jun 15, 2022
224 Oct 20, 2022
4 Jul 6, 2022