diff --git a/src/content/learn/pathway/tutorial/devtools.md b/src/content/learn/pathway/tutorial/devtools.md index d797c6b6c7..6503a2d9c6 100644 --- a/src/content/learn/pathway/tutorial/devtools.md +++ b/src/content/learn/pathway/tutorial/devtools.md @@ -4,9 +4,11 @@ description: Learn to use the Dart DevTools when developing Flutter apps. layout: tutorial --- -Learn to use the widget inspector and property editor to debug layout issues and experiment with properties in real-time. +Learn to use the widget inspector and property editor to debug layout issues +and experiment with properties in real-time. - + title: What you'll accomplish @@ -30,12 +32,25 @@ two particularly useful features: the **widget inspector** and the **property editor**. First, launch DevTools by running the following commands while -your app is running in debug mode: +your app is running in debug mode. +Run this command in a **separate terminal window** +from where your app is running: ```console $ dart devtools ``` +Running this command starts the DevTools server and +opens the interface in a browser. + +To connect DevTools to your running app: + +1. Find the DevTools URL printed in the terminal + where your app is running (for example: + `Serving DevTools at http://127.0.0.1:9101`). +2. Copy this URL. +3. Paste it into the connect bar in the DevTools browser page. + :::note Run in your IDE Provided you have the appropriate Flutter plugin installed, @@ -43,7 +58,6 @@ you can also run DevTools directly inside Code OSS-based editors such as [VS Code][] as well as [IntelliJ and Android Studio][]. The screenshots in this lesson are from VS Code. - ::: [Dart and Flutter DevTools]: /tools/devtools @@ -57,7 +71,8 @@ It helps you understand the layout of your UI and identifies which widgets are responsible for different parts of the screen. Running against the app you've built so far, the inspector looks like this: -A screenshot of the Flutter widget inspector tool. +A screenshot of the Flutter widget inspector tool. Consider the `GamePage` widget you created in this section: @@ -144,7 +159,8 @@ This error is referred to as the "unbounded constraints" error. Watch the following video to get an understanding of how to spot and resolve this issue. - + [constraints]: /ui/layout/constraints [`double.infinity`]: {{site.api}}/flutter/dart-core/double/infinity-constant.html @@ -160,7 +176,8 @@ the property editor displays all the properties of that selected widget. This is a powerful tool for understanding why a widget looks the way it does and for experimenting with property value changes in real-time. -A screenshot of the Flutter property editor tool. +A screenshot of the Flutter property editor tool. Look at the `Tile` widget's `build` method from earlier: diff --git a/src/content/learn/pathway/tutorial/navigation.md b/src/content/learn/pathway/tutorial/navigation.md index 7055fa4f4e..e857ad7675 100644 --- a/src/content/learn/pathway/tutorial/navigation.md +++ b/src/content/learn/pathway/tutorial/navigation.md @@ -4,7 +4,8 @@ description: Learn how to navigate from one page to another in a Flutter app. layout: tutorial --- -Learn to navigate between screens with Navigator.push and implement adaptive navigation patterns for different screen sizes. +Learn to navigate between screens with Navigator.push and implement +adaptive navigation patterns for different screen sizes. title: What you'll accomplish