Backdrop widgets that you can directly implement

[Harsh Bhikadia]

There has been requests for Backdrop widget on issue tracker which is missing in material package.

I personally felt the need for my own project and decided to open source it in a package.

As of now it is fairly simple and basic - BackdropScaffold widget.

The package is not yet stable and a lot of other cool features are to be implemented.

The roadmap is to build supporting widgets so that it is easier to implement any of the variants with custom themeing described in material design guidelines for backdrop.

Please have a look at it :-

• git repo : https://gitlab.com/daadu/backdrop
  
• pub : https://pub.dartlang.org/packages/backdrop
  
• medium post: https://medium.com/@daadu/backdrop-with-flutter-acfa9fee7d2f
  

Looking forward for contribution, feature requests, issue filing, feedback, mentions, etc.

[Dale King]

Having implemented a backdrop for my own project I am convinced that a backdrop is so complex and it requires so much customization per project that I am not sure a standard widget is even possible or practical. Your widget would not work in my case for at least these reasons around the app bar:

1. You have forced the presence of a menu button in the app bar, I don't need or want it for my app. I use an button in the AppBar actions to open the drawer
2. You are using the menu button to open the backdrop which may not be what the app requires. What If I want a menu button to open a side drawer and I have an app bar action that opens the backdrop?
3. I want the app bar title to change based on whether the backdrop is shown or not so that when it is open it is the title for the backdrop content
   
4. I want the list of app bar widgets to change when the backdrop is shown (basically hide them when the backdrop is shown)
5. When the backdrop is shown you are supposed to be able to tap the front layer and have it snap back or drag it back
   
6. When the backdrop is shown you need to make sure that taps on the part of the front layer that is visible do not make it through to the front layer (if I can see a button from the front layer clicking it should not click the button)
7. You force a material layer under the front layer, which would not work in my app

Not an issue for my app, but you provide no way to control the corner of the front layer (cannot do the the Shrine cut corner instead of rounded corner or only do one corner)

[Harsh Bhikadia]

I agree with all of your points.

I’m working to make this as general as possible (which as of now it isn’t :( ).

The target is to provides all widgets out of the box to implement what is in the design guideline (all variants and options provided) with enough flexibility.

As I said the package is under active development and this just the beginning (it’s not even 0.1.0!!) will take about a month for a more stable version.

TODO from README.md

I will try to fix everything that you have mentioned (actually I had already planned some of it).

Point 1,2,3,4 — already on the roadmap. Point 5,6 — it already does that. Point 7 — will add it to roadmap.

Thanks for the feedback. Would be happy if you can contribute!!

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Harsh Bhikadia bhikadia.com

[Harsh Bhikadia]

Hey,

I have pushed a newer version (0.1.1)

I think now the widget will be useful to you.

Following features have been added.

1. mentioning position for icon using enum BackdropIconPosition {leading, action, none}

2. BackdropToggleButton widget, which you can directly drop in action or anywhere inside the BackdropScaffold

3. frontLayerBorderRadius as an option in BackdropScaffold for custom BorderRadius (to do shrine like things)

4. helper method to perform backdrop action manually anywhere inside the BackdropScaffold -> isTopPanelVisible, isBackPanelVisible, fling, showBackPanel, showFrontPanel (eg: Backdrop.of(context).fling() )

Please have a look.

Review the code, if possible.

File issue if you find any.

Looking forward,

Harsh B.

--

Harsh Bhikadia bhikadia.com

[Harsh Bhikadia]

Look at the example code for reference.

--

Harsh Bhikadia bhikadia.com

[Harsh Bhikadia]

documentation is still not complete... so feel free to ask me.

--

Harsh Bhikadia bhikadia.com

[Will Larche]

Hi, Harsh & Dale. I'm from the Flutter team in Material Engineering.

It's so great to see people contributing and participating in Flutter and noticing the new components in Material Design this year. We are really blown away by the enthusiasm we have seen.

On backdrop, I agree with Dale that the backdrop is complex and requires a great deal of customization and therefore does not make an obvious candidate for a reusable component. That's why we call it an Advanced Component in our codelab on backdrop.

More than anything, the backdrop is a presentation flow for handling 2 different layers. The spec on the material guidelines does not represent all kinds of backdrops but rather one kind of backdrop in great detail. This is done for the benefit of designers. We expect that from an article like this, they will have enough information to use their imaginations to create backdrops that work for their products.

Also, unlike buttons, textfields, appbars, and the rest of the MDC-Flutter components, you'd only use a backdrop once in your app. So the return on the investment of using someone else's widget needs to be really high: it needs to be much more convenient than doing it yourself.

I certainly don't mean to discourage you from working on and sharing your component! Rather, I think you can use this info to make it even more successful. I would suggest publishing the version of the backdrop in the guidelines faithfully and calling it out as just the baseline example of a backdrop instead of one that can handle all the cases in the world. Or pick apart the code for the most abstracted and difficult pieces that would save someone time but not recreate the entire experience. (Like the animation code for the presentation.)