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:
dependencies:
we_slide: ^2.4.0
Basic Example
https://dartpad.dev/?id=6a833cba62679260bf1a556a4fdc9043
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<TweenSequenceItem<double>> |
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.