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
• Usage
• Up Coming
• Scrolling Options
• Scrolling Animations
  • Fading Scrolling Animation
  • Circle Scrolling Animation
  • Drop Scrolling Animation

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

• [:white_check_mark:] Fade Scroll Effect
• [:white_check_mark:] Drop Scroll Effect
• [:hourglass_flowing_sand:] New Scroll Effects