Add video tutorial link to the Deep Links panel (#9925)
* Add tutorialVideoUrl field to ScreenMetaData for deep links video
* Update VideoTutorialLink to support custom video URLs
Use the tutorialVideoUrl from ScreenMetaData when available,
falling back to the default DevTools YouTube video timestamp.
* Use youtu.be short URL format for deep links tutorial video
* Move deep links tutorial video URL to a named constant
* Assert that VideoTutorialLink has a video URL or timestamp
* Add release notes entry for deep links tutorial link
diff --git a/packages/devtools_app/lib/src/framework/scaffold/status_line.dart b/packages/devtools_app/lib/src/framework/scaffold/status_line.dart
index 54e78dc..9c362da 100644
--- a/packages/devtools_app/lib/src/framework/scaffold/status_line.dart
+++ b/packages/devtools_app/lib/src/framework/scaffold/status_line.dart
@@ -90,7 +90,9 @@
final pageStatus = currentScreen.buildStatus(context);
final widerThanXxs = screenWidth > MediaSize.xxs;
final screenMetaData = ScreenMetaData.lookup(currentScreen.screenId);
- final showVideoTutorial = screenMetaData?.tutorialVideoTimestamp != null;
+ final showVideoTutorial =
+ screenMetaData?.tutorialVideoTimestamp != null ||
+ screenMetaData?.tutorialVideoUrl != null;
return [
Row(
mainAxisSize: MainAxisSize.min,
@@ -237,12 +239,15 @@
/// A widget that links to the "Dive in to DevTools" YouTube video at the
/// chapter for the given [screenMetaData].
class VideoTutorialLink extends StatelessWidget {
- const VideoTutorialLink({
+ VideoTutorialLink({
super.key,
required this.screenMetaData,
required this.screenWidth,
required this.highlightForConnection,
- });
+ }) : assert(
+ screenMetaData.tutorialVideoTimestamp != null ||
+ screenMetaData.tutorialVideoUrl != null,
+ );
final ScreenMetaData screenMetaData;
@@ -262,6 +267,7 @@
link: GaLink(
display: screenWidth <= MediaSize.xs ? 'Tutorial' : 'Watch tutorial',
url:
+ screenMetaData.tutorialVideoUrl ??
'$_devToolsYouTubeVideoUrl${screenMetaData.tutorialVideoTimestamp}',
gaScreenName: screenMetaData.id,
gaSelectedItemDescription:
diff --git a/packages/devtools_app/lib/src/shared/framework/screen.dart b/packages/devtools_app/lib/src/shared/framework/screen.dart
index 6e090ff..32f3d21 100644
--- a/packages/devtools_app/lib/src/shared/framework/screen.dart
+++ b/packages/devtools_app/lib/src/shared/framework/screen.dart
@@ -27,6 +27,8 @@
defaultValue: true,
);
+const _deepLinksTutorialVideoUrl = 'https://youtu.be/d7sZL6h1Elw';
+
enum ScreenMetaData {
home(
'home',
@@ -124,6 +126,7 @@
requiresConnection: false,
requiresDartVm: true,
requiresFlutter: true,
+ tutorialVideoUrl: _deepLinksTutorialVideoUrl,
),
vmTools(
'vm-tools',
@@ -154,6 +157,7 @@
this.worksWithOfflineData = false,
this.requiresLibrary,
this.tutorialVideoTimestamp,
+ this.tutorialVideoUrl,
}) : assert(
icon == null || iconAsset == null,
'Only one of icon or iconAsset may be specified.',
@@ -179,6 +183,13 @@
/// a particular chapter.
final String? tutorialVideoTimestamp;
+ /// A custom video tutorial URL for a screen.
+ ///
+ /// If provided, this URL will be used instead of the default
+ /// "Dive in to DevTools" YouTube video timestamp. This is used for
+ /// screens that have their own dedicated video tutorials.
+ final String? tutorialVideoUrl;
+
/// Looks up the [ScreenMetaData] value for the screen [id].
static ScreenMetaData? lookup(String id) {
return ScreenMetaData.values.firstWhereOrNull((screen) => screen.id == id);
diff --git a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
index 2d797c8..f589bd1 100644
--- a/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
+++ b/packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
@@ -61,7 +61,9 @@
## Deep links tool updates
-TODO: Remove this section if there are not any updates.
+* Added a "Watch tutorial" link to the status line that points to the
+ [deep links video tutorial](https://youtu.be/d7sZL6h1Elw).
+ [#9925](https://github.com/flutter/devtools/pull/9925)
## VS Code sidebar updates