animated_off_canvas_menu

Description:

animated off canvas menu

Animated Side Bar #
This is a simple animated side bar package which allows you to use state of the art side bar design very fast and easily. The implementation is very easy and a lot of features are available.

See the Side Bar working
Features #

Support of multiple background as any widget can be used on the backround.
Support for multiple buttons and a wide variety of other Widgets as buttons on the sidebar.
Very Simple Design.
Rounded Edges when sidebar is open.
Ability to adjust the padding between buttons.
Ability to adjust the Animation Duration.

Import #
import 'package:animated_off_canvas_menu/animated_off_canvas_menu.dart';
copied to clipboard
Use #
The Implementation is very easy
Sidebar(
internalPadding: const EdgeInsets.all(30),
isSideBarOpen: isSideBarOpen,
overlayWidget: Stack(
children: [
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: isSideBarOpen
? BorderRadius.circular(20)
: BorderRadius.circular(0)),
width: size.width,
height: size.height,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: SizedBox(
width: 200,
height: 80,
child: InkWell(
onTap: () {
setState(() {
isSideBarOpen = true;
});
},
child: Container(
decoration: BoxDecoration(
color: Colors.yellow,
borderRadius: BorderRadius.circular(14)),
child: const Center(child: Text("Open side bar")),
),
),
),
)
],
),
animationDuration: const Duration(seconds: 1),
backgroundWidget: Container(
color: Colors.green,
),
iconButtons: [
InkWell(
onTap: () {
setState(() {
isSideBarOpen = false;
});
},
child: Container(
width: 200,
height: 80,
decoration: BoxDecoration(
color: Colors.red, borderRadius: BorderRadius.circular(14)),
child: const Center(child: Text("Close it")),
),
),
InkWell(
onTap: () {

},
child: Container(
width: 200,
height: 80,
decoration: BoxDecoration(
color: Colors.blue, borderRadius: BorderRadius.circular(14)),
child: const Center(child: Text("Button 2")),
),
),
InkWell(
onTap: () {

},
child: Container(
width: 200,
height: 80,
decoration: BoxDecoration(
color: Colors.purple, borderRadius: BorderRadius.circular(14)),
child: const Center(child: Text("Button 3")),
),
),


],
)
copied to clipboard
The parameters include :

isSideBarOpen ( bool ) : Open or Close the Sidebar.
internalPadding ( EdgeInsets ) : The padding of the button inside of the Sidebar.
overlayWidget ( Can be any widget ): This is widget that is the main page or displayed over the side bar.
animationDuration ( Duration ) : The Duration of the animation.
backgroundWidget ( Can be any widget ) : Background of the Sidebar Menu.
iconButtons ( List of Widgets ) : The buttons in the side bar