animated_slideover 1.0.10

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"

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: (){
          print('dispose method');
        },

        buttonsWidgetList: [
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text(
              'Cancel',
              style: TextStyle(
                  fontWeight: FontWeight.w400),
            ),
            style: ButtonStyle(
              backgroundColor:
              MaterialStateProperty.all(
                  Colors.white), // Background color
              foregroundColor:
              MaterialStateProperty.all(
                  Colors.black), // Text color
              side: MaterialStateProperty.all(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(
                  EdgeInsets.all(
                      16.0)), // Padding around the button content
            ),
          ),
          SizedBox(
            width: 10,
          ),
          ElevatedButton(
            onPressed: () {
              // Handle button press

            },
            child: Text(
              'Save',
              style: TextStyle(
                  fontWeight: FontWeight.w400,
                  color: Colors.white),
            ),
            style: ButtonStyle(
              backgroundColor:
              MaterialStateProperty.all(Color(0xFF4338ca)), // Background color
              foregroundColor:
              MaterialStateProperty.all(
                  Colors.white), // Text color
              side: MaterialStateProperty.all(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(
                  EdgeInsets.all(
                      16.0)), // Padding around the button content
            ),
          )
        ],



        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: [
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [

                Text('Your Content Widget List')
              ],
            ),
          )
        ],

        titleText: Text(
          'Animated SlideOver',
          style: TextStyle(
            fontSize: 20,
            color: Colors.white,
          ),
        ),

        headerBgColor: Color(0xFF4338ca),

        headerIcon: IconButton(
            onPressed: () {
              Navigator.pop(context);
            },
            icon: Icon(
              FeatherIcons.x,
              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: Image.network('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.