Giter VIP home page Giter VIP logo

we_slide's Introduction

pub package GitHub Stars

The inspiration behind the package was actually a need for a slide transition like spotify (iOS) Unfortunately, I couldnโ€™t find any efficient package, so I literally banged my fist on the table, rolled up my sleeves and created my own solution. Through this package I could better understand some principles of flutter animation :)

Music App Store App

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  we_slide: ^2.1.0

Basic Example

import 'package:we_slide/we_slide.dart';

final _colorScheme = Theme.of(context).colorScheme;
final double _panelMinSize = 70.0;
final double _panelMaxSize = MediaQuery.of(context).size.height / 2;
return Scaffold(
  backgroundColor: Colors.black,
  body: WeSlide(
    panelMinSize: _panelMinSize,
    panelMaxSize: _panelMaxSize,
    body: Container(
      color: _colorScheme.background,
      child: Center(child: Text("This is the body ๐Ÿ’ช")),
    ),
    panel: Container(
      color: _colorScheme.primary,
      child: Center(child: Text("This is the panel ๐Ÿ˜Š")),
    ),
    panelHeader: Container(
      height: _panelMinSize,
      color: _colorScheme.secondary,
      child: Center(child: Text("Slide to Up โ˜๏ธ")),
    ),
  ),
);

Others Examples

Change propertie home to MusicApp() or StoreApp inside main.dart to see more examples ๐Ÿ˜Š

Custom properties

There are many options that you can change:

Properties Type Description
footer widget This is the widget that will be below as a footer, this can be used as a BottomNavigationBar
appbar widget This is the widget that will be on top as a AppBar, this can be used as a AppBar
body widget This is the widget that will be hided with Panel. You can fit any widget. This parameter is required
panel widget This is the widget that will slide over the Body. You can fit any widget.
panelHeader widget This is the header that will be over the Panel. You can fit any widget.
panelMinSize double This is the initial value that set the panel min height. If the value is greater than 0, panel will be this size over body. By default is 150.0. Set 0.0 if you want to hide Panel
panelMaxSize double This is the value that set the panel max height. When slide up the panel, this value define the max height that panel will be over Body. By default is 400.0 if you want that panel cover the whole Body, set with MediaQuery.of(context).size.height
panelWidth double This is the value that set the panel width, by default is MediaQuery.of(context).size.width
panelBorderRadiusBegin double Set this value to create a border radius over panel. When panelBorderRadiusBegin is diffrent from panelBorderRadiusEnd and the panel is slide up, this create an animation border over panel. By default is 0.0
panelBorderRadiusEnd double Set this value to create a border radius over panel. When panelBorderRadiusBegin is diffrent from panelBorderRadiusEnd and the panel is slide up, this create an animation border over panel. By default is 0.0
bodyBorderRadiusBegin double Set this value to create a border radius over body. When bodyBorderRadiusBegin is diffrent from bodyBorderRadiusEnd and the panel is slide up, this create an animation border over body. By default is 0.0
bodyBorderRadiusEnd double Set this value to create a border radius over body. When bodyBorderRadiusBegin is diffrent from bodyBorderRadiusEnd and the panel is slide up, this create an animation border over body. By default is 0.0
bodyWidth double This is the value that set the body width. By default is MediaQuery.of(context).size.width
parallaxOffset double Set this value to create a parallax effect when the panel is slide up. By default is 0.1
footerHeight double This is the value that set the footer height. by default is 60.0
appBarHeight double This is the value that set the appbar height. by default is 80.0
overlayOpacity double This is the value that defines opacity overlay effect bethen body and panel.
blurSigma double This is the value that creates an image filter that applies a Gaussian blur.
transformScaleBegin double This is the value that defines transform scale begin effect. By default is 1.0
transformScaleEnd double This is the value that defines transform scale end effect. By default is 0.9
overlayColor color This is the value that defines overlay color effect. By default is Colors.black
blurColor color This is the value that defines blur color effect. By default is Colors.black
backgroundColor color This is the value that defines background color. By default is Colors.black end should be the same as body
hideFooter bool This is the value that defines if you want to hide the footer. By default is true
hidePanelHeader bool This is the value that defines if you want to hide the panelHeader. By default is true
parallax bool This is the value that defines if you want to enable paralax effect. By default is false
transformScale bool This is the value that defines if you want to enable transform scale effect. By default is false
overlay bool This is the value that defines if you want to enable overlay effect. By default is false
blur bool This is the value that defines if you want to enable Gaussian blur effect. By default is false
animateDuration bool This is the value that sets the duration of the animation. By default is 300 milliseconds
controller WeSlideController This object used to control animations, using methods like hide or show to display panel or check if is visible with variable isOpened
fadeSequence List<TweenSequenceItem<double>> This is the value that create a fade transition over panel header

Features and bugs

Please file feature requests and bugs at the issue tracker.

we_slide's People

Contributors

luciano-work avatar 002344-luciano avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.