Fix position and width of "error count" badge in Network in app bar (#9470)

diff --git a/packages/devtools_app/lib/src/framework/scaffold/app_bar.dart b/packages/devtools_app/lib/src/framework/scaffold/app_bar.dart
index 8c28027..55ba391 100644
--- a/packages/devtools_app/lib/src/framework/scaffold/app_bar.dart
+++ b/packages/devtools_app/lib/src/framework/scaffold/app_bar.dart

@@ -28,17 +28,12 @@
 
   @override
   Widget build(BuildContext context) {
-    final textTheme = Theme.of(context).textTheme;
     Widget? flexibleSpace;
     TabBar tabBar;
 
     List<Screen> visibleScreens = screens;
     bool tabsOverflow({bool includeOverflowButtonWidth = false}) {
-      return _scaffoldHeaderWidth(
-                screens: visibleScreens,
-                actions: actions,
-                textTheme: textTheme,
-              ) +
+      return _scaffoldHeaderWidth(screens: visibleScreens, actions: actions) +
               (includeOverflowButtonWidth ? TabOverflowButton.width : 0) >=
           MediaQuery.of(context).size.width;
     }
@@ -133,11 +128,10 @@
   double _scaffoldHeaderWidth({
     required List<Screen> screens,
     required List<Widget>? actions,
-    required TextTheme textTheme,
   }) {
     final tabsWidth = screens.fold(
       0.0,
-      (prev, screen) => prev + screen.approximateTabWidth(textTheme),
+      (prev, screen) => prev + screen.approximateTabWidth(),
     );
     final actionsWidth = (actions?.length ?? 0) * actionWidgetSize;
     return tabsWidth + VerticalLineSpacer.totalWidth + actionsWidth;
@@ -183,7 +177,6 @@
       var tab = screen.buildTab(context);
       if (i == selectedIndex) {
         final tabWidth = screen.approximateTabWidth(
-          theme.textTheme,
           includeTabBarSpacing: false,
         );
         tab = SelectedTabWrapper(

diff --git a/packages/devtools_app/lib/src/shared/framework/screen.dart b/packages/devtools_app/lib/src/shared/framework/screen.dart
index fcacc56..29cb627 100644
--- a/packages/devtools_app/lib/src/shared/framework/screen.dart
+++ b/packages/devtools_app/lib/src/shared/framework/screen.dart

@@ -7,8 +7,6 @@
 /// @docImport '../utils/utils.dart';
 library;
 
-import 'dart:math' as math;
-
 import 'package:collection/collection.dart';
 import 'package:devtools_app_shared/service.dart';
 import 'package:devtools_app_shared/shared.dart';
@@ -367,12 +365,8 @@
   /// creating a documentation url using [docPageId].
   String? get docPageId => null;
 
-  double approximateTabWidth(
-    TextTheme textTheme, {
-    bool includeTabBarSpacing = true,
-  }) {
-    final title = _userFacingTitle;
-    final textWidth = calculateTextSpanWidth(TextSpan(text: title));
+  double approximateTabWidth({bool includeTabBarSpacing = true}) {
+    final textWidth = calculateTextSpanWidth(TextSpan(text: _userFacingTitle));
     const measurementBuffer = 1.0;
     return textWidth +
         denseSpacing +
@@ -395,9 +389,11 @@
         screenId,
       ),
       builder: (context, count, _) {
-        final tab = Tab(
+        final colorScheme = Theme.of(context).colorScheme;
+        return Tab(
           key: tabKey,
           child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               if (icon != null || iconAsset != null)
                 DevToolsIcon(
@@ -413,36 +409,18 @@
                   padding: const EdgeInsets.only(left: denseSpacing),
                   child: Text(title, style: Theme.of(context).regularTextStyle),
                 ),
+              if (count > 0)
+                Padding(
+                  padding: const EdgeInsets.only(left: denseSpacing),
+                  child: RoundedLabel(
+                    labelText: '$count',
+                    backgroundColor: colorScheme.errorContainer,
+                    textColor: colorScheme.onErrorContainer,
+                  ),
+                ),
             ],
           ),
         );
-
-        if (count > 0) {
-          // Calculate the width of the title text so that we can provide an accurate
-          // size for the [BadgePainter].
-          final titleWidth = calculateTextSpanWidth(
-            TextSpan(text: title, style: Theme.of(context).regularTextStyle),
-          );
-
-          return LayoutBuilder(
-            builder: (context, constraints) {
-              return Stack(
-                children: [
-                  CustomPaint(
-                    size: Size(defaultIconSize + denseSpacing + titleWidth, 0),
-                    painter: BadgePainter(
-                      number: count,
-                      colorScheme: Theme.of(context).colorScheme,
-                    ),
-                  ),
-                  tab,
-                ],
-              );
-            },
-          );
-        }
-
-        return tab;
       },
     );
   }
@@ -572,55 +550,6 @@
   return (show: true, disabledReason: null);
 }
 
-class BadgePainter extends CustomPainter {
-  BadgePainter({required this.number, required this.colorScheme});
-
-  final ColorScheme colorScheme;
-
-  final int number;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..color = colorScheme.errorContainer
-      ..style = PaintingStyle.fill;
-
-    final countPainter = TextPainter(
-      text: TextSpan(
-        text: '$number',
-        style: TextStyle(
-          color: colorScheme.onErrorContainer,
-          fontWeight: FontWeight.bold,
-        ),
-      ),
-      textDirection: TextDirection.ltr,
-    )..layout();
-
-    final badgeWidth = math.max(
-      defaultIconSize,
-      countPainter.width + denseSpacing,
-    );
-    canvas.drawOval(
-      Rect.fromLTWH(size.width, 0, badgeWidth, defaultIconSize),
-      paint,
-    );
-
-    countPainter.paint(
-      canvas,
-      Offset(size.width + (badgeWidth - countPainter.width) / 2, 0),
-    );
-    countPainter.dispose();
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    if (oldDelegate is BadgePainter) {
-      return number != oldDelegate.number;
-    }
-    return true;
-  }
-}
-
 class ShortcutsConfiguration {
   const ShortcutsConfiguration({required this.shortcuts, required this.actions})
     : assert(shortcuts.length == actions.length);

diff --git a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
index 6b3be3e..73e804c 100644
--- a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
+++ b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md

@@ -39,7 +39,7 @@
 
 ## Network profiler updates
 
-TODO: Remove this section if there are not any general updates.
+* Fixed layout of the "error count" badge in the tab name.
 
 ## Logging updates