Add Bindings to BottomSheets & Dialogs soon? Like Get.bottomSheet(binding: Binding());

[oliverbytes]

I use a lot of bottom sheets in my app to keep the UX reachable using one hand. so I wish there's the same function of a Page to a BottomSheet where you can bind controllers.

[Spiritfaer]

@nemoryoliver Hi, I fully agree with this idea. Could you help me with that, how do you currently link controllers to the bottom sheet?

[oliverbytes]

currently just using Get.put()

[kuyucuburak]

Guys I created a structure to be able to use bindings for bottom sheets, dialogs, custom views etc. Let me explain my structure, it can be useful for others:

Implementation

1. I have an alias:

typedef BindingCreator<S extends Bindings> = S Function();

2. I have an abstract class that requires a binding creator in the constructor.
   • GetView is a class of GetX that is explained in https://github.com/jonataslaw/getx#getview
   • This class is responsible for calling the dependencies method of the binding class in the right place.

abstract class BaseCustomWidget<Binding extends Bindings, Controller> extends GetView<Controller> {
  final BindingCreator<Binding>? bindingCreator;

  BaseCustomWidget({required this.bindingCreator});

  Widget view();

  @nonVirtual
  Widget build(BuildContext context) {
    _createBinding();
    return body();
  }

  void _createBinding() {
    Binding? binding = bindingCreator?.call();
    binding?.dependencies();
  }
}

Usage

Let's say I have a custom widget that extends BaseCustomWidget as below:

class CustomTextWidget extends BaseCustomWidget<CustomTextBinding, CustomTextController> {
  CustomTextWidget({required BindingCreator<CustomTextBinding>? bindingCreator}) : super(bindingCreator: bindingCreator);

  Widget view() {
        return ....;
  }
}

For example, I use this as below:

Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        children: [
          CustomTextWidget(bindingCreator: () => CustomTextBinding()),
        ],
      ),
    );

You can create bottom sheets or dialogs and extend BaseCustomWidget to apply this system. Let's say you have a bottom sheet named MyBottomSheet extends BaseCustomWidget. You just need to call that like:

Get.bottomSheet(
      MyBottomSheet(bindingCreator: () => MyBottomSheetBinding()),
      isScrollControlled: true,
      backgroundColor: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(degree),
          topRight: Radius.circular(degree),
        ),
      ),
    );

[saranyalekshmanan]

I have tried this. it is working fine for me. After edited the code please do Hot Restart the app. Then only it will work.

 Get.bottomSheet(
      GetBuilder<RatingController>(
        init: RatingController(),
        initState: (_) {},
        builder: (RatingController controller) {
          return FeedbackSheet(
            
          );
        },
      ),
      enterBottomSheetDuration: 300.milliseconds,
      exitBottomSheetDuration: 300.milliseconds,
      backgroundColor: Colors.white,
      elevation: 1,
      ignoreSafeArea: false,
      isScrollControlled: true,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(20.r), topRight: Radius.circular(20.r))),
    );