split up UI as well

packages/devtools_app_shared/example/ui/dialog_example.dart

@@ -0,0 +1,38 @@
+// Copyright 2023 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:devtools_app_shared/ui.dart' as devtools_shared_ui;
+import 'package:flutter/material.dart';
+
+/// Example of using a [DevToolsDialog] widget from
+/// 'package:devtools_app_shared/ui.dart'.
+class MyDialog extends StatelessWidget {
+  const MyDialog({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return devtools_shared_ui.DevToolsDialog(
+      title: const devtools_shared_ui.DialogTitleText('My Cool Dialog'),
+      content: const Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text('Here is the body of my dialog.'),
+          SizedBox(height: devtools_shared_ui.denseSpacing),
+          Text('It communicates something important'),
+        ],
+      ),
+      actions: [
+        devtools_shared_ui.DialogTextButton(
+          onPressed: () {
+            // Do someting and then remove the dialog.
+            Navigator.of(context).pop(devtools_shared_ui.dialogDefaultContext);
+          },
+          child: const Text('DO SOMETHING'),
+        ),
+        const devtools_shared_ui.DialogCancelButton(),
+      ],
+    );
+  }
+}

packages/devtools_app_shared/example/ui/split_example.dart

@@ -0,0 +1,73 @@
+// Copyright 2023 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:devtools_app_shared/ui.dart' as devtools_shared_ui;
+import 'package:flutter/material.dart';
+
+/// Example of using the [Split] widget from
+/// 'package:devtools_app_shared/ui.dart' with two children laid across a
+/// horizontal axis.
+/// 
+/// This example does not specify the [Split.splitters] parameter, so a
+/// default splitter is used.
+class SplitExample extends StatelessWidget {
+  const SplitExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return devtools_shared_ui.Split(
+      axis: Axis.horizontal,
+      initialFractions: const [0.3, 0.7],
+      minSizes: const [50.0, 100.0],
+      children: const [
+        Text('Left side'),
+        Text('Right side'),
+      ],
+    );
+  }
+}
+
+/// Example of using the [Split] widget from
+/// 'package:devtools_app_shared/ui.dart' with three children laid across a
+/// vertical axis.
+/// 
+/// This example uses custom splitters.
+class MultiSplitExample extends StatelessWidget {
+  const MultiSplitExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return devtools_shared_ui.Split(
+      axis: Axis.vertical,
+      initialFractions: const [0.3, 0.3, 0.4],
+      minSizes: const [50.0, 50.0, 100.0],
+      splitters: const [
+        CustomSplitter(),
+        CustomSplitter(),
+      ],
+      children: const [
+        Text('Top'),
+        Text('Middle'),
+        Text('Bottom'),
+      ],
+    );
+  }
+}
+
+class CustomSplitter extends StatelessWidget implements PreferredSizeWidget {
+  const CustomSplitter({super.key});
+
+  static const _size = 50.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return const SizedBox(
+      height: _size,
+      child: Icon(Icons.front_hand),
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(_size);
+}

packages/devtools_app_shared/lib/src/ui/dialogs.dart

@@ -10,6 +10,60 @@ import 'theme/theme.dart';
 
 const dialogDefaultContext = 'dialog';
 
+/// A standardized dialog for use in DevTools.
+///
+/// It normalizes dialog layout, spacing, and look and feel.
+class DevToolsDialog extends StatelessWidget {
+  const DevToolsDialog({
+    super.key,
+    Widget? title,
+    required this.content,
+    this.includeDivider = true,
+    this.scrollable = true,
+    this.actions,
+    this.actionsAlignment,
+  }) : titleContent = title ?? const SizedBox();
+
+  static const contentPadding = 24.0;
+
+  final Widget titleContent;
+  final Widget content;
+  final bool includeDivider;
+  final bool scrollable;
+  final List<Widget>? actions;
+  final MainAxisAlignment? actionsAlignment;
+
+  @override
+  Widget build(BuildContext context) {
+    return PointerInterceptor(
+      child: AlertDialog(
+        scrollable: scrollable,
+        title: Column(
+          children: [
+            titleContent,
+            includeDivider
+                ? const PaddedDivider(
+                    padding: EdgeInsets.only(bottom: denseRowSpacing),
+                  )
+                : const SizedBox(height: defaultSpacing),
+          ],
+        ),
+        contentPadding: const EdgeInsets.fromLTRB(
+          contentPadding,
+          0,
+          contentPadding,
+          contentPadding,
+        ),
+        content: content,
+        actions: actions,
+        actionsAlignment: actionsAlignment,
+        buttonPadding: const EdgeInsets.symmetric(horizontal: defaultSpacing),
+      ),
+    );
+  }
+}
+
+/// A [Text] widget styled for dialog titles.
 class DialogTitleText extends StatelessWidget {
   const DialogTitleText(this.text, {super.key});
 
@@ -136,59 +190,6 @@ class DialogHelpText extends StatelessWidget {
   }
 }
 
-/// A standardized dialog for use in DevTools.
-///
-/// It normalizes dialog layout, spacing, and look and feel.
-class DevToolsDialog extends StatelessWidget {
-  const DevToolsDialog({
-    super.key,
-    Widget? title,
-    required this.content,
-    this.includeDivider = true,
-    this.scrollable = true,
-    this.actions,
-    this.actionsAlignment,
-  }) : titleContent = title ?? const SizedBox();
-
-  static const contentPadding = 24.0;
-
-  final Widget titleContent;
-  final Widget content;
-  final bool includeDivider;
-  final bool scrollable;
-  final List<Widget>? actions;
-  final MainAxisAlignment? actionsAlignment;
-
-  @override
-  Widget build(BuildContext context) {
-    return PointerInterceptor(
-      child: AlertDialog(
-        scrollable: scrollable,
-        title: Column(
-          children: [
-            titleContent,
-            includeDivider
-                ? const PaddedDivider(
-                    padding: EdgeInsets.only(bottom: denseRowSpacing),
-                  )
-                : const SizedBox(height: defaultSpacing),
-          ],
-        ),
-        contentPadding: const EdgeInsets.fromLTRB(
-          contentPadding,
-          0,
-          contentPadding,
-          contentPadding,
-        ),
-        content: content,
-        actions: actions,
-        actionsAlignment: actionsAlignment,
-        buttonPadding: const EdgeInsets.symmetric(horizontal: defaultSpacing),
-      ),
-    );
-  }
-}
-
 /// A TextButton used to close a containing dialog (Close).
 class DialogCloseButton extends StatelessWidget {
   const DialogCloseButton({super.key, this.onClose, this.label = 'CLOSE'});