Skip to content

Add video tutorial link to the Deep Links panel #9925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
binSaed wants to merge 5 commits into
base: master
Choose a base branch
from
+20 −3
Open

Add video tutorial link to the Deep Links panel #9925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ec2f43b
Add tutorialVideoUrl field to ScreenMetaData for deep links video
binSaed Jul 28, 2026
e316f3c
Update VideoTutorialLink to support custom video URLs
binSaed Jul 28, 2026
b5acea3
Use youtu.be short URL format for deep links tutorial video
binSaed Jul 28, 2026
d3213d5
Move deep links tutorial video URL to a named constant
binSaed Jul 28, 2026
830ab88
Assert that VideoTutorialLink has a video URL or timestamp
binSaed Jul 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions packages/devtools_app/lib/src/framework/scaffold/status_line.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,9 @@ class StatusLine extends StatelessWidget {
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,
Expand Down Expand Up @@ -237,12 +239,15 @@ class DocumentationLink extends StatelessWidget {
/// 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;

Expand All @@ -262,6 +267,7 @@ class VideoTutorialLink extends StatelessWidget {
link: GaLink(
display: screenWidth <= MediaSize.xs ? 'Tutorial' : 'Watch tutorial',
url:
screenMetaData.tutorialVideoUrl ??
'$_devToolsYouTubeVideoUrl${screenMetaData.tutorialVideoTimestamp}',
gaScreenName: screenMetaData.id,
gaSelectedItemDescription:
Expand Down
11 changes: 11 additions & 0 deletions packages/devtools_app/lib/src/shared/framework/screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ const _kNetworkDisconnectExperience = bool.fromEnvironment(
defaultValue: true,
);

const _deepLinksTutorialVideoUrl = 'https://youtu.be/d7sZL6h1Elw';

enum ScreenMetaData {
home(
'home',
Expand Down Expand Up @@ -124,6 +126,7 @@ enum ScreenMetaData {
requiresConnection: false,
requiresDartVm: true,
requiresFlutter: true,
tutorialVideoUrl: _deepLinksTutorialVideoUrl,
),
vmTools(
'vm-tools',
Expand Down Expand Up @@ -154,6 +157,7 @@ enum ScreenMetaData {
this.worksWithOfflineData = false,
this.requiresLibrary,
this.tutorialVideoTimestamp,
this.tutorialVideoUrl,
}) : assert(
icon == null || iconAsset == null,
'Only one of icon or iconAsset may be specified.',
Expand All @@ -179,6 +183,13 @@ enum ScreenMetaData {
/// 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);
Expand Down