nikhilvadoliya / flutter_slider_drawer Goto Github PK

I am just wonder how can i open left slide menu with left to right slide gesture as common in normal slide drawer?

I'm not sure what blocks it, but it doesn't work.

I tried to close drawer when user tap outside the menu ( tap on MainWidget) by closeDrawer(), it closed the menu but the var isDrawerOpen still have value is true. I think it must be set to false whenever menu is closed?

flutter_slider_drawer: ^1.0.1
Flutter 1.20.0-8.0.pre.40 • channel unknown • unknown source
Framework • revision 6eaaf1650e (27 hours ago) • 2020-07-09 18:04:37 -0700
Engine • revision 9b3e3410f0
Tools • Dart 2.9.0 (build 2.9.0-20.0.dev 06cb010247)

Would be nice to have a way to optionally enable a greyed out backdrop which animates with the animation controllers value on sliding the drawer.

Hi,
I have tried having the drawer initially open, but have not seen the possibility.
You can tell me how to do it and if I can't, you can implement this functionality.
Thanks.

Regards,
Jose.

Hey @NikhilVadoliya,

I am not 100 % sure if the following problem is a bug or is happening because I am using a custom app bar. However, when a user opens the slider drawer via a slide gesture (right swipe) and closing it again with a left swipe, the animated icon is not being triggered and therefore it can happen, that the icon shows the wrong state.

Is it possible to solve this problem and if yes how?
I guess I have to call the animationController.reverse() function or the animationController.forward() function. This actually is not a problem at all. But how do I detect the gesture?

Here you can see the problem:

Kind regards

hi,
the issue is when using webview in the content, scrolling not responsive. Sometimes it detects sometimes not.
I though it prevent by flutter_slider_drawer, maybe up and down gestures.

https://youtu.be/RzgO9DUi4FI

when tried to use the rtl menu and wrapped the main scaffold inside Directionality widget the main menu icon stayed to left left of the app bar it should move to the right side

I used bloc package to implement the dark / light mode, I faced an issue when using the slider drawer widget , the scaffold bg color is not changing in the child widget of the slider drawer.

How to use this package with MaterialRoute for navigation to other screens? I tried but unsuccessfully :(
It's possible? Thanks in advance!

how to make drawer open as default on load?
Thanks.

Scaffold(
backgroundColor: Colors.white,

  body: SliderDrawer(
      slideDirection: slideDirection,
      animationDuration: 400,
      appBar: SliderAppBar(
        appBarHeight: 150,
        appBarPadding: const EdgeInsets.only(left: 30, top: 24),
        drawerIcon: SvgPicture.asset("assets/icons/menu_icon.svg"),
        drawerIconColor: ExchangeColors.blackColor,
        drawerIconSize: 50,
        appBarColor:ExchangeColors.whiteColor,
        title: Padding(
          padding: const EdgeInsets.only(top: 15.0),
          child: Text("", style:GoogleFonts.inter(fontSize: 22,fontWeight: FontWeight.bold,color: ExchangeColors.primaryColor),
          ),
        ),
        trailing: Padding(
          padding: const EdgeInsets.only(top: 15,right: 15),
          child: GestureDetector(
            onTap: (){
              Get.to(()=> const MyProfileScreen());
            },
            child: const Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                //
                // IconButton(onPressed: (){
                //
                // }, icon: const Icon(Icons.messenger_outlined,color: GlaColors.appBarIconsColor,)),
                CircleAvatar(
                  radius: 30,
                  backgroundColor: Colors.white,
                  child: CircleAvatar(
                    radius: 25,
                    backgroundImage: CachedNetworkImageProvider(
                        'https://nikhilvadoliya.github.io/assets/images/nikhil_1.webp'),
                  ),
                ),
              ],),
          ),
        ),
      ),
      key: _sliderDrawerKey,
      sliderOpenSize: 260,

      slider: SliderView(
        onItemClick: (title) {
          _sliderDrawerKey.currentState!.closeSlider();
          setState(() {
            this.title = title;
          });
        },
      ),
      child:const HomeScreen() ),
);

Anytime I provide a custom drawer icon when I click the icon the drawer doesn't open I have to to drag it and when it opens the drawer icon doesnt change to close icon and click it does'nt close the drawer. please any code snippet to solve this.

Hi,
In windows (desktop) if the drawer has enough space in the window it should show initially expanded.
Thanks a lot.
Regards,
Jose.

I need to add AppBar with action menus how to add?

Thank you for this wonderful plugin. I am facing issue while changing app locale from rtl to ltr and vice versa. While changing app locale i am setting slide direction accordingly ie:
slideDirection: lang == 1 ? SlideDirection.RIGHT_TO_LEFT : SlideDirection.LEFT_TO_RIGHT,
This change slide direction but burger menu and trailing icons remains in same direction.
Looking for help.
Thanks(;

First of all, thank you for that amazing package @NikhilVadoliya!

Sadly, I have found a bug which makes it impossible for me to use your package until this bug is fixed. I have recreated this bug in this repo so you can see exactly where the problem is. The repo is ready to run on a device.

When you have opened the app you see two buttons right below the appBar. Normally they should increase and decrease the counter, however they don't. This is because of the overlay. Now to line 51 and change the variable useSafeArea to true and reload the app. Now the whole content is wrapped in a SaveArea widget and as you can see, the buttons inside the ListView has slid down a bit. When you now press the button, the counter actually increases and decreases.

To show you that the overflow is coming from you SliderDrawer open your slider.dart file and jump to line 200. Change appBarColor to Colors.black. Because you have edited a package now you have to press q in the terminal to terminate the current application and run flutter run again. Now you can see that the space between the appBar and the ListView is filled with black.

I already tried to get this problem fixed and change you Expanded widget with Flexible in line 213 in your slider.dart file but sadly this doesn't make any difference. Could you please help me to fix that issue so I can happily use your package?

Also, I don't see any other way to implement a bottomNavigationBar rather then using a Scaffold inside the child property of SliderDrawer as the bottomNavigationBar has to be inside the child property of SliderDrawer. Otherwise it will not get pushed out of the screen by the Drawer.

Kind regards

Hi thank you for this package. how to apply without appbar ?
can i apply to specific button ?

Hello Dorin ,
I like the drawer you did, but it is hard to use it with the documentation provided in the pub.dev site,
so please if you have some time , can you make a more explained docs for this awesome package.
thanks bro!

when isRtl: true, style: DrawerStyle.style1, menuScreen at incurrent location.
ZoomDrawer(
moveMenuScreen: false,
isRtl: true,
controller: z,
borderRadius: 24,
style: DrawerStyle.style1,
showShadow: true,
openCurve: Curves.fastOutSlowIn,
slideWidth: MediaQuery.of(context).size.width * .55,
duration: const Duration(milliseconds: 500),
angle: 0.0,
mainScreen: _AuthorList(),
menuScreen:_SliderView()
//_SliderView(),
)

Hi, thanks for the library!

So as the title implies, the SliderAppBar requires material design library which makes it impossible to use if you want to use SliderAppBar inside a Cupertino app.

Can we get this using Widget directly, instead of Material.dart. The issue is specifically using IconButtons from Material Design.

Thanks.

Can we custom-set the WIDTH_GESTURE and others?

_key.currentState is always null and it's not possible to use the drawer operations.
How it's possible to solve it?

Thanks for woderfull library. But I am facing one problem. When I am giving drawerIcon its working fine but when I open the slider menu this custom drawerIcon should change into close button which is not happening. Can you please guide me. @NikhilVadoliya @nikhil-concetto @danielolaviobr
Thanks (🔢

SliderMenuContainer(
                      appBarColor: themeColor,
                      sliderMenuCloseSize: 22,
                      shadowColor: Colors.black,
                      key: _key,
                      trailing: Row(
                        children: [
                          if (_selectedIndex == 0)
                            Icon(
                              Icons.share_outlined,
                              color: Colors.white,
                            ),
                          if (_selectedIndex == 0)
                            GestureDetector(
                              onTap: () {
                                EventEmitter.publish('filter', true);
                              },
                              child: Container(
                                padding: EdgeInsets.all(8),
                                margin: EdgeInsets.symmetric(horizontal: 8),
                                child: Icon(
                                  FontAwesomeIcons.slidersH,
                                  size: 14,
                                ),
                                decoration: BoxDecoration(
                                    borderRadius:
                                        BorderRadius.all(Radius.circular(8)),
                                    color: Colors.white),
                              ),
                            ),
                          if (_selectedIndex == 1)
                            Container(
                              padding: EdgeInsets.all(6),
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(20))),
                              child: Icon(
                                FontAwesomeIcons.headset,
                                color: themeColor,
                                size: 16,
                              ),
                            ),
                          if (_selectedIndex == 1)
                            IconButton(
                              icon: Icon(
                                FontAwesomeIcons.solidBell,
                                color: Colors.white,
                              ),
                              onPressed: () {
                                Navigator.pushNamed(
                                    context, notificationPageRoute);
                              },
                            ),
                        ],
                      ),
                      isShadow: false,
                      isDraggable: true,
                      slideDirection: SlideDirection.LEFT_TO_RIGHT,
                      appBarPadding: const EdgeInsets.only(top: 0),
                      sliderMenuOpenSize: 300,
                      appBarHeight: 60,
                      drawerIcon: SvgPicture.asset("assets/icons/menu.svg"),)

Look in the attach screenshot. the child goes left and hide the content. I am unable to scroll. When drawer is closed the child must be fit in the available space of the screen like other app sliders looks.

How can i implement back button in scope of one slider item ?

Hello, thanks for this plugin.

If you try to create a similar design to the one that is in the Readme (white appbar + white background in the body) but with a different color, say green. You will see a 1 pixel line between the appbar and body. This is because the appbar is a container, and the widget.sliderMain will likely also be a container.
This line can be removed by changing this at the end of the build() method:

Expanded( child:widget.sliderMain)

To:

Expanded(
child: Container(
decoration: BoxDecoration(
color: widget.appBarColor,
border: Border.all(width: 0, style: BorderStyle.none),
),
child: widget.sliderMain)),