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.


name

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

  • white_check_mark Fade Scroll Effect
  • white_check_mark Drop Scroll Effect
  • hourglass_flowing_sand New Scroll Effects

Libraries

circleAnimation
dropAnimation
opscroll_web
opscroll_web_web
scrollState