FlutterArtist DebugMenu

DebugMenu

In FlutterArtist, the DebugMenu is a built-in menu. When the user clicks on it, a dropdown menu appears containing a list of important debugging functions, including:

Log Viewer
Debug App Inspector
Debug Shelf Structure Inspector
Debug UI Context Inspector
Debug Code Flow Inspector
Debug Network Inspector

On the FlutterArtist Demo, you can see the DebugMenu located at the top right of the screen.

This article guides you on how to add the DebugMenu to your application and how to customize it.

FlutterArtist Debug App Inspector
FlutterArtist Debug Log Viewer
FlutterArtist Debug App Inspector
FlutterArtist Code Flow Inspector
FlutterArtist Debug Network Inspector

1. DebugMenu

DebugMenu is a built-in class in the flutter_artist library that allows you to create a button. When the user clicks this button, a dropdown menu will appear containing various standard FlutterArtist debugging functions.

DebugMenu

class. DebugMenu extends StatefulWidget {
  final double menuItemIconSize;
  final Color? menuItemIconColor;
  final Widget Function({required LogSummary logSummary}) menuButtonBuilder;
  final RelativeRect Function(TapDownDetails details)? calculatePopupPosition;

  const DebugMenu.custom({
    super.key,
    required this.menuButtonBuilder,
    required this.menuItemIconSize,
    required this.menuItemIconColor,
    this.calculatePopupPosition,
  }); 
  ...
}

If you are using flutter_artist_face:

flutter_artist_face is a library for creating page interfaces. The page layout is divided into two parts: the left side is a vertical main menu of the application (on a widescreen display it may appear as a Drawer, on a smallscreen it is hidden or appears as a thin vertical bar). FlutterArtist Demo uses flutter_artist_face to build each page.

If you use flutter_artist_face for your application, adding a DebugMenu to the top right corner of each page is quite simple. Here is the complete code to achieve that:

DebugMenu.custom(
  menuItemIconSize: 18,
  menuItemIconColor: null,
  menuButtonBuilder: ({required LogSummary logSummary}) {
    return TopMenuItemButton(
      icon: Image.asset(
        AssetIcons.debug,
        scale: 3,
        color: topMenuItemBtnColor,
      ),
      notificationValue: logSummary.totalLogCount == 0
          ? null
          : logSummary.totalLogCount,
      notificationBgColor: logSummary.hasRecentLogEntries
          ? Colors.red
          : Colors.black87,
      onTap: () {},
    );
  },
),

No ADS

Note: TopMenuItemButton is a built-in class in flutter_artist_face for creating a Button. You do not need to handle what happens when the user presses this Button, as it is already handled automatically by the DebugMenu.

FlutterArtist Face

If you are not using flutter_artist_face.

If you are not using flutter_artist_face for your page layout, to add a DebugMenu to the page, you need to create a class similar to the TopMenuItemButton above:

MyTopMenuItemButton

class MyTopMenuItemButton extends StatelessWidget {
  final Widget icon;
  final int? notificationValue;
  final Color notificationBgColor;
  final Color notificationColor;
  final Function() onTap;

  const MyTopMenuItemButton({
    super.key,
    required this.icon,
    this.notificationValue,
    this.notificationBgColor = Colors.red,
    this.notificationColor = Colors.white,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        InkWell(
          onTap: onTap,
          child: Row(
            children: [
              Container(
                height: 35,
                width: 35,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey.shade400),
                  shape: BoxShape.circle,
                ),
                child: icon,
              ),
              const SizedBox(width: Dimensions.paddingSizeExtraSmall),
            ],
          ),
        ),
        if (notificationValue != null && notificationValue! > 0)
          Positioned(right: 3, bottom: -3, child: _buildNotificationValue()),
      ],
    );
  }

  Widget _buildNotificationValue() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 3, vertical: 0),
      decoration: BoxDecoration(
        color: notificationBgColor,
        border: Border.all(color: Colors.pink),
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        notificationValue.toString(),
        style: TextStyle(fontSize: 10, color: notificationColor),
      ),
    );
  }
}

Then, add the DebugMenu to a specific location on your page:

DebugMenu.custom

DebugMenu.custom(
  menuItemIconSize: 18,
  menuItemIconColor: null,
  menuButtonBuilder: ({required LogSummary logSummary}) {
    return MyTopMenuItemButton(
      icon: Image.asset(
        AssetIcons.debug,
        scale: 3,
        color: topMenuItemBtnColor,
      ),
      notificationValue: logSummary.totalLogCount == 0
          ? null
          : logSummary.totalLogCount,
      notificationBgColor: logSummary.hasRecentLogEntries
          ? Colors.red
          : Colors.black87,
      onTap: () {},
    );
  },
),

No ADS

FlutterArtist DebugMenu

1. DebugMenu

FlutterArtist

FlutterArtist

Newest Articles