# lib_dev_menu

[![Powered by Mason](https://img.shields.io/endpoint?url=https%3A%2F%2Ftinyurl.com%2Fmason-badge)](https://github.com/felangel/mason)

Dev menu brick is a useful when it comes to debugging your app and/or easily accessing some common development specific information and settings. You can define secret inputs which after being triggered a defined number of times will execute a callback. From that callback you can define any app-specific behaviors like navigating to a screen, displaying a dev modal sheet with additional data or your own behaviors.

## Widgets

Within the `dev_menu` brick you can find the `AppDevMenuGestureDetector` widget and the `showAppDevMenuBottomSheet` function which will .

### AppDevMenuGestureDetector

The `AppDevMenuGestureDetector` widget is a widget that is listening for user interactions (quick taps) and as a result executes a callback (`onDevMenuPresented`) once a certain amount of interactions has been made.

The widget is dependent on the `DevMenuBloc` which is an essential part of the system. The `DevMenuBloc` contains the necessary logic for registering and emitting stream events after a specific number of taps has been made. By default that number is 5 taps, but a custom number can be specified (by setting the `maxTaps` value when instantiating the bloc). The `DevMenuDependencies.from` factory can be used to define all necessary dependencies which can be accessed from the `providers` field.

The `AppDevMenuGestureDetector` widget comes with a static method called `AppDevMenuGestureDetector.withDependencies` which allows you to easily and on-the-go define a widget with the necessary dependencies. It will instantiate and properly nest a child widget within a MultiProvider for you. The hitbox of the `child` widget will be used to trigger any interactions within the bloc.

As a good use case, you can wrap your page widget with this widget so you are able to access the functionality while on the same page. By default whole app is wrapped so you are able to access DevMenu from any page.

```dart
  AppDevMenuGestureDetector.withDependencies(
    context,
    navKey!,
    child: materialApp,
      onDevMenuPresented: () {
      showAppDevMenuBottomSheet(
        context.read<AppRouter>().rootNavigatorKey.currentContext!,
      );
    },
  );

```

### `showAppDevMenuBottomSheet`

The `showAppDevMenuBottomSheet` function is a convenience function for displaying a DevMenu modal sheet with some pre-configured options. It requires a `builder` function which takes a `BuildContext` and returns a `Widget` which will be displayed within the modal sheet.

It works great when incorporated with the `AppDevMenuGestureDetector` widget within the `onDevMenuPresented` callback.

As part of the dev menu modal sheet, there is a customizable `options` parameter which requires a `DevMenuConfig` class. That config class allows you to customize different aspects and features of the dev menu and as well turn on/off some options.

By default after you trigger  `onDevMenuPresented` callback you only need to add your proxy ip and restart app so you are all set to use Charles.
Alice is working right out of the box.

`Note:` To disable dev menu you only need to edit run configuration (Development or Staging) and remove `--dart-define="ENABLE_DEV_MENU=true"` from additional run arguments.
This can be useful to limit the execution of the development/debug related code only while in debug mode and prevent any code running in release mode or under any specified conditions.

A new brick created with the Mason CLI.

_Generated by [mason][1] 🧱_

## Getting Started 🚀

This is a starting point for a new brick.
A few resources to get you started if this is your first brick template:

- [Official Mason Documentation][2]
- [Code generation with Mason Blog][3]
- [Very Good Livestream: Felix Angelov Demos Mason][4]

[1]: https://github.com/felangel/mason
[2]: https://github.com/felangel/mason/tree/master/packages/mason_cli#readme
[3]: https://verygood.ventures/blog/code-generation-with-mason
[4]: https://youtu.be/G4PTjA6tpTU
