animated_off_canvas_menu 0.0.1 animated_off_canvas_menu: ^0.0.1 copied to clipboard
A lovely sidebar for your next project.
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.
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';
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")),
),
),
],
)
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