It would be great, if you could close or toggle between front and back layers programatically without using BackdropToggleButton. I did not find a way, how to do it.

For example - I am using some filters in this widget and when user select filter, I would like to close back layer automatically, without user need to click on toggle button in the appbar's actions.

If you have any idea, how to implement this with existing code, please let me know.

Thanks for your time and suggestions.

The inactiveOverLayColor set to Colors.transparent does not work

My layout

BackdropScaffold(
      appBar: BackdropAppBar(
        backgroundColor: Colors.deepOrange,
        title: Text('Food Delivery App'),
      ),
      backLayer:  Container(
        height: 200.0,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 16,top: 16),
              child: Text('Theme',style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
            ),
        SwitchListTile(
          activeColor: Colors.orange,
        inactiveThumbColor: Colors.black,
        title: Text('$themeText',style: TextStyle(color: Colors.white,fontWeight: FontWeight.w400)),
        value: _lights,
        onChanged: (bool value) { setState(() {
          _lights = value;
          themeText = value? 'Light':'Dark';
        }); },
        secondary: const Icon(Icons.lightbulb_outline,color: Colors.white,),
      ),
          ],
        ),
      ),
      frontLayer: Center(
        child: SafeArea(
          child: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(colors: [
                  Colors.orange,
                  Colors.deepOrange.withOpacity(0.9),
                  Colors.deepOrange,
                ], begin: Alignment.bottomCenter, end: Alignment.topCenter)),
            child: ListView(
              padding: EdgeInsets.symmetric(horizontal: 8.0),
              children: [
                SizedBox(height: 10),
                TopInfo(),
                FoodCategory(),
                SizedBox(height: 10),
                SearchField(),
                SizedBox(height: 10),
                MiddleLayout(),
                Column(
                  children: foods.map((FoodData food) {
                    return getFoodItems(food);
                  }).toList(),
                ),

              ],
            ),
          ),

        ),
      ),
      stickyFrontLayer: true,
      resizeToAvoidBottomInset: false,
      backLayerBackgroundColor: Colors.deepOrange,
      animationCurve: Curves.easeIn,
      inactiveOverlayColor: Colors.transparent,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('pressed');
        },
        child: Icon(
          Icons.category,
          color: Colors.black45,
        ),
        backgroundColor: Colors.orangeAccent,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

    );

I have also tried to set a color withAlpa(0) that is not working as well Also there is no option to add a bottomnav or a bottomappbar in BackdropScaffold like the regular scaffold.

I think it would be a good idea to make it possible to add a header for the FrontLayer while it is not visible

According to the Material Design guidelines it should also be part of a backdrop

It should look like this (at the bottom):

i want to change the grid delegate in sliver grid on the click of a button from back layer . Grid delegate does change but custom scrollview does not work on the changed grid delegate

Is your feature request related to a problem? Please describe. All BackdropNavigationBackLayer elements are wrapped in InkWell to make them clickable, but this creates a problem: it's impossible to customize the ink splash border, for example, set the border radius. A naive solution is to use ListTile as a list item, but in this case InkWell is the parent of ListTile and implicitly overrides the ink splash, ignoring the ListTile.shape style.

Describe the solution you'd like Just make the ability to pass ShapeBorder object in the BackdropNavigationBackLayer constructor to set it to InkWell.customBorder property when creating the list.

Additional context The current implementation is ready, you can see it here https://github.com/proninyaroslav/backdrop/commit/f5da2da8f4ab538f181ba291e36395c1142b81aa

For example, 4.0 border radius:

I find it very useful to know when the front layer expands or collapses. It might come in handy if you want to change or do smt reactively. In my case, I needed to change toolbar title when state of frontLayer changes, so I added this feature.

This will be a separate Flutter Project within this project (like: example) named demo. This app would be a like gallery app (https://gallery.flutter.dev) provided by Flutter to demonstrate all material and cupertino widget with code snippet embedded in itself.

Check the following screenshot from gallery app for Banner widget:

| mobile | desktop [mobile view] | destop [full view] | |--------|---------|---------| | | ||

Along with the demo itself it shows other options - info, code (with copy option), documentation, full screen (toggle the widget demo for mobile screen and full screen)

We should build similar demo flutter application that will be hosted on Github Pages for user to quickly check [#12]. It should demonstrate ideally all use cases of Backdrop as mentioned in MDG.

The example would just show simplest of the use-case. But in the starting of example.dart we should add link to demo so that users form pub.dev can check the demo easily.

Describe the bug I get the following error:

flutter: The following assertion was thrown while finalizing the widget tree:
flutter: BackdropScaffoldState#ba6f2(ticker active) was disposed with an active Ticker.
flutter: BackdropScaffoldState created a Ticker via its SingleTickerProviderStateMixin, but at the time
flutter: dispose() was called on the mixin, that Ticker was still active. The Ticker must be disposed before
flutter: calling super.dispose().
flutter: Tickers used by AnimationControllers should be disposed by calling dispose() on the
flutter: AnimationController itself. Otherwise, the ticker will leak.
flutter: The offending ticker was:
flutter:   Ticker(created by BackdropScaffoldState#ba6f2(lifecycle state: created))
flutter:   The stack trace when the Ticker was actually created was:
flutter:   #0      new Ticker.<anonymous closure> (package:flutter/src/scheduler/ticker.dart:67:40)
flutter:   #1      new Ticker (package:flutter/src/scheduler/ticker.dart:69:6)
flutter:   #2      SingleTickerProviderStateMixin.createTicker
flutter:   (package:flutter/src/widgets/ticker_provider.dart:129:15)
flutter:   #3      new AnimationController (package:flutter/src/animation/animation_controller.dart:247:21)
flutter:   #4      BackdropScaffoldState.initState (package:backdrop/scaffold.dart:397:9)

When I follow the stacktrace, I get to this point in BackdropScaffoldState

@override
  void dispose() {
    super.dispose();
    if (_shouldDisposeAnimationController) _animationController.dispose();
  }

If I change that to :

@override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

everything works again.

I now ask myself why _shouldDisposeAnimationController is false if an AnimationController exists? Also I found this in BackdropScaffoldState's initState

if (widget.animationController == null && widget.controller == null) {
      _shouldDisposeAnimationController = true;
    }

Since _shouldDisposeAnimationController otherwise defaults to false, _animationController.dispose() is not called every time.
I think it could just be changed to:

@override
  void dispose() {
    if(_animationController != null) _animationController.dispose();
    super.dispose();
  }

Smartphone

• Device: iPhone 12
• OS: IOS 14.4

Makes the InkWell in BackdropNavigationBackLayer customizable:

• itemPadding: set padding for list items.
• itemCustomBorder: set custom border for items.
• itemSplashColor: set custom splash color.

Closes #59.

Included a scaffoldkey incase one needs to access let's say a snackbar or the bottomsheet of the backdrop scaffold to avoid creating multiple scaffolds :)

It would be nice to be able to change the shape of the front layer. I have a design with beveled corners like in Shrine Material theme, but now there is no way to change shape.

Describe the bug I have an implementation where the backdrop is revealed, and takes up half the screen. I am unable to paste (by long holding and waiting for the paste popup). It does popup like normal, but clicking on the paste button does not preform the past task. Sometimes it seems like it clicks behind the paste button.

Possible Cause So what I think is happening is that by pushing down the front layer the guesture detection for the paste popup gets pushed down too. This hypothesis is bolstered by the fact that I can reveal the backlayer by 1 pixel and still successfully click the paste button.

To Reproduce Steps to reproduce the behavior: Maybe this could be reproduced in other projects, I hope its not an artifact of the specific way I've implemented the Backdrop.

Screenshots works fine when I disable the backdrop reveal paste button just disappears on click when backdrop revealed

Smartphone (please complete the following information):

• Device: pixel 3
• OS: android
• Browser emulator

Additional context My particular implementation shouldn't cause this but if it matters, you'll see I instantiate the backdrop once and it remains persistent as the user navigates through the app (child being the page widget they are on)

...
class RavenMobileApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [components.navigator],
      initialRoute: '/',
      routes: ...
      ...
      builder: (context, child) {
        components.navigator.scaffoldContext = context;
        return BackdropScaffold(
          ...
          appBar: BackdropAppBar(...),
          backLayer: BackLayer(),
          frontLayer: Container(
            color: Colors.white,
            child: child!,        //  <--- front page navigation
          ),
        );
      },
    );
  }
...

Is your feature request related to a problem? Please describe. I have a situation where I want to show some of the back layer, while allowing the user to interact with the front.

like this:

but of course I also want to retain the default behavior for other situations: like when I'm showing navigation options.

Describe the solution you'd like So I'd like to be able to call a sister function to .revealBackLayer(); or even something like this .revealBackLayer(activeFront: true);

What I'm looking for How would you go about implementing this? I'd be happy to implement it if you guys are busy, because I want this feature now. But I'd like some pointers or hints as I don't know the code base well. What steps would you go through to implement this?

Is your feature request related to a problem? Please describe. I want my front layer to cast a shadow on the app bar, and the back layer.

Describe the solution you'd like

BackdropScaffold(
  // EXISTING:
  frontLayerElevation: 1,    
  frontLayerBorderRadius: const BorderRadius.only(
    topLeft: Radius.circular(8), 
    topRight: Radius.circular(8),),
  ...

  // DESIRED:
  frontLayerBoxShadow: [
    BoxShadow(
      color: Colors.black,
      offset: Offset(0, 1),
      blurRadius: 5),],
)

Describe alternatives you've considered I attempted a bunch of stuff like this:

frontLayer: Stack(children: [
            Container(
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        topRight: Radius.circular(8.0),
                        topLeft: Radius.circular(8.0)),
                    color: Colors.transparent,
                    boxShadow: [
                  BoxShadow(
                      //color: const Color(0x33000000),
                      color: Colors.black,
                      offset: Offset(0, 1),
                      blurRadius: 5),
                ])
                ),
            child!,
          ]),

However, the shadow was always "inside" the frontLayer, not outside it.

Something like BackdropController or BackdropLayout or just Backdrop - that has all the backdrop logic/animation in it. This will make the functionality re-usable with other non-scaffold like scenario - like NavigationRails #17, with Horizontal layout #75 etc. This issue could be pre-requisite for it.

This will also increase the usability of the package in-general.

This is in-line with what @willlarche suggested when I posted about the package in flutter-dev group (wayback!).