Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lannodev/we_slide

A backdrop animated widget
https://github.com/lannodev/we_slide

flutter flutter-package google music-player package swipe

Last synced: about 2 months ago
JSON representation

A backdrop animated widget

Host: GitHub
URL: https://github.com/lannodev/we_slide
Owner: lannodev
License: mit
Created: 2020-07-03T00:30:19.000Z (about 4 years ago)
Default Branch: master
Last Pushed: 2024-05-02T11:35:14.000Z (5 months ago)
Last Synced: 2024-07-09T06:18:03.069Z (3 months ago)
Topics: flutter, flutter-package, google, music-player, package, swipe
Language: Dart
Homepage:
Size: 9.56 MB
Stars: 74
Watchers: 3
Forks: 24
Open Issues: 6
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        


    





    

        

    

    

        

    

    

        

    

    

        

    



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 :)



  

  



## Installation

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

```yaml

dependencies:

  we_slide: ^2.4.0

```

## Basic Example 

https://dartpad.dev/?id=6a833cba62679260bf1a556a4fdc9043

```dart

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`|

|`isDismissible`|`bool`|This parameter specifies whether the `panel`will be dismissed when user taps on the screen|

|`controller`|`WeSlideController`|This object used to control animations, using methods like `hide` or `show` to display panel and footer or check if is visible with variable `isOpened`|

|`fadeSequence`|`List>`|This is the value that create a `fade transition` over `panel header`|

|`isUpSlide`|`bool`|This is the value that need up sliding panel if you want to enable Slide up through panel. By default is `true`|

## Support

If you want to be kind to me, then consider buying me a beer.



Thankyou!

## Features and bugs

Please file feature requests and bugs at the [issue tracker][tracker].

[tracker]: https://github.com/luciano-work/we_slide/issues

## License

[MIT License](./LICENSE)