animated_slideover 1.0.13 animated_slideover: ^1.0.13 copied to clipboard
Create dynamic and responsive slide-over sidebars effortlessly with our Flutter package. Inspired by the fluidity of Tailwind CSS, this widget is designed for easy integration into your Flutter applications.
About AnimatedSlideOver #
"Create dynamic and responsive slide-over sidebars effortlessly with our Flutter package. Inspired by the fluidity of Tailwind CSS, this widget is designed for easy integration into your Flutter applications"
Tailwind's component : #
Usage : #
import 'package:animated_slideover/animated_slideover.dart';
class TestScreen extends StatefulWidget {
const TestScreen({Key? key}) : super(key: key);
@override
State<TestScreen> createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
Widget hehe(){
return AppAnimatedSideBar
(
onDispose: (){
},
buttonsWidgetList: [
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(
Colors.white), // Background color
foregroundColor:
MaterialStateProperty.all(
Colors.black), // Text color
side: MaterialStateProperty.all(const BorderSide(
color: Colors.grey,
width:
0.5)), // Border color and width
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(
8.0))), // Rounded corners
padding: MaterialStateProperty.all(
const EdgeInsets.all(
16.0)), // Padding around the button content
),
child: const Text(
'Cancel',
style: TextStyle(
fontWeight: FontWeight.w400),
),
),
const SizedBox(
width: 10,
),
ElevatedButton(
onPressed: () {
// Handle button press
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all(const Color(0xFF4338ca)), // Background color
foregroundColor:
MaterialStateProperty.all(
Colors.white), // Text color
side: MaterialStateProperty.all(const BorderSide(
color: Colors.grey,
width:
0.5)), // Border color and width
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(
8.0))), // Rounded corners
padding: MaterialStateProperty.all(
const EdgeInsets.all(
16.0)), // Padding around the button content
),
child: const Text(
'Save',
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white),
),
)
],
subtileText: Text(
'Create dynamic and responsive slide-over sidebars effortlessly with our Flutter package.'
'Inspired by the fluidity of Tailwind CSS, this widget is designed for easy integration into your Flutter applications.',
style: TextStyle(
fontSize: 15,
color: Colors.white.withOpacity(0.8),
),
),
contentWidgetList: const [
Padding(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Your Content Widget List')
],
),
)
],
titleText: const Text(
'Animated SlideOver',
style: TextStyle(
fontSize: 20,
color: Colors.white,
),
),
headerBgColor: const Color(0xFF4338ca),
headerIcon: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.close,
color: Colors.white,
)));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onTap: (){
showDialog(
context: context,
builder: (BuildContext context) {
return hehe();
},
);
},
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://images.pexels.com/photos/640781/pexels-photo-640781.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'),
fit: BoxFit.cover,
),
),
),
)
);
}
}
Properties | Type | Description |
---|---|---|
onDispose |
function |
A callback function that is invoked when the sidebar is disposed of or closed. |
headerIcon |
IconButton |
An IconButton widget representing the header icon. It's typically used for closing the sidebar. |
buttonsWidgetList |
List<Widget>? |
A list of widgets representing buttons or actions to be displayed in the sidebar. |
headerBgColor |
Color? |
The background color of the header section. If not provided, it uses the default background color. |
subtitleText |
Text? |
The subtitle text widget displayed below the title, providing additional information. |
titleText |
Text? |
The title text widget displayed at the top of the animated sidebar. |
contentWidgetList |
List<Widget> |
A list of widgets representing the content to be displayed within the animated sidebar. |