FlutterArtist DebugMenu

DebugMenu

Trong FlutterArtist, DebugMenu là một menu được xây dựng sẵn. Khi người dùng nhấn vào nó, một menu xổ xuống chứa danh sách các chức năng Debug quan trọng bao gồm:

Log Viewer
Debug Storage Viewer
Debug Shelf Structure Viewer
Debug UI Components Viewer
Debug Code Flow Viewer
Rest Debug Viewer

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 Storage Viewer (***)
FlutterArtist Log Viewer
FlutterArtist Debug Storage Viewer (***)
FlutterArtist Code Flow Viewer
FlutterArtist Rest Debug Viewer

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,
  }); 
  ...
}

Nếu bạn sử dụng 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.

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