[BackdropNavigationBackLayer] Customizable InkWell border

[fluttercommunity]

[BackdropNavigationBackLayer] Customizable InkWell border

[daadu]

BackdropNavigationBackLayer in my opinion is just a simple drop in to do "navigation" with backdrop.

I recommend you simply use ListView with backLayer and build from there.

BackdropNavigationBackLayer is simply the following:

@override
  Widget build(BuildContext context) {
    return ListView.separated(
      shrinkWrap: true,
      itemCount: items.length,
      itemBuilder: (context, position) => InkWell(
        child: items[position],
        onTap: () {
          // fling backdrop
          Backdrop.of(context).fling();

          // call onTap function and pass new selected index
          onTap?.call(position);
        },
      ),
      separatorBuilder:
          separatorBuilder ?? (builder, position) => separator ?? Container(),
    );
  }

Similarly other widgets like BackdropToggleButton, BackdropSubHeader, etc in this package (except Backdrop and BackdropScaffold) are just drop in for simple use (or reference) cases.

[daadu]

Ok then.

@proninyaroslav Can you file PR for customising InkWell options in BackdropNavigationBackLayer?

[WieFel]

@proninyaroslav you are right, thanks for pointing this out!

The current implementation is ready, you can see it here proninyaroslav@f5da2da

If you want, create a pull request. But why do you add a Padding of 8.0 around BackdropNavigationBackLayer? I think we could not take this as general solution because someone might not want any padding and wouldn't be able to remove it then...

I suggest to expose not only customInkWellBorder as an attribute of BackdropNavigationBackLayer but expose all properties of the used InkWell and prefix them with "item". Like customBorder -> itemCustomBorder (please rename it like this), splashColor -> itemSplashColor, borderRadius -> itemBorderRadius etc.

I don't know whether events like onLongPress etc. should also be exposed, but I think yes. What do you think @daadu @proninyaroslav?

[proninyaroslav]

If you want, create a pull request. But why do you add a Padding of 8.0 around BackdropNavigationBackLayer?

This is a demo app, not a widget. Just to make it look better with rounded corners. I can delete it that if necessary.

I suggest to expose not only customInkWellBorder as an attribute of BackdropNavigationBackLayer but expose all properties of the used InkWell and prefix them with "item". Like customBorder -> itemCustomBorder (please rename it like this), splashColor -> itemSplashColor, borderRadius -> itemBorderRadius etc.

Yes, I think this is the best solution.

[WieFel]

Ok, so if @daadu agrees on this I will make the changes and create a pull request.

[daadu]

As far as demo is concerned, setting proper property of theme with ThemeData.splashColor would do the job

[proninyaroslav]

@daadu
You're right, but using BackdropNavigationBackLayer, we assume that we can pass any widget there with our own style. But because InkWell is the parent for these widgets, we cannot customize the style of the ink splash.
In this case:

1. It would be possible to simplify the widget by passing only text strings and icons there, not widgets, so as not to be misleading.
2. It's also possible to pass exclusively ListTile widgets, then there is no need to use InkWell, at the same time we allow to make the items fully customizable.
3. It might not make sense to expose all the properties of InkWell, but only those that have a basic purpose for customizing an ink splash. And the border is one of them.

[daadu]

Sorry for responding late @proninyaroslav.

@WieFel What are your views?

[WieFel]

1. It would be possible to simplify the widget by passing only text strings and icons there, not widgets, so as not to be misleading.

The widget still has to be customizable. Only allowing to pass text and icon would not suffice, in my opinion.

2. It's also possible to pass exclusively `ListTile` widgets, then there is no need to use `InkWell`, at the same time we allow to make the items fully customizable.

The ListView that encloses the list still has to manage the navigation's onTap and the ripple effect when tapping the list's elements. Therefore, the InkWell is needed.

3. It might not make sense to expose all the properties of `InkWell`, but only those that have a basic purpose for customizing an ink splash. And the border is one of them.

You are right. Maybe we start with exposing only properties necessary for customizing the splash effect

@daadu you are right with saying "BackdropNavigationBackLayer is just a simple drop in". Therefore we should add not too much functionality to it. But I think allowing to customize the InkWell splash can be added...

[WieFel]

@daadu @proninyaroslav I will create the pull request, as I personally need the features as well asap.

[daadu]

This feature has landed with v0.4.7 on pub.dev.