fluttercommunity/backdrop

Backdrop implementation in flutter.

Flutter Community

A central place for community made Flutter content.

---

The Flutter Community is an organization aimed at providing a central place for community made Flutter packages and content to live.

Our goal is to ensure packages made by the Flutter community are kept alive and maintained in one place.

Medium Articles

To go along with the packages, we have started a Medium publication as a central location for community content to be published - especially if it relates to the packages here.

https://medium.com/flutter-community

Packages

These are the packages featured on the Flutter Community.

Name	Release	Description	Maintainer
android_alarm_manager_plus		Flutter plugin for accessing the Android AlarmManager service, and running Dart code in the background when alarms fire.	Miguel Beltran
android_id		Flutter plugin for retrieving the Android ID. Not supported on iOS.	Joachim Nohl
android_intent_plus		Flutter plugin for launching Android Intents. Not supported on iOS.	Miguel Beltran
app_review		Request and Write Reviews and Open Store Listing for Android and iOS in Flutter.	Rody Davis
backdrop		Backdrop implementation in dart. (https://material.io/design/components/backdrop.html)	Harsh Bhikadia
breakpoint		A Flutter plugin to calculate the material design breakpoints.	Rody Davis
sealed_unions		Sealed Unions for Dart	George Medve
firestore_helpers		Firestore helper function to create dynamic and location based queries	Thomas Burkhart
draggable_scrollbar		A scrollbar that can be dragged for quickly navigation through a vertical list. Additional option is showing label next to scrollthumb with information about current item.	Marina Kuznetsova
after_layout		Execute code after the first layout of your widget has been performed, i.e. after the first frame has been displayed.	Simon Lightfoot
flutter_blurhash		Compact representation of a placeholder for an image. Encode a blurry image under 30 caracters for instant display like used by Medium	Robert Felker
contacts_service		A Flutter plugin to retrieve and manage contacts on Android and iOS devices.	Lukas Dickie
flutter_downloader		A plugin for creating and managing download tasks. Supports iOS and Android.	Hung Duy Ha
flutter_google_places		Google places autocomplete widgets for flutter. No wrapper, use https://pub.dartlang.org/packages/google_maps_webservice	Kev Morelli
infinite_listview		ListView with items that can be scrolled infinitely in both directions.	Simon Lightfoot
flutter_launcher_icons		A package which simplifies the task of updating your Flutter app's launcher icon.	Mark O'Sullivan
flutter_sms		A Flutter plugin to Send SMS and MMS on iOS and Android. If iMessage is enabled it will send as iMessage on iOS. This plugin must be tested on a real device on iOS.	Rody Davis
sticky_headers		Flutter Sticky Headers - Lets you place headers on scrollable content that will stick to the top of the container whilst the content is scrolled.	Simon Lightfoot
flutter_uploader		A plugin for creating and managing upload tasks with optional background exection support.	Sebastian Roth
wear		A plugin that offers Flutter support for Wear OS by Google	NO MAINTAINER PROVIDED
flutter_webview_plugin		Plugin that allow Flutter to communicate with a native Webview.	Rafal Wachol
flutter_whatsnew		A new Flutter package to show updates to users.	Rody Davis
workmanager		Flutter Workmanager. This plugin allows you to schedule background work on Android and iOS.	NO MAINTAINER PROVIDED
font_awesome_flutter		The Font Awesome Icon pack available as Flutter Icons. Provides 1500 additional icons to use in your apps.	Brian Egan
get_it		Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App"	Thomas Burkhart
get_version		Get the Version Name, Version Code, Platform and OS Version, and App ID on iOS and Android.	Rody Davis
import_sorter		Automatically sort all your dart imports. Support for any dart project.	Matthew Gleich
native_widgets		A new Flutter package for using Android and iOS natively on each platform.	Rody Davis
page_turn		Page Turn Widget - Add a page turn effect to widgets in your app.	Rody Davis
persist_theme		A flutter plugin for persisting the theme data. Support for Dark Mode.	Rody Davis
redux		Redux is a predictable state container for Dart and Flutter apps	John Ryan
redux_undo		Make your redux store undo- and redoable. Inspired by the JS redux_undo package.	Michel Engelen
responsive_scaffold		On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.	Rody Davis
rx_command		Reactive event handler wrapper class inspired by ReactiveUI.	Thomas Burkhart
state_persistence		Persist state across app launches. By default this library store state as a local JSON file called data.json in the applications data directory.	Simon Lightfoot

Submitting your packages

If you'd like to submit your package to the Flutter Community GitHub organization, please see the Flutter Community Transfer Guide.

Getting in contact

For any questions regarding the Flutter Community, please open an issue on the /community repository.

Note to packages owners

Flutter Community aims to bring the best community-made packages forward. Because of this, not all proposed packages will be accepted.

backdrop's Issues

Backdrop not working

Hi there recently or a month ago i used the backdrop package which was quite interesting experience but now again i am opening and then running the same project without doing any changes to it. Now its giving me this error
canRequestFocus: isBackPanelVisible,
^^^^^^^^^^^^^^^
as shown in the screenshot i was thinking it may be with only this project lets try the backdrop in a new project but again its not running and giving me the same error can u please sir fix this bcoz i really need your this backdrop package:

Set fullscreen back layer

Hello,

I would like to set the back layer fullscreen. Currently, there is this inactive part at the bottom, and I would like to basically push back layer over whole screen. Do you think, that is possible somehow in the current version?

Thanks a lot!

Splitting widgets to different files

Is your feature request related to a problem? Please describe.
To improve maintainability and readability of the package.

Describe the solution you'd like
Split backdrop.dart -> scaffold.dart, navigation.dart, app_bar.dart, etc. In backdrop.dart only export of all public widgets and classes. This change should not break import 'package:backdrop/backdrop.dart';. Check flutter/material.dart for idea.

Proposal document for v1.0

This is the proposal document for 1.0 version of the package intended to discuss and finalise the APIs of the package.

List of Objectives

1. provide easy and quick way to implement all the use cases of backdrop component as defined in Material Design Guideline
2. implementations should assume defaults but be configurable and extendable by the user for any custom behaviour
3. code examples of various use-cases should be provided
4. proper API documentation should be added

APIs

To achieve the above-mentioned objectives following are the public classes that need to be implemented:

• 1. Backdrop extends InheritedWidget : This class exposes BackdropScaffoldState for any widget down the tree using the convenient Backdrop.of(context). The BackdropScaffoldState in itself exposes some helper methods like fling, showBackLayer, showFrontLayer, underlying Scaffold widget, AnimationController etc.

• 2. BackdropScaffold extends StatefulWidget : It is the backdrop equivalent to Scaffold widget. This is the main layout widget that implements the core behaviour of the backdrop. It should act as the entry point to implementing backdrop with the most basic use cases as default. Additional behaviours could be added to it using other widgets just like how appBar, drawer, bottomNavigationBar are added with Scaffold.

• #6 3. BackdropAppBar extends StatefulWidget: It is the backdrop equivalent to AppBar widget. This widget should provide APIs to define the behaviour of the app bar of the backdrop - icon, title, actions, etc. Various app bar uses cases mentioned in the guideline should be configured using this widget.

• 4. BackdropToggleButtonextends StatelessWidget : A convenient widget to drop in to fling the backdrop back and forth. This could be used in actions in BackdropAppBar to fling backdrop from the right side of the app bar.

• 5. BackdropNavigationBackLayer extends StatefulWidget : It is the backdrop equivalent of BottomNavigationBar. A convenient widget to implement navigation pattern with the backdrop - using backLayer to display a list of items, tapping on which would display the corresponding widget in frontLayer. BackdropNavigationItem could be used to encapsulate the widget that needs to be displayed, just like how BottomNavigationBarItem is used. However, unlike BottomNavigationBar the UI of a list of items should be configurable by the user.

Other Tasks

• API documentation of all Classes, Properties and Methods using Effective Dart: Documentation Guide.
• #26 add SubHeader to Backdrop Front Layer as specified in the MDG.
• #7 Demo app that demonstrates all use-cases of Backdrop as mentioned in the Material Design Guideline.
• #8 Proper README and additional tutorial guides (optional) to make easier for user to get started with package.
• deprecate attributes and widgets
• ci-cd tooling (preferably Github Action) to update github pages when master is updated.
• #78 automatic testing with ci-cd

Quick Links

• Milestone: v1.0
• Project: v1.0 Dev

Add Subheader option

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):

swipe body to close

Hello,
How can i close backdrop by swipe to top?

Show front layer using another widget. reveal the front layer on tap of a button.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

when App is using full screen it leaves the space at bottom for buttons

please see

After first backdrop toggle: back layer revealed on every front layer click regardless of location

Describe the bug
In a very simple setting, after having toggled backdrop for the first time (to reveal back layer), the front layer becomes non-responsive and toggles backdrop on every front layer click.

To Reproduce
Steps to reproduce the behavior:
Use this code

    MaterialApp(
      title: 'Backdrop Demo',
      home: BackdropScaffold(
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
          actions: <Widget>[
            BackdropToggleButton(
              icon: AnimatedIcons.list_view,
            )
          ],
        ),
        backLayer: Center(
          child: Text("Back Layer"),
        ),
        subHeader: BackdropSubHeader(
          title: Text("Sub Header"),
        ),
        frontLayer: Center(
          child: MaterialButton(
            child: Text("Click"),
            onPressed: () => print("Clicked!"),
          ),
        ),
      ),
    );

1. Click anywhere on front layer (nothing should happen)
2. Toggle backdrop to reveal back layer
3. Toggle backdrop to conceal back layer
4. Click anywhere on front layer (back layer is revealed)
5. Toggle backdrop again to conceal back layer
6. Try to click on front layer button (button cannot be clicked, and backdrop is toggled instead)

Expected behavior
Backdrop should not be toggled from front layer if it is revealed.

Screenshots
Should be clear enough as is.

Focus in keyboard

When you are using a front layer that contains one TextField, if you are typing something on it and then it pressed the leading or action bottom in the backdrop appbar, the keyboard remains open instead of lost the focus.
(I cannot wrap

I guess this can be solved adding FocusScope.of(context).unfocus() in the places where fling is called.

(This is the first time in my life that I created some bug report), so please forgive me if I did something wrong.

Proper readme and tutorial documentations

Refer: #5

Inactive layer color should not be hardcoded

You are setting the color of the inactive layer to Colors.grey.shade200.withOpacity(0.7). This means the fade only works properly with a white front layer and this causes a very eye-hurting flash when used with a dark theme. Instead, not only should you only change the opacity of the front layer instead of altering the hue, you should be interpolating the value instead of instantly changing the color.

See the example in the Flutter Gallery app: https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/gallery/backdrop.dart#L213

BackdropAppBar

Refer: #5

color BackdropToggleButton

how can i change color of BackdropToggleButton?

[bug] header Height not updated once built

if i change the height of Header by BLOC and set it dynamic the header Height nothing
changed.

Cannot set inactiveOverlayColor to transparent

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.

Close back layer programatically [need to document it]

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.

Use non-animated Icons with BackdropToggleButton

Request
I'd like to use icons without being limited to those with current AnimatedIconData implementations; AnimatedIconData is an abstract class which must be extended to provide drawable path data which seems like overkill.

What I've tried
I tried not using BackdropToggleButton at all and just using my own button:

IconButton(
  icon: Icon(Icons.filter_list),
  onPressed: () => Backdrop.of(context).fling()
)

This results in an error (to be honest, I'm not quite sure why):

════════ Exception caught by gesture ═══════════════════════════════════════════════════════════════
The following NoSuchMethodError was thrown while handling a gesture:
The getter 'data' was called on null.
Receiver: null
Tried calling: data

When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
#1      Backdrop.of (package:backdrop/scaffold.dart:25:62)

What I'd like
A constructor such as BackdropToggleButton({frontIcon, backIcon}).

My apologies if I'm just doing something wrong here.

[demo] use gallerize package for the implementation

Back panel color transition

Is your feature request related to a problem? Please describe.
I can't make the back screen be the way I like, I thought on wrapping everything in a container but it also changed the color when it is behind the front panel.

Describe the solution you'd like
I think a parameter for the transition duration and another 2 for the initial color and the final color would solve it.

Describe alternatives you've considered
As I said when you wrap the widget with a container and add a color to it, it also affects the view when the front panel is on top

[bug] size change callback from `_MeasureSize` not working with `AnimatedSize`

To Reproduce

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  String text = "Back Layer 1";
  double height = 100;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Backdrop Example",
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BackdropScaffold(
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
          actions: <Widget>[
            LayoutBuilder(
              builder: (context, constraints) => IconButton(
                icon: Icon(Icons.terrain),
                onPressed: () {
                  setState(() {
                    height = 200;
                    text = "Back Layer 2";
                  });
                },
              ),
            ),
          ],
        ),
        stickyFrontLayer: true,
        backLayer: AnimatedSize(
          vsync: this,
          duration: Duration(milliseconds: 200),
          child: Container(
            height: height,
            child: Center(child: Text(text)),
          ),
        ),
        frontLayer: Center(
          child: Text("Front Layer"),
        ),
      ),
    );
  }
}

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Additional context
Reported by: @proninyaroslav

Menu button registers every click

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Upgrade to latest flutter
2. Click anywhere
3. Menu opens after every click anywhere
4. Be sad

Expected behavior
Whatever is in the container.

Screenshots
https://i.imgur.com/eGnDTjW.gif
Desktop (please complete the following information):

• OS: Windows
• Browser Firefox
• Version 10

Smartphone (please complete the following information):

• Device: Anroid Pixel 3a
• OS: Android 9
• Browser default
• Version 29

Additional context
Would appreciate if this could be fixed.

Problem with backlayer when keyboard is open

Hey, I like what you did there! But when the keyobard is opened, the backlayer will move to the bottom instead of staying right under the appbar. You can open and close it like normal but it will be in the wrong location.

Spin-off "demo" app components as separate package.

Time to spin-off the components of demo app that could be reused by other package maintainer to build similar "demo" app.

Here are some pointers/questions about it:

• What should we call it? - demo_maker, demoize, gallerize, or something else (suggest in comment)
• @WieFel I suggest you be the primary maintainer of the project and repo.
• Some feature still needs to be implemented to make it like gallery app - having toggle for fullscreen/mobile view. Although this is non-blocking, could be implemented in future.
• The proposed package should also be submitted to fluttercommunity org.
• backdrop - should use the planned package for it's demo app.

This issue will only be open until separate repo for it is created.

rename inactiveOverlayColor to scrimColor

• scrimColor is appropriate term as defined in MDG for Backdrop and it is also used for other material components like - Drawer, Scaffold, etc.
• make it in a backward compatible way - with deprecation warning, actually deprecating it in v1.0.0

Proposal Document for web&desktop

This proposal is to add support for full screen flutter hosts like web and desktop . It is open for discussion and feedback. Let us know your ideas in comments.

List of Objectives

1. re-use "backdrop core" with different layouts/form other than Scaffold
2. adapt backdrop to larger screen sizes by making it responsive as defined in MDG
3. proper physical keyboard and mouse input support
4. add support for keyboard shortcuts
5. proper tutorial guide for usage with full screen hosts

TODO

• #111 Abstract out "backdrop core" from BackdropScaffold
• #75 Backdrop with "horizontal layout"
• #17 Backdrop with BackdropNavigationRail

TODO: add more TODO tasks once all objectives are clear and finalised

Quick Links

• Milestone: web&desktop
• Project: web&desktop Dev

Manipulating animation duration doesn't affect animation

Setting the backdrop animation duration to another value doesn't affect the animation.

When I change the code within backdrop.dart to:

 _controller = AnimationController(
          vsync: this, duration: Duration(milliseconds: 1000), value: 1.0);

The animation keeps having the same duration of 100ms.

Backdrop with NavigationRail

Is your feature request related to a problem? Please describe.
Material Design Guideline have come up with a new component called NavigationRail which have explained its behaviour with backdrop (Check Backdrop section in the Guideline).

Describe the solution you'd like
The NavigationRail should rest on backLayer when backdrop is active (backLayer is visible) as shown in the picture in guideline

---

Refer: #34

Error: The Ticker must be disposed before flutter: calling super.dispose

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

Bug when we abruptly close the back layer

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Create a Backdrop Scaffold with app bar and all
2. in back layer add a couple of list tile , one of them just opens up a webview or redirects you to playstore ,or something like that,
3. In front layer add a list view with elements such that occupy atleast double the screen
4. open backlayer through Icon Button in actions, instead of closing the backlayer by tapping that icon button close it by pressing back key , the listview wouldnt scroll .
5. also reproduceble when you open one of the listtile in back layer and then come back to app

Expected behavior
List View should be working

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: Pixel 3 ,redmi note 7 pro
  -OS android

Horizontal layout

I would like to see a horizontal layout, wherein the backLayer can be positioned on either the left or right side of the screen. Upon revealing the backLayer, the frontLayer would slide to the side. This would allow me to use the same code for both wide and narrow layouts, rather than trying to switch controls. I'm looking into NavigationRail as a possible solution for my wide layouts, but this isn't ideal.

Proper demo app with multiple use-cases

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.

make _BackdropScaffoldState public and document it

• make _BackdropScaffoldState public
• members to be documented
  • AnimationController get controller
  • bool get isBackLayerConcealed
  • bool get isBackLayerRevealed
  • void fling()
  • void revealBackLayer()
  • void concealBackLayer()

fontLayer background Color

i use this code

frontLayer: Container(
   decoration: BoxDecoration(
                color: Colors.red
)

or

frontLayer: Containe(
    color:Colors.red
)

but,the container color didn't change. is there any wrong with my code?

ExpansionTile messes up _currentIndex calculations

Describe the bug
I'm trying to convert my old AppBar implementation to the Backdrop implementation. My menu has ExpansionTiles and ListTiles. Backdrop doesn't recognize the ListTiles inside my ExpansionTiles, and instead uses the ExpansionTile for the _currentIndex. This breaks navigation. To work around this, I set the _currentIndex manually, but the frontLayer doesn't become active after tapping a navigation item.

To Reproduce
Steps to reproduce the behavior:

backLayer: BackdropNavigationBackLayer(
  items: [
    Container(
      child: new ExpansionTile(
          title: Text("A"),
          children: <Widget>[
            ListTile(
              title: Text("1"),
              onTap: () {
                setState(() => _currentIndex = 0);
              },
            ),
            ListTile(
                title: Text("2"),
                onTap: () {
                  setState(() {
                    _currentIndex = 1;
                  });
                }),
            ListTile(
                title: Text("3"),
                onTap: () {
                  setState(() {
                    _currentIndex = 2;
                  });
                }),
          ]),
    ),
    ListTile(
        title: Text("B"),
        onTap: () {
          setState(() {
            _currentIndex = 5;
          });
        }),
    ListTile(
        title: Text("C"),
        onTap: () {
          setState(() {
            _currentIndex = 6;
          });
        }),
  ],
  onTap: (int position) => {setState(() => _currentIndex = position)},

Expected behavior
I manually set the _currentIndex, and the frontLayer changes widgets, but does not toggle to active. I expect it to toggle back to an active state.

Screenshots

Smartphone (please complete the following information):

• Device: Pixel 3
• OS: Android 10
• Browser n/a
• Version n/a

Disable splash animation on AnimatedIcon

Hi,

is there a way to disable the splash animation on the AnimatedIcon?

allow variable height front pages

Is your feature request related to a problem? Please describe.

My first front page is a large form. It displays well.

My second front page is mostly empty:

I'd like to provide a target height for this page, so it expands to a more appropriate size for its content.

Describe the solution you'd like

I can get my desired behavior by adjusting the top param of the end rectangle in _getPanelAnimation.

Could we expose a variable for this?

Describe alternatives you've considered

I haven't explored how this will interact with the other BackdropScaffold constructor args.

Maybe PreferredSizeWidget is a useful way to convey the behavior?

Additional context

The Material spec doesn't address whether front pages should have a consistent height.

change direction from top to bottom

in this library that doesn't implemented and i would like to change direction from top to bottom instead of bottom to top. that means open and close panel from top to bottom

[CI/CD] for demo deployment is failing

Failed Runs

• https://github.com/fluttercommunity/backdrop/actions/runs/591532419 for v0.5.0 tag
• https://github.com/fluttercommunity/backdrop/actions/runs/591545316 for v0.5.1 tag

Show backLayer first

Is your feature request related to a problem? Please describe.
I'm trying to reveal backLayer first, without use it as frontLayer, in order to mantain frontLayer controllers (eg. like in spotify, where frontLayer is music bottomBar, which on click goes to music controls, that we use in frontLayer

Describe the solution you'd like
I'd like a solution as "toggleFirst: true/false"

Reverse curve for expanding/shrinking BackdropScaffold

Is your feature request related to a problem? Please describe.
I want to set different animation curves for expanding/shrinking the scaffold.
I tried to set the animation curve to ease, and while expanding worked fine, shrinking looked weird because ease animation is asymmetric. Similar issue below:
flutter/flutter#39086

Describe the solution you'd like
As shown in the issue above, I want to set reverseCurve property of CurvedAnimation here:

backdrop/lib/scaffold.dart

Line 459 in 01f118e

).animate(CurvedAnimation(

And maybe the animation curve should default to ease instead of easeInOut...? Because that's the recommended curve in MD specs.
https://material.io/design/motion/speed.html#easing

BackdropNavigationBackLayer: directly expose separatorBuilder instead of separator

Is your feature request related to a problem? Please describe.
Not directly related to a problem.

Describe the solution you'd like
I need to have a navigation back layer that enables to customize separators for certain indices. Thus, instead of a property separator, the BackdropNavigationBackLayer could directly expose separatorBuilder to make indices customizable.

Describe alternatives you've considered
Passing a custom separator as a "normal" list element, but doesn't have the desired result.

[bug?] Revealed back layout in post frame callback is not concealed

Hi. I was trying to simulate the automatic revealing of the back layer right after the widget tree was created. For this, I placed a BackdropScaffoldState::revealBackLayer() call in WidgetsBinding.instance.addPostFrameCallback(). It works, but there is a side effect: when I tap the "Close" button to conceal the back layer, it doesn't concealed, it just doesn't respond when clicked. I gave an example here to make it easier to understand what it is about.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Backdrop Example',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: BackdropScaffold(
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
        ),
        backLayer: BackLayer(
          text: "Back Layer",
        ),
        frontLayer: Center(
          child: Text("Front Layer"),
        ),
      ),
    );
  }
}

class BackLayer extends StatelessWidget {
  final String text;

  BackLayer({Key key, this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Backdrop.of(context).revealBackLayer();
    });

    return Container(
      child: Center(child: Text(text)),
    );
  }
}

[Enhancement] Front layer title

Hello.
I'm not sure if it would be nice to add an optional feature where you can set the title (with basic configuration) of the front layer according to the text provided on the Backdrop navigation layer item?

Only expand as much as needed to reveal the back layer

Currently the back layer expands fully; it should only expand as much as needed to fully show its contents.

[BackdropNavigationBackLayer] Customizable InkWell border

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 proninyaroslav@f5da2da

For example, 4.0 border radius:

problem in scrolling front layer on change of grid delegate

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

[bug] `backLayer` without expand constraint child messes the layout

To Reproduce

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Backdrop Demo',
      home: BackdropScaffold(
        appBar: BackdropAppBar(
          title: Text("Backdrop Example"),
          actions: <Widget>[
            BackdropToggleButton(
              icon: AnimatedIcons.list_view,
            )
          ],
        ),
        backLayer: Text("Back Layer"),
        subHeader: BackdropSubHeader(
          title: Text("Sub Header"),
        ),
        frontLayer: Text("Front Layer"),
      ),
    );
  }
}

Expected behavior
backLayer should always expand.

Screenshots

Automatic testing with CI/CD

Demo site of the package hosted as Github Pages

Is your feature request related to a problem? Please describe.
Could be used to quickly see what the package can do and interact with it.

Describe the solution you'd like
build example for flutter web and host it as Github pages.