[Bug] SliderDrawer has invisible overlay right below App Bar

[FrazeColder]

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

[mprync]

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.

This is by design. You'll need to mess around with scaffold stacking.

Scaffold
--> navigationbar = your navigation bar
--> body SliderDrawer
----> appbar = your appbar

Something similar to this should slide the content of the scaffold from appbar and body but will not slide the bottom nav bar. Just need to think of widgets are a layer upon layer.

[FrazeColder]

But when I place the navigation bar inside the body of SliderDrawer the bottom navigation bar will not be pushed out of the screen when opening the drawer. Did you manage to solve that? @InFaMoUsZero

[mprync]

But when I place the navigation bar inside the body of SliderDrawer the bottom navigation bar will not be pushed out of the screen when opening the drawer. Did you manage to solve that? @InFaMoUsZero

@FrazeColder

Do you mean the child of the SliderDrawer? My child contains the entire scaffold for my app, that includes appbar, body and bottom nav bar. The slider pushes it all.

[FrazeColder]

Can you post an example? @InFaMoUsZero
My scaffold looks like this:

return Scaffold(
  body: SliderDrawer(
    slider: Container(color: Colors.red),
    appBar: const SliderAppBar(
      title: Text('Hello World'),
      isTitleCenter: true,
    ),
    child: Scaffold(
      bottomNavigationBar: [...]
      body: [...]
    ),
  ),
);

[mprync]

Can you post an example? @InFaMoUsZero My scaffold looks like this:

return Scaffold(
  body: SliderDrawer(
    slider: Container(color: Colors.red),
    appBar: const SliderAppBar(
      title: Text('Hello World'),
      isTitleCenter: true,
    ),
    child: Scaffold(
      bottomNavigationBar: [...]
      body: [...]
    ),
  ),
);

Try removing the top scaffold. My SliderDrawer is the root widget. The child is the entire app including scaffold.

return SliderDrawer(
      key: _key,
      appBar: Container(),
      slider: CupertinoScaffold(
        body: CupertinoPageScaffold(
          child: Container(color: CupertinoColors.systemBlue),
        ),
      ),
      child: CupertinoScaffold(
        body: Builder(builder: (context) {
          return CupertinoPageScaffold(
            navigationBar: CupertinoNavigationBar(...)
           ),
         ),
       );
     }),

The idea is the slider is the root, the child is the app that it pushes to the side.

[FrazeColder]

Can you also post the content of you appBar here please? Because when I wrap my SliderAppBar inside a Scaffold I get a render error. @InFaMoUsZero

[mprync]

Can you also post the content of you appBar here please? Because when I wrap my SliderAppBar inside a Scaffold I get a render error. @InFaMoUsZero

Is this an issue regarding #21?

return CupertinoPageScaffold(
            navigationBar: CupertinoNavigationBar(
              backgroundColor: Colors.white,
              leading: CupertinoButton(
                padding: const EdgeInsets.only(top: 6),
                child: const Icon(CupertinoIcons.line_horizontal_3),
                onPressed: () {
                  _key.currentState?.toggle();
                },
              ),
              middle: Column(
                  children: [
                    const Text(
                      "Title",
                      style: TextStyle(color: Colors.black, fontSize: 19),
                    ),
                    Text(
                      'Subtitle',
                      style: TextStyle(color: Colors.grey[600], fontSize: 12),
                    )
                  ],
            ),
   ),

I would avoid using SliderAppBar from this library, it uses IconButton which forces you to have a material root widget, which you don't have because you would have removed it as I suggested. Use a material or Cupertino appbar within the scaffold.

Your menu item will then need need to call _key.currentstate.toggle() to open the slider like in the example above.

You can use Material or Cupertino, the same result should be achieved.

[FrazeColder]

Am I doing something wrong here? @InFaMoUsZero

return SliderDrawer(
    slider: Scaffold(
      body: Container(color: Colors.red),
    ),
    appBar: Scaffold(
      appBar: AppBar(
        title: Text("E"),
      ),
    ),
    child: useSafeArea ? SafeArea(child: getContent()) : getContent(),
  );
}

Output:

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderCustomMultiChildLayoutBox object was given an infinite size during layout.
This probably means that it is a render object that tries to be as big as possible, but it was put
inside another render object that allows its children to pick their own size.
[...]
Another exception was thrown: _RenderInkFeatures object was given an infinite size during layout.

Another exception was thrown: RenderPhysicalModel object was given an infinite size during layout.

Another exception was thrown: A RenderFlex overflowed by Infinity pixels on the bottom.

Another exception was thrown: Updated layout information required for RenderConstrainedBox#c31c8 NEEDS-LAYOUT NEEDS-PAINT to calculate semantics.

Another exception was thrown: Bad state: Future already completed

[mprync]

return SliderDrawer(
slider: Scaffold(
body: Container(color: Colors.red),
),
appBar: Scaffold(
appBar: AppBar(
title: Text("E"),
),
),
child: useSafeArea ? SafeArea(child: getContent()) : getContent(),
);
}

final GlobalKey<SliderDrawerState> _key = GlobalKey<SliderDrawerState>();

....

return SliderDrawer(
    key: _key
    slider: Scaffold(
      body: Container(color: Colors.red),
    ),
    child: Scaffold(
      appBar: AppBar(
        leading: CupertinoButton(
                child: const Icon(CupertinoIcons.line_horizontal_3),
                onPressed: () {
                  _key.currentState?.toggle();
                },
              ),
        title: Text("E"),
      ),
      body: getContent()
      bottomNavigationBar: // Your navigation bottom bar
  );
}

This should do the trick. Don't use anything on SliderDrawer apart from the slider and key properties.

[FrazeColder]

This works for you?

This returns me the following:

[mprync]

This works for you?

This returns me the following:

Oh sorry, I forgot to add in.

return SliderDrawer(
    key: _key
    appBar: Container() // This is required due to the issue I posted in #21 

[FrazeColder]

FABULOSE! This now works!

It would be very cool if bug #21 and bug #23 will be fixed soon so we do not have to work with workarounds.

If you need any help @NikhilVadoliya, just hit me up.

Kind regards to you @InFaMoUsZero!

[NikhilVadoliya]

Okay @InFaMoUsZero , i will work on this issue.