diff --git a/examples/devtools_options.yaml b/examples/devtools_options.yaml new file mode 100644 index 00000000000..fa0b357c4f4 --- /dev/null +++ b/examples/devtools_options.yaml @@ -0,0 +1,3 @@ +description: This file stores settings for Dart & Flutter DevTools. +documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states +extensions: diff --git a/firebase.json b/firebase.json index ee1c8eb7213..dcbfb680519 100644 --- a/firebase.json +++ b/firebase.json @@ -97,7 +97,7 @@ { "source": "/setup", "destination": "/install", "type": 301 }, { "source": "/technical-overview", "destination": "/resources/architectural-overview", "type": 301 }, { "source": "/text-input", "destination": "/cookbook/forms/text-input", "type": 301 }, - { "source": "/tutorial", "destination": "/learn/tutorial", "type": 301 }, + { "source": "/tutorial", "destination": "/learn/pathway/tutorial", "type": 301 }, { "source": "/tutorials", "destination": "/reference/learning-resources", "type": 301 }, { "source": "/unbounded-constraints", "destination": "/ui/layout/constraints#unbounded", "type": 301 }, { "source": "/ui-performance", "destination": "/perf/ui-performance", "type": 301 }, @@ -185,6 +185,7 @@ { "source": "/platform-integration/windows/run-loop-migration", "destination": "/release/breaking-changes/windows-run-loop", "type": 301 }, { "source": "/platform-integration/windows/version-migration", "destination": "/release/breaking-changes/windows-version-information", "type": 301 }, { "source": "/platform-integration/windows/dark-mode-migration", "destination": "/release/breaking-changes/windows-dark-mode", "type": 301 }, + { "source": "/reference/learning-resources", "destination": "/learn/learning-resources", "type": 301 }, { "source": "/reference/widgets/:catalogpage+", "destination": "/ui/widgets/:catalogpage+", "type": 301 }, { "source": "/reference/widgets/widgetindex", "destination": "/reference/widgets", "type": 301 }, { "source": "/release/release-notes/changelogs/changelog-1.17.0", "destination": "/release/release-notes/release-notes-1.17.0", "type": 301 }, diff --git a/site/lib/_sass/components/_header.scss b/site/lib/_sass/components/_header.scss index 5c7c7a77b0a..ad24c34f596 100644 --- a/site/lib/_sass/components/_header.scss +++ b/site/lib/_sass/components/_header.scss @@ -54,7 +54,7 @@ ul.nav-items { display: none; padding: 0; - margin: 0 0 0 auto; + margin: 0 auto 0 0; gap: .75rem; flex-direction: row; list-style-type: none; diff --git a/site/lib/src/components/layout/header.dart b/site/lib/src/components/layout/header.dart index c82969eb7b9..b45eef3403a 100644 --- a/site/lib/src/components/layout/header.dart +++ b/site/lib/src/components/layout/header.dart @@ -54,7 +54,7 @@ class DashHeader extends StatelessComponent { ul(classes: 'nav-items', [ _NavItem( href: '/', - label: 'Home', + label: 'User Guides', isActive: activeEntry == ActiveNavEntry.home, ), _NavItem( @@ -65,6 +65,7 @@ class DashHeader extends StatelessComponent { const _NavItem( href: 'https://api.flutter.dev', label: 'Reference', + openInNewTab: true, ), ]), @@ -123,17 +124,20 @@ class _NavItem extends StatelessComponent { required this.href, required this.label, this.isActive = false, + this.openInNewTab = false, }); final String href; final String label; final bool isActive; + final bool openInNewTab; @override Component build(BuildContext _) => li([ a( href: href, classes: ['nav-link', 'text-button', if (isActive) 'active'].toClasses, + attributes: openInNewTab ? {'target': '_blank', 'rel': 'noopener'} : null, [.text(label)], ), ]); diff --git a/site/lib/src/extensions/tutorial_prefetch_processor.dart b/site/lib/src/extensions/tutorial_prefetch_processor.dart index 70ac91ee258..27ba7b19748 100644 --- a/site/lib/src/extensions/tutorial_prefetch_processor.dart +++ b/site/lib/src/extensions/tutorial_prefetch_processor.dart @@ -15,7 +15,7 @@ final class TutorialNavigationExtension implements PageExtension { @override Future> apply(Page page, List nodes) async { - if (!page.path.startsWith('learn/tutorial/')) { + if (!page.path.startsWith('learn/pathway/')) { return nodes; } diff --git a/site/lib/src/extensions/tutorial_structure_processor.dart b/site/lib/src/extensions/tutorial_structure_processor.dart index ee06b2e7277..afff93445ae 100644 --- a/site/lib/src/extensions/tutorial_structure_processor.dart +++ b/site/lib/src/extensions/tutorial_structure_processor.dart @@ -11,7 +11,7 @@ final class TutorialStructureExtension implements PageExtension { @override Future> apply(Page page, List nodes) async { - if (!page.path.startsWith('learn/tutorial/') || + if (!page.path.startsWith('learn/pathway/tutorial/') || page.path.endsWith('index.md')) { return nodes; } diff --git a/site/lib/src/layouts/dash_layout.dart b/site/lib/src/layouts/dash_layout.dart index d9c4ab9f0ce..7b722726ce0 100644 --- a/site/lib/src/layouts/dash_layout.dart +++ b/site/lib/src/layouts/dash_layout.dart @@ -23,6 +23,37 @@ abstract class FlutterDocsLayout extends PageLayoutBase { List get defaultBodyClasses => []; + String get defaultSidenav => 'default'; + + /// Path prefix to sidenav name mapping. + /// More specific paths should come before less specific ones. + static const pathSidenavs = { + '/learn': 'learn', + // Add future path-specific sidenavs here + }; + + /// Returns the sidenav key for a given page URL. + /// Priority order: + /// 1. Page frontmatter 'sidenav' field (if specified) + /// 2. Path-based sidenav (if URL matches a registered path prefix) + /// 3. Default sidenav + String getSidenavForPage(String pageUrl, String? pageSpecifiedSidenav) { + // Priority 1: Page-specific override from frontmatter + if (pageSpecifiedSidenav != null) { + return pageSpecifiedSidenav; + } + + // Priority 2: Path prefix matching + for (final entry in pathSidenavs.entries) { + if (pageUrl.startsWith(entry.key)) { + return entry.value; + } + } + + // Priority 3: Default fallback + return defaultSidenav; + } + @override @mustCallSuper Iterable buildHead(Page page) { @@ -154,8 +185,16 @@ ga('send', 'pageview'); final pageData = page.data.page; final bodyClass = pageData['bodyClass'] as String?; final pageUrl = page.url.startsWith('/') ? page.url : '/${page.url}'; + + final pageSidenav = getSidenavForPage( + pageUrl, + pageData['sidenav'] as String?, + ); final sideNavEntries = switch (page.data['sidenav']) { - final List sidenavData => navEntriesFromData(sidenavData), + final Map sidenavs => switch (sidenavs[pageSidenav]) { + final List sidenavData => navEntriesFromData(sidenavData), + _ => null, + }, _ => null, }; final obsolete = pageData['obsolete'] == true; diff --git a/site/lib/src/layouts/tutorial_layout.dart b/site/lib/src/layouts/tutorial_layout.dart index 5e5eed9e72d..7877cc08877 100644 --- a/site/lib/src/layouts/tutorial_layout.dart +++ b/site/lib/src/layouts/tutorial_layout.dart @@ -18,7 +18,7 @@ class TutorialLayout extends DocLayout { bool get allowBreadcrumbs => false; @override - List get defaultBodyClasses => ['sidenav-closed']; + List get defaultBodyClasses => []; @override Component buildBody(Page page, Component child) { diff --git a/src/_includes/docs/install/quick.md b/src/_includes/docs/install/quick.md new file mode 100644 index 00000000000..56f23cb182a --- /dev/null +++ b/src/_includes/docs/install/quick.md @@ -0,0 +1,249 @@ +Learn how to use any Code OSS-based editor, such as VS Code, +to set up your Flutter development environment and +test drive Flutter's developer experience. + +If you've developed with Flutter before, +or you prefer to use a different editor or IDE, +you can follow the [custom setup instructions][] instead. + +:::note What you'll achieve + +- Install the software prerequisites for Flutter. +- Use VS Code to download and install Flutter. +- Create a new Flutter app from a sample template. +- Try out Flutter development features like stateful hot reload. + +::: + +[custom setup instructions]: /get-started/custom + +## Confirm your development platform {: #dev-platform} + +The instructions on this page are configured to cover +installing and trying out Flutter on a **Windows**{:.selected-os-text} device. + +If you'd like to follow the instructions for a different OS, +please select one of the following. + + + +## Download prerequisite software {: #download-prerequisites} + +For the smoothest Flutter setup, +first install the following tools. + + 1.

Set up Linux support

+ + If you haven't set up Linux support on your Chromebook before, + [Turn on Linux support][chromeos-linux]. + + If you've already turned on Linux support, + ensure it's up to date following the + [Fix problems with Linux][chromeos-linux-update] instructions. + + 1.

Download and install prerequisite packages

+ + Using `apt-get` or your preferred installation mechanism, + install the latest versions of the following packages: + + - `curl` + - `git` + - `unzip` + - `xz-utils` + - `zip` + - `libglu1-mesa` + + If you want to use `apt-get`, + install these packages using the following commands: + + ```console + $ sudo apt-get update -y && sudo apt-get upgrade -y + $ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa + ``` + + 1.

Download and install Visual Studio Code

+ + To quickly install Flutter, then edit and debug your apps, + [install and set up Visual Studio Code][vscode-install]. + + You can instead install and use any other Code OSS-based editor + that supports VS Code extensions. + If you choose to do so, for the rest of this article, + assume VS Code refers to the editor of your choice. + +{: .steps .chromeos-only} + + 1.

Install git

+ + **If you already have git installed, skip to the next + step: Download and install Visual Studio Code.** + + There are a few ways to install git on your Mac, + but the way we recommend is by using XCode. + This will be important when you target your + builds for iOS or macOS. + + ```console + $ xcode-select --install + ``` + + If you haven't installed the tools already, + a dialog should open that confirms you'd like to install them. + Click **Install**, then once the installation is complete, click **Done**. + + 1.

Download and install Visual Studio Code

+ + To quickly install Flutter, then edit and debug your apps, + [install and set up Visual Studio Code][vscode-install]. + + You can instead install and use any other Code OSS-based editor + that supports VS Code extensions. + If you choose to do so, for the rest of this article, + assume VS Code refers to the editor of your choice. + +{: .steps .macos-only} + + 1.

Install Git for Windows

+ + Download and install the latest version of [Git for Windows][]. + + For help installing or troubleshooting Git, + reference the [Git documentation][git-install]. + + 1.

Download and install Visual Studio Code

+ + To quickly install Flutter, then edit and debug your apps, + [install and set up Visual Studio Code][vscode-install]. + + You can instead install and use any other Code OSS-based editor + that supports VS Code extensions. + If you choose to do so, for the rest of this article, + assume VS Code refers to the editor of your choice. + +{: .steps .windows-only} + + 1.

Download and install prerequisite packages

+ + Using your preferred package manager or mechanism, + install the latest versions of the following packages: + + - `curl` + - `git` + - `unzip` + - `xz-utils` + - `zip` + - `libglu1-mesa` + + On Debian-based distros with `apt-get`, such as Ubuntu, + install these packages using the following commands: + + ```console + $ sudo apt-get update -y && sudo apt-get upgrade -y + $ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa + ``` + + 1.

Download and install Visual Studio Code

+ + To quickly install Flutter, then edit and debug your apps, + [install and set up Visual Studio Code][vscode-install]. + + You can instead install and use any other Code OSS-based editor + that supports VS Code extensions. + If you choose to do so, for the rest of this article, + assume VS Code refers to the editor of your choice. + +{: .steps .linux-only} + +[chromeos-linux]: https://support.google.com/chromebook/answer/9145439 +[chromeos-linux-update]: https://support.google.com/chromebook/answer/9145439?hl=en#:~:text=Fix%20problems%20with%20Linux +[Git for Windows]: https://git-scm.com/downloads/win +[git-install]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git +[vscode-install]: https://code.visualstudio.com/docs/setup/setup-overview + +## Install and set up Flutter {: #install} + +Now that you've installed Git and VS Code, +follow these steps to use VS Code to install and set up Flutter. + +:::note Download manually +If you prefer to manually install Flutter, +follow the instructions in [Install Flutter manually][]. +::: + + 1.

Launch VS Code

+ + If not already open, open VS Code by searching for it with Spotlight + or opening it manually from the directory where it's installed. + + 1.

Add the Flutter extension to VS Code

+ + To add the Dart and Flutter extensions to VS Code, + visit the [Flutter extension's marketplace page][flutter-vscode], + then click **Install**. + If prompted by your browser, allow it to open VS Code. + + 1.

Install Flutter with VS Code

+ + 1. Open the command palette in VS Code. + + Go to **View** > **Command Palette** + or press Cmd/Ctrl + + Shift + P. + + 1. In the command palette, type `flutter`. + + 1. Select **Flutter: New Project**. + + 1. VS Code prompts you to locate the Flutter SDK on your computer. + Select **Download SDK**. + + 1. When the **Select Folder for Flutter SDK** dialog displays, + choose where you want to install Flutter. + + 1. Click **Clone Flutter**. + + While downloading Flutter, VS Code displays this pop-up notification: + + ```console + Downloading the Flutter SDK. This may take a few minutes. + ``` + + This download takes a few minutes. + If you suspect that the download has hung, click **Cancel** then + start the installation again. + + 1. Click **Add SDK to PATH**. + + When successful, a notification displays: + + ```console + The Flutter SDK was added to your PATH + ``` + + 1. VS Code might display a Google Analytics notice. + + If you agree, click **OK**. + + 1. To ensure that Flutter is available in all terminals: + + 1. Close, then reopen all terminal windows. + 1. Restart VS Code. + + {:type="a"} + + :::note + The VS Code setup process might check for Android Studio, which can result in a warning if it's not installed. + You can safely ignore this if you're targeting other platforms (like web, iOS, or macOS), as the installation will still succeed. + Afterward, run `flutter doctor` to verify your installation. + ::: + + 1.

Troubleshoot installation issues

+ + If you encounter any issues during installation, + check out [Flutter installation troubleshooting][troubleshoot]. + +{:.steps} + +[Install Flutter manually]: /install/manual +[flutter-vscode]: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter +[troubleshoot]: /install/troubleshoot diff --git a/src/content/app-architecture/design-patterns/command.md b/src/content/app-architecture/design-patterns/command.md index 04d136175bc..e60fdf30cbc 100644 --- a/src/content/app-architecture/design-patterns/command.md +++ b/src/content/app-architecture/design-patterns/command.md @@ -626,6 +626,6 @@ final class Command1 extends Command { [`Result` class]: /app-architecture/design-patterns/result [pub.dev]: {{site.pub}} [`command_it`]: {{site.pub-pkg}}/command_it -[`ChangeNotifier`]: /learn/tutorial/change-notifier +[`ChangeNotifier`]: /learn/pathway/tutorial/change-notifier [Model-View-ViewModel (MVVM)]: /app-architecture/guide#view-models [View models]: /app-architecture/guide#view-models diff --git a/src/content/index.md b/src/content/index.md index 7c20b83b86b..19394321574 100644 --- a/src/content/index.md +++ b/src/content/index.md @@ -4,6 +4,7 @@ shortTitle: Docs description: >- Get started with Flutter. Widgets, examples, updates, and API docs to help you write your first Flutter app. +sidenav: default ---
@@ -16,7 +17,7 @@ description: >- Bookmark the API reference docs for the Flutter framework. - + Browse tutorials, sample code, workshops, and recipes. diff --git a/src/content/install/quick.md b/src/content/install/quick.md index b7acf97d7a4..fb092d04369 100644 --- a/src/content/install/quick.md +++ b/src/content/install/quick.md @@ -8,255 +8,7 @@ showBanner: false sitemap: false --- -Learn how to use any Code OSS-based editor, such as VS Code, -to set up your Flutter development environment and -test drive Flutter's developer experience. - -If you've developed with Flutter before, -or you prefer to use a different editor or IDE, -you can follow the [custom setup instructions][] instead. - -:::note What you'll achieve - -- Install the software prerequisites for Flutter. -- Use VS Code to download and install Flutter. -- Create a new Flutter app from a sample template. -- Try out Flutter development features like stateful hot reload. - -::: - -[custom setup instructions]: /get-started/custom - -## Confirm your development platform {: #dev-platform} - -The instructions on this page are configured to cover -installing and trying out Flutter on a **Windows**{:.selected-os-text} device. - -If you'd like to follow the instructions for a different OS, -please select one of the following. - - - -## Download prerequisite software {: #download-prerequisites} - -For the smoothest Flutter setup, -first install the following tools. - - 1.

Set up Linux support

- - If you haven't set up Linux support on your Chromebook before, - [Turn on Linux support][chromeos-linux]. - - If you've already turned on Linux support, - ensure it's up to date following the - [Fix problems with Linux][chromeos-linux-update] instructions. - - 1.

Download and install prerequisite packages

- - Using `apt-get` or your preferred installation mechanism, - install the latest versions of the following packages: - - - `curl` - - `git` - - `unzip` - - `xz-utils` - - `zip` - - `libglu1-mesa` - - If you want to use `apt-get`, - install these packages using the following commands: - - ```console - $ sudo apt-get update -y && sudo apt-get upgrade -y - $ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa - ``` - - 1.

Download and install Visual Studio Code

- - To quickly install Flutter, then edit and debug your apps, - [install and set up Visual Studio Code][vscode-install]. - - You can instead install and use any other Code OSS-based editor - that supports VS Code extensions. - If you choose to do so, for the rest of this article, - assume VS Code refers to the editor of your choice. - -{: .steps .chromeos-only} - - 1.

Install git

- - **If you already have git installed, skip to the next - step: Download and install Visual Studio Code.** - - There are a few ways to install git on your Mac, - but the way we recommend is by using XCode. - This will be important when you target your - builds for iOS or macOS. - - ```console - $ xcode-select --install - ``` - - If you haven't installed the tools already, - a dialog should open that confirms you'd like to install them. - Click **Install**, then once the installation is complete, click **Done**. - - 1.

Download and install Visual Studio Code

- - To quickly install Flutter, then edit and debug your apps, - [install and set up Visual Studio Code][vscode-install]. - - You can instead install and use any other Code OSS-based editor - that supports VS Code extensions. - If you choose to do so, for the rest of this article, - assume VS Code refers to the editor of your choice. - -{: .steps .macos-only} - - 1.

Install Git for Windows

- - Download and install the latest version of [Git for Windows][]. - - For help installing or troubleshooting Git, - reference the [Git documentation][git-install]. - - 1.

Download and install Visual Studio Code

- - To quickly install Flutter, then edit and debug your apps, - [install and set up Visual Studio Code][vscode-install]. - - You can instead install and use any other Code OSS-based editor - that supports VS Code extensions. - If you choose to do so, for the rest of this article, - assume VS Code refers to the editor of your choice. - -{: .steps .windows-only} - - 1.

Download and install prerequisite packages

- - Using your preferred package manager or mechanism, - install the latest versions of the following packages: - - - `curl` - - `git` - - `unzip` - - `xz-utils` - - `zip` - - `libglu1-mesa` - - On Debian-based distros with `apt-get`, such as Ubuntu, - install these packages using the following commands: - - ```console - $ sudo apt-get update -y && sudo apt-get upgrade -y - $ sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa - ``` - - 1.

Download and install Visual Studio Code

- - To quickly install Flutter, then edit and debug your apps, - [install and set up Visual Studio Code][vscode-install]. - - You can instead install and use any other Code OSS-based editor - that supports VS Code extensions. - If you choose to do so, for the rest of this article, - assume VS Code refers to the editor of your choice. - -{: .steps .linux-only} - -[chromeos-linux]: https://support.google.com/chromebook/answer/9145439 -[chromeos-linux-update]: https://support.google.com/chromebook/answer/9145439?hl=en#:~:text=Fix%20problems%20with%20Linux -[Git for Windows]: https://git-scm.com/downloads/win -[git-install]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git -[vscode-install]: https://code.visualstudio.com/docs/setup/setup-overview - -## Install and set up Flutter {: #install} - -Now that you've installed Git and VS Code, -follow these steps to use VS Code to install and set up Flutter. - -:::note Download manually -If you prefer to manually install Flutter, -follow the instructions in [Install Flutter manually][]. -::: - - 1.

Launch VS Code

- - If not already open, open VS Code by searching for it with Spotlight - or opening it manually from the directory where it's installed. - - 1.

Add the Flutter extension to VS Code

- - To add the Dart and Flutter extensions to VS Code, - visit the [Flutter extension's marketplace page][flutter-vscode], - then click **Install**. - If prompted by your browser, allow it to open VS Code. - - 1.

Install Flutter with VS Code

- - 1. Open the command palette in VS Code. - - Go to **View** > **Command Palette** - or press Cmd/Ctrl + - Shift + P. - - 1. In the command palette, type `flutter`. - - 1. Select **Flutter: New Project**. - - 1. VS Code prompts you to locate the Flutter SDK on your computer. - Select **Download SDK**. - - 1. When the **Select Folder for Flutter SDK** dialog displays, - choose where you want to install Flutter. - - 1. Click **Clone Flutter**. - - While downloading Flutter, VS Code displays this pop-up notification: - - ```console - Downloading the Flutter SDK. This may take a few minutes. - ``` - - This download takes a few minutes. - If you suspect that the download has hung, click **Cancel** then - start the installation again. - - 1. Click **Add SDK to PATH**. - - When successful, a notification displays: - - ```console - The Flutter SDK was added to your PATH - ``` - - 1. VS Code might display a Google Analytics notice. - - If you agree, click **OK**. - - 1. To ensure that Flutter is available in all terminals: - - 1. Close, then reopen all terminal windows. - 1. Restart VS Code. - - {:type="a"} - - :::note - The VS Code setup process might check for Android Studio, which can result in a warning if it's not installed. - You can safely ignore this if you're targeting other platforms (like web, iOS, or macOS), as the installation will still succeed. - Afterward, run `flutter doctor` to verify your installation. - ::: - - 1.

Troubleshoot installation issues

- - If you encounter any issues during installation, - check out [Flutter installation troubleshooting][troubleshoot]. - -{:.steps} - -[Install Flutter manually]: /install/manual -[flutter-vscode]: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter -[troubleshoot]: /install/troubleshoot +{% render "docs/install/quick.md" site: site %} ## Test drive Flutter {: #test-drive} diff --git a/src/content/reference/learning-resources.md b/src/content/learn/learning-resources.md similarity index 100% rename from src/content/reference/learning-resources.md rename to src/content/learn/learning-resources.md diff --git a/src/content/learn/pathway/how-flutter-works.md b/src/content/learn/pathway/how-flutter-works.md new file mode 100644 index 00000000000..13412aad5f0 --- /dev/null +++ b/src/content/learn/pathway/how-flutter-works.md @@ -0,0 +1,110 @@ +--- +title: How Flutter Works +breadcrumb: How Flutter Works +description: This pages walks you through the quick install process for Flutter. +layout: tutorial +--- + + + +## Flutter's architecture + + + +
Welcome to the first episode of "How Flutter Works," a six-part +series designed to explore what happens to your Dart code after you +release it into Flutter. In this episode, we're taking a high-level +look at Flutter's architecture. Learn about declarative code, +multi-platform frameworks, and the role of Dart in Flutter's +architecture. This video is perfect for those beginning to research +Flutter and who want to understand the big picture. + +## The three trees + + + +
Dive into Flutter's architecture by exploring its three primary +trees: Widget, Element, and RenderObject. Discover how widgets provide +the declarative API for Flutter developers and see how Elements glue +widgets to the rendering layer. Follow along as we also cover the role +of RenderObjects in translating widget values into painting calls. + + +## The state class + + + +
In Episode 3 of How Flutter Works, we dive deep into the State +class, a critical piece behind every StatefulWidget. We walk through +the full life cycle of a State object—from initState, where you +initialize resources, to dispose, where you clean up. Along the way, +we explore important methods like didChangeDependencies (triggered by +inherited widgets like MediaQuery), didUpdateWidget (for reacting to +ancestor-driven changes), and the all-important build method. By the +end of the episode, you'll understand how State objects track, respond +to, and manage changes in your Flutter apps—and how the State life +cycle enables efficient UI updates. + +We also peel back the curtain on how Flutter recurses down the widget +tree after a setState call, building out only the parts of your app +that need to change. You'll learn why const constructors matter for +performance, why setState closures must be synchronous, and how +Elements (not Widgets themselves) manage the actual rebuild process. +If you're curious how Flutter keeps apps fast and responsive, or you +just want to really understand what happens behind the scenes, this +episode is packed with the essential foundations. + + +## The RenderObjectWidget + + + +
Ever wonder how your Flutter app actually renders to the screen? +In this video, we dive into RenderObjectWidgets—the only type of +widget in Flutter that creates something visual. While +StatelessWidgets and StatefulWidgets help structure your app, it’s +RenderObjectWidgets that turn your UI code into real pixels. + +You'll learn how Flutter builds the Widget, Element, and RenderObject +trees, why many common widgets don’t directly render anything, and how +RenderObjectWidgets create and update RenderObjects that power your +UI. + +## The RenderObject + + + +
In Episode 5 of "How Flutter Works," Craig walks through a full +day in the life of a RenderObject. Building on the concepts from +Episode 4, this video explains the core responsibilities of +RenderObjects: layout, painting, hit testing, and accessibility. Craig +demystifies how constraints flow down the render tree, how sizes come +back up, and how parent RenderObjects set their children's positions. +He also breaks down key methods like layout, paint, and +describeSemanticsConfiguration, showing how they fit together to keep +your UI responsive and accurate. + + +## The Flutter Engine and Embedders + + + +
In Episode 6 of "How Flutter Works," Craig takes us beneath the +Dart code to explore the Flutter engine and embedders. This episode +explains how Flutter mobile apps rely on native Android and iOS code +to launch and operate, how the Flutter engine connects your Dart code +to the host platform, and how embedders facilitate communication +between the two. Craig also highlights the structure of a newly +generated Flutter project, dives into how threads are managed in a +Flutter app, and explains the roles of PlatformChannels and the Pigeon +package. + +You’ll also learn why the Flutter engine is written in C++ rather than +Dart, how it evolved from a fork of Chrome, and how it uses Skia or +Impeller to render each frame. The episode wraps up by looking ahead +to Flutter's future architecture improvements, which aim to simplify +native interop even further. If you want a clear mental model of how +Flutter apps work under the hood, this is the perfect way to connect +all the layers together. + +
diff --git a/src/content/learn/pathway.md b/src/content/learn/pathway/index.md similarity index 88% rename from src/content/learn/pathway.md rename to src/content/learn/pathway/index.md index 915095b200b..d3b560e7a70 100644 --- a/src/content/learn/pathway.md +++ b/src/content/learn/pathway/index.md @@ -1,8 +1,8 @@ --- -title: Dart and Flutter learning pathway +title: Overview breadcrumb: Learning pathway description: This learning pathway walks you through the basics of both Dart and Flutter. -showToc: false +layout: tutorial --- @@ -15,7 +15,7 @@ Welcome to the Dart and Flutter Getting Started pathway. In it, you'll set up yo Before you can start building Flutter apps, you'll need to set up your development environment. Follow the installation guide to get Flutter and all required dependencies installed on your machine. -[Get Started →](/install) +[Get Started →](/learn/pathway/quick-install) ### Complete the Dart Getting Started tutorial @@ -23,19 +23,22 @@ Flutter uses the Dart programming language. If you're new to Dart, complete this If you're in a hurry and already familiar with modern, object-oriented programming languages, you can safely skip this step. -[Dart Getting Started tutorial →]({{site.dart-site}}/learn/tutorial) + +Dart Getting Started tutorial → + ### Complete the Flutter Getting Started tutorial Now that you have Dart skills under your belt, dive into Flutter! This hands-on tutorial walks you through building three small Flutter apps step-by-step. -[Flutter Getting Started tutorial →](/learn/tutorial) +[Flutter Getting Started tutorial →](/learn/pathway/tutorial) ### Understand how Flutter works Deepen your understanding of how Flutter works under the hood by watching this video series. Learn about the widget tree, rendering pipeline, and what makes Flutter unique. This series provides the knowledge you need to know to take full advantage of the framework. -[Watch: How Flutter Works →](https://youtu.be/0Xn1QhNtPkQ?si=iIHtTuVae5804F92) + +[Watch: How Flutter Works →](/learn/pathway/how-flutter-works) diff --git a/src/content/learn/pathway/quick-install.md b/src/content/learn/pathway/quick-install.md new file mode 100644 index 00000000000..91f7870764c --- /dev/null +++ b/src/content/learn/pathway/quick-install.md @@ -0,0 +1,24 @@ +--- +title: Quick install +breadcrumb: Install +description: This pages walks you through the quick install process for Flutter. +layout: tutorial +--- + + +{% render "docs/install/quick.md" site: site %} + +## Start learning! + +Installing the Flutter SDK automatically installs Dart as well. You can now start building Flutter apps! + + +

+ +If you're new to programming, start with the Dart Getting Started tutorial to learn the fundamentals of the Dart programming language. This tutorial was designed to lead into the Flutter Getting Started tutorial. + +

+ Start learning +
+ +If you're already familiar with programming, you can skip the Dart tutorial and jump straight into the first Flutter lesson. diff --git a/src/content/learn/tutorial/adaptive-layout.md b/src/content/learn/pathway/tutorial/adaptive-layout.md similarity index 99% rename from src/content/learn/tutorial/adaptive-layout.md rename to src/content/learn/pathway/tutorial/adaptive-layout.md index 21a0a38bb62..cefe81d8aca 100644 --- a/src/content/learn/tutorial/adaptive-layout.md +++ b/src/content/learn/pathway/tutorial/adaptive-layout.md @@ -2,7 +2,6 @@ title: LayoutBuilder and adaptive layouts description: Learn how to use the LayoutBuilder widget. layout: tutorial -sitemap: false --- Learn how to create layouts that adapt to different screen widths. diff --git a/src/content/learn/tutorial/advanced-ui.md b/src/content/learn/pathway/tutorial/advanced-ui.md similarity index 99% rename from src/content/learn/tutorial/advanced-ui.md rename to src/content/learn/pathway/tutorial/advanced-ui.md index 127bf40a73b..989e3b31649 100644 --- a/src/content/learn/tutorial/advanced-ui.md +++ b/src/content/learn/pathway/tutorial/advanced-ui.md @@ -4,7 +4,6 @@ description: >- A gentle introduction into advanced UI features: adaptive layouts, slivers, scrolling, navigation. layout: tutorial -sitemap: false --- Preview the Rolodex app you'll build and set up a Cupertino-based project with data models. @@ -499,7 +498,7 @@ If you aren't familiar with `ValueNotifier`, you should complete the [previous tutorial covering state][] before continuing, which covers state management. -[previous tutorial covering state]: /learn/tutorial/set-up-state-project +[previous tutorial covering state]: /learn/pathway/tutorial/set-up-state-project ### Connect the data to your app diff --git a/src/content/learn/tutorial/change-notifier.md b/src/content/learn/pathway/tutorial/change-notifier.md similarity index 99% rename from src/content/learn/tutorial/change-notifier.md rename to src/content/learn/pathway/tutorial/change-notifier.md index 594168a7045..824dc464a6d 100644 --- a/src/content/learn/tutorial/change-notifier.md +++ b/src/content/learn/pathway/tutorial/change-notifier.md @@ -2,7 +2,6 @@ title: State management in Flutter description: Instructions on how to manage state with ChangeNotifiers. layout: tutorial -sitemap: false --- Learn to create a ViewModel with ChangeNotifier and manage loading, success, and error states. diff --git a/src/content/learn/tutorial/create-an-app.md b/src/content/learn/pathway/tutorial/create-an-app.md similarity index 99% rename from src/content/learn/tutorial/create-an-app.md rename to src/content/learn/pathway/tutorial/create-an-app.md index 926e147d288..3076dd6fb9c 100644 --- a/src/content/learn/tutorial/create-an-app.md +++ b/src/content/learn/pathway/tutorial/create-an-app.md @@ -2,7 +2,6 @@ title: Create an app description: Instructions on how to create a new Flutter app. layout: tutorial -sitemap: false --- Learn the first steps to building a Flutter app, from creating a project to understanding widgets and hot reload. diff --git a/src/content/learn/tutorial/devtools.md b/src/content/learn/pathway/tutorial/devtools.md similarity index 99% rename from src/content/learn/tutorial/devtools.md rename to src/content/learn/pathway/tutorial/devtools.md index 930b003f7cc..b28bf97f3e9 100644 --- a/src/content/learn/tutorial/devtools.md +++ b/src/content/learn/pathway/tutorial/devtools.md @@ -2,7 +2,6 @@ title: DevTools description: Learn to use the Dart DevTools when developing Flutter apps. layout: tutorial -sitemap: false --- Learn to use the widget inspector and property editor to debug layout issues and experiment with properties in real-time. diff --git a/src/content/learn/tutorial/http-requests.md b/src/content/learn/pathway/tutorial/http-requests.md similarity index 99% rename from src/content/learn/tutorial/http-requests.md rename to src/content/learn/pathway/tutorial/http-requests.md index a7449a01246..31bc4c85940 100644 --- a/src/content/learn/tutorial/http-requests.md +++ b/src/content/learn/pathway/tutorial/http-requests.md @@ -2,7 +2,6 @@ title: Fetch data from the internet description: Instructions on how to make HTTP requests and parse responses. layout: tutorial -sitemap: false --- Learn the MVVM architecture pattern and how to build HTTP requests with async/await. diff --git a/src/content/learn/tutorial/implicit-animations.md b/src/content/learn/pathway/tutorial/implicit-animations.md similarity index 99% rename from src/content/learn/tutorial/implicit-animations.md rename to src/content/learn/pathway/tutorial/implicit-animations.md index ec5852ff141..5c37fac77a7 100644 --- a/src/content/learn/tutorial/implicit-animations.md +++ b/src/content/learn/pathway/tutorial/implicit-animations.md @@ -2,7 +2,6 @@ title: Simple animations description: Learn the simplest way to implement animations in Flutter. layout: tutorial -sitemap: false --- Flutter provides a rich set of animation APIs, and the simplest way to diff --git a/src/content/learn/tutorial/index.md b/src/content/learn/pathway/tutorial/index.md similarity index 89% rename from src/content/learn/tutorial/index.md rename to src/content/learn/pathway/tutorial/index.md index 47eb3dd100d..7fb928bd3b7 100644 --- a/src/content/learn/tutorial/index.md +++ b/src/content/learn/pathway/tutorial/index.md @@ -5,7 +5,6 @@ description: >- Learn how to use Flutter to build pixel-perfect applications from scratch that run on mobile, desktop, and web. layout: tutorial -sitemap: false ---
@@ -36,4 +35,4 @@ If either of those aren't true, please start at the [Learning pathway page](/lea -Start learning +Start learning diff --git a/src/content/learn/tutorial/layout.md b/src/content/learn/pathway/tutorial/layout.md similarity index 99% rename from src/content/learn/tutorial/layout.md rename to src/content/learn/pathway/tutorial/layout.md index 273ec5537ca..9cfcea29c6d 100644 --- a/src/content/learn/tutorial/layout.md +++ b/src/content/learn/pathway/tutorial/layout.md @@ -2,7 +2,6 @@ title: Layout description: Learn about common layout widgets in Flutter. layout: tutorial -sitemap: false --- Learn how to build layouts with common widgets like Scaffold, AppBar, Column, and Row. diff --git a/src/content/learn/tutorial/listenable-builder.md b/src/content/learn/pathway/tutorial/listenable-builder.md similarity index 99% rename from src/content/learn/tutorial/listenable-builder.md rename to src/content/learn/pathway/tutorial/listenable-builder.md index 5f1d11a87f1..310bd472517 100644 --- a/src/content/learn/tutorial/listenable-builder.md +++ b/src/content/learn/pathway/tutorial/listenable-builder.md @@ -2,7 +2,6 @@ title: Rebuild UI when state changes description: Instructions on how to manage state with ChangeNotifiers. layout: tutorial -sitemap: false --- Learn to use ListenableBuilder to automatically rebuild UI and handle all possible states with switch expressions. diff --git a/src/content/learn/tutorial/navigation.md b/src/content/learn/pathway/tutorial/navigation.md similarity index 99% rename from src/content/learn/tutorial/navigation.md rename to src/content/learn/pathway/tutorial/navigation.md index d6730370fef..7055fa4f4e7 100644 --- a/src/content/learn/tutorial/navigation.md +++ b/src/content/learn/pathway/tutorial/navigation.md @@ -2,7 +2,6 @@ title: Stack-based navigation description: Learn how to navigate from one page to another in a Flutter app. layout: tutorial -sitemap: false --- Learn to navigate between screens with Navigator.push and implement adaptive navigation patterns for different screen sizes. diff --git a/src/content/learn/tutorial/set-up-state-project.md b/src/content/learn/pathway/tutorial/set-up-state-project.md similarity index 99% rename from src/content/learn/tutorial/set-up-state-project.md rename to src/content/learn/pathway/tutorial/set-up-state-project.md index 10d45a47e1d..93e39ba4d2d 100644 --- a/src/content/learn/tutorial/set-up-state-project.md +++ b/src/content/learn/pathway/tutorial/set-up-state-project.md @@ -2,7 +2,6 @@ title: Set up your project description: Instructions on how to create a new Flutter app. layout: tutorial -sitemap: false --- Preview the Wikipedia reader app you'll build and set up the initial project with required packages. @@ -55,7 +54,7 @@ free and accessible to everyone. [Wikipedia API]: https://en.wikipedia.org/api/rest_v1/ [Getting started with Dart]: {{site.dart-site}}/learn/tutorial -[Introduction to Flutter UI]: /learn/tutorial/create-an-app +[Introduction to Flutter UI]: /learn/pathway/tutorial/create-an-app [Wikipedia]: https://wikipedia.org/ [donating to Wikipedia]: https://donate.wikimedia.org/ diff --git a/src/content/learn/tutorial/slivers.md b/src/content/learn/pathway/tutorial/slivers.md similarity index 99% rename from src/content/learn/tutorial/slivers.md rename to src/content/learn/pathway/tutorial/slivers.md index a3a331611cd..28a705048d3 100644 --- a/src/content/learn/tutorial/slivers.md +++ b/src/content/learn/pathway/tutorial/slivers.md @@ -2,7 +2,6 @@ title: Advanced scrolling and slivers description: Learn how to implement performant scrolling with slivers. layout: tutorial -sitemap: false --- In this lesson, you'll learn about slivers, diff --git a/src/content/learn/tutorial/stateful-widget.md b/src/content/learn/pathway/tutorial/stateful-widget.md similarity index 99% rename from src/content/learn/tutorial/stateful-widget.md rename to src/content/learn/pathway/tutorial/stateful-widget.md index 55a125ea3f7..cf9bcf0a434 100644 --- a/src/content/learn/tutorial/stateful-widget.md +++ b/src/content/learn/pathway/tutorial/stateful-widget.md @@ -2,7 +2,6 @@ title: Stateful widgets description: Learn about StatefulWidgets and rebuilding Flutter UI. layout: tutorial -sitemap: false --- Learn when widgets need to be stateful and how to trigger UI updates with setState. diff --git a/src/content/learn/tutorial/user-input.md b/src/content/learn/pathway/tutorial/user-input.md similarity index 99% rename from src/content/learn/tutorial/user-input.md rename to src/content/learn/pathway/tutorial/user-input.md index a07a880ab30..495605a678d 100644 --- a/src/content/learn/tutorial/user-input.md +++ b/src/content/learn/pathway/tutorial/user-input.md @@ -2,7 +2,6 @@ title: User input description: Accept input from the user with buttons and text fields. layout: tutorial -sitemap: false --- Learn to build text inputs, manage text with controllers, and handle user actions with buttons. diff --git a/src/content/learn/tutorial/widget-fundamentals.md b/src/content/learn/pathway/tutorial/widget-fundamentals.md similarity index 99% rename from src/content/learn/tutorial/widget-fundamentals.md rename to src/content/learn/pathway/tutorial/widget-fundamentals.md index d046fcf6ad2..a425d2adc32 100644 --- a/src/content/learn/tutorial/widget-fundamentals.md +++ b/src/content/learn/pathway/tutorial/widget-fundamentals.md @@ -2,7 +2,6 @@ title: Create widgets description: Learn about stateless widgets and how to build your own. layout: tutorial -sitemap: false --- Learn to create custom widgets and use the most common SDK widgets like diff --git a/src/content/release/archive-whats-new.md b/src/content/release/archive-whats-new.md index 242be8e7441..c091aba2d01 100644 --- a/src/content/release/archive-whats-new.md +++ b/src/content/release/archive-whats-new.md @@ -260,11 +260,11 @@ This website release includes several important updates! [Embedding Flutter on the web]: /platform-integration/web/embedding-flutter-web [Embedding web content into a Flutter app]: /platform-integration/web/web-content-in-flutter [Flutter fundamentals docs]: /learn/pathway -[Widgets]: /learn/tutorial/widget-fundamentals +[Widgets]: /learn/pathway/tutorial/widget-fundamentals [iOS app extension]: /platform-integration/ios/app-extensions [iOS plugins]: /packages-and-plugins/swift-package-manager/for-plugin-authors [iOS apps]: /packages-and-plugins/swift-package-manager/for-app-developers -[Layout]: /learn/tutorial/layout +[Layout]: /learn/pathway/tutorial/layout [predictive back gesture]: /platform-integration/android/predictive-back [Tinted app icons]: /deployment/ios#add-an-app-icon diff --git a/src/content/tools/property-editor.md b/src/content/tools/property-editor.md index 620fa2c66c7..2a24b91f434 100644 --- a/src/content/tools/property-editor.md +++ b/src/content/tools/property-editor.md @@ -48,7 +48,7 @@ UI development and iteration. [VS Code]: /tools/vs-code#property-editor [Android Studio/IntelliJ]: /tools/android-studio#property-editor -[widget constructor invocation]: /learn/tutorial/widget-fundamentals +[widget constructor invocation]: /learn/pathway/tutorial/widget-fundamentals ### Runtime usage diff --git a/src/data/glossary.yml b/src/data/glossary.yml index c87df527633..1b0c0529751 100644 --- a/src/data/glossary.yml +++ b/src/data/glossary.yml @@ -326,7 +326,7 @@ [state]: https://api.flutter.dev/flutter/widgets/State-class.html related_links: - text: "Widget fundamentals" - link: "/learn/tutorial/widget-fundamentals" + link: "/learn/pathway/tutorial/widget-fundamentals" type: "doc" - text: "Widget catalog" link: "/ui/widgets" diff --git a/src/data/sidenav.yml b/src/data/sidenav/default.yml similarity index 92% rename from src/data/sidenav.yml rename to src/data/sidenav/default.yml index e69328f508f..9dfc17b4c68 100644 --- a/src/data/sidenav.yml +++ b/src/data/sidenav/default.yml @@ -1,202 +1,11 @@ -- header: Get started +- header: Install Flutter -- title: Install Flutter - icon: build - children: - - title: Start here - permalink: /install - - title: Quick start - permalink: /install/quick - - title: Custom setup - permalink: /install/custom - - divider - - title: SDK archive - permalink: /install/archive - - title: Manage install - children: - - title: Upgrade SDK - permalink: /install/upgrade - - title: Add to path - permalink: /install/add-to-path - - title: Troubleshoot - permalink: /install/troubleshoot - - title: Uninstall SDK - permalink: /install/uninstall - -- title: Learn Flutter - icon: school - children: - - title: Overview - permalink: /learn - - title: Learning pathway - permalink: /learn/pathway - - title: All learning resources - permalink: /reference/learning-resources - -- title: Stay up to date - permalink: /release - icon: update - children: - - title: Release notes - permalink: /release/release-notes - - title: Breaking changes - permalink: /release/breaking-changes - - title: Compatibility policy - permalink: /release/compatibility-policy - - divider - - title: Flutter blog - permalink: https://blog.flutter.dev - - title: What's new in the docs - permalink: /release/whats-new - -- divider -- header: Guides - -- title: App solutions - icon: apps - children: - - title: Develop with Firebase - children: - - title: Overview - permalink: /data-and-backend/firebase - - title: Discover Firebase for Flutter - permalink: https://firebase.google.com/docs/flutter - - title: Get to know Firebase for Flutter - permalink: https://www.youtube.com/watch?v=wUSkeTaBonA - - title: Add a user authentication flow to a Flutter app using FirebaseUI - permalink: https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps - - title: Get to know Firebase for web - permalink: https://firebase.google.com/codelabs/firebase-get-to-know-web - - title: Build multi-platform games - children: - - title: Overview - permalink: /resources/games-toolkit - - title: Add achievements and leaderboards - permalink: /cookbook/games/achievements-leaderboard - - title: Build leaderboards with Firestore - permalink: https://firebase.google.com/codelabs/build-leaderboards-with-firestore#0 - - title: Add advertising - permalink: /cookbook/plugins/google-mobile-ads - - title: Add multiplayer support - permalink: /cookbook/games/firestore-multiplayer - - title: Add in-app purchases - permalink: https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases - - title: Add user authentication - permalink: https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps - - title: Debug using Crashlytics - permalink: https://firebase.google.com/docs/crashlytics/get-started?platform=flutter - - title: Intro to Flame with Flutter - permalink: https://codelabs.developers.google.com/codelabs/flutter-flame-brick-breaker - - title: Monetize your app - children: - - title: Integrate ads - children: - - title: Ads overview - permalink: /resources/ads-overview - - title: Add advertising - permalink: /cookbook/plugins/google-mobile-ads - - title: Add AdMob ads to your Flutter app - permalink: https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter - - title: Add an AdMob banner and native inline ads - permalink: https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter - - title: Integrate multimedia ads (video) - permalink: https://www.youtube.com/watch?v=U8x5n6RwZOo - - title: Google AdMob mediation - permalink: https://developers.google.com/admob/flutter/mediation - - title: Interactive Media Ads SDK - permalink: https://pub.dev/packages/interactive_media_ads - - title: Support payments - children: - - title: Payments overview - permalink: /resources/payments-overview - - title: Google pay package - permalink: https://pub.dev/packages/pay - - title: Add in-app purchases - permalink: https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases - - title: Integrate maps - children: - - title: Add Google maps to a Flutter app - permalink: https://codelabs.developers.google.com/codelabs/google-maps-in-flutter - - title: Google Maps package - permalink: https://developers.google.com/maps/flutter-package - -- title: AI solutions - permalink: /ai - icon: smart_toy - children: - - title: Create with AI - permalink: /ai/create-with-ai - - title: Rules for AI - permalink: /ai/ai-rules - - title: AI best practices - permalink: /ai/best-practices - children: - - title: Overview - permalink: /ai/best-practices - - title: Prompting - permalink: /ai/best-practices/prompting - - title: Structure & output - permalink: /ai/best-practices/structure-output - - title: Tool calls (aka function calls) - permalink: /ai/best-practices/tool-calls - - title: Mode of interaction - permalink: /ai/best-practices/mode-of-interaction - - title: Developer experience - permalink: /ai/best-practices/developer-experience - - title: AI Toolkit - permalink: /ai/ai-toolkit - children: - - title: Overview - permalink: /ai/ai-toolkit - - title: User experience - permalink: /ai/ai-toolkit/user-experience - - title: Feature integration - permalink: /ai/ai-toolkit/feature-integration - - title: Custom LLM providers - permalink: /ai/ai-toolkit/custom-llm-providers - - title: Chat client sample - permalink: /ai/ai-toolkit/chat-client-sample - - title: GenUI SDK for Flutter - permalink: /ai/genui - children: - - title: Overview - permalink: /ai/genui - - title: Main components & concepts - permalink: /ai/genui/components - - title: Get started - permalink: /ai/genui/get-started - - title: Input and events - permalink: /ai/genui/input-events - - title: Dart & Flutter MCP server - permalink: /ai/mcp-server - - title: Flutter extension for Gemini CLI - permalink: /ai/gemini-cli-extension - - title: Firebase AI Logic - permalink: https://firebase.google.com/docs/ai-logic/get-started?platform=flutter - - -- title: From another platform? - icon: devices - permalink: /flutter-for - children: - - title: Flutter for Android devs - permalink: /flutter-for/android-devs - - title: Flutter for Jetpack Compose devs - permalink: /flutter-for/compose-devs - - title: Flutter for SwiftUI devs - permalink: /flutter-for/swiftui-devs - - title: Flutter for UIKit devs - permalink: /flutter-for/uikit-devs - - title: Flutter for React Native devs - permalink: /flutter-for/react-native-devs - - title: Flutter for web devs - permalink: /flutter-for/web-devs - - title: Flutter for Xamarin.Forms devs - permalink: /flutter-for/xamarin-forms-devs - - title: Introduction to declarative UI - permalink: /flutter-for/declarative - - title: Flutter versus Swift concurrency - permalink: /flutter-for/dart-swift-concurrency +- title: Start here + permalink: /install +- title: Quick start + permalink: /install/quick +- title: Custom setup + permalink: /install/custom - divider - header: User interface @@ -816,6 +625,8 @@ - divider +- header: Resources + - title: Tools & editors permalink: /tools icon: construction @@ -888,6 +699,182 @@ - title: Hot reload permalink: /tools/hot-reload +- title: App solutions + icon: apps + children: + - title: Develop with Firebase + children: + - title: Overview + permalink: /data-and-backend/firebase + - title: Discover Firebase for Flutter + permalink: https://firebase.google.com/docs/flutter + - title: Get to know Firebase for Flutter + permalink: https://www.youtube.com/watch?v=wUSkeTaBonA + - title: Add a user authentication flow to a Flutter app using FirebaseUI + permalink: https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps + - title: Get to know Firebase for web + permalink: https://firebase.google.com/codelabs/firebase-get-to-know-web + - title: Build multi-platform games + children: + - title: Overview + permalink: /resources/games-toolkit + - title: Add achievements and leaderboards + permalink: /cookbook/games/achievements-leaderboard + - title: Build leaderboards with Firestore + permalink: https://firebase.google.com/codelabs/build-leaderboards-with-firestore#0 + - title: Add advertising + permalink: /cookbook/plugins/google-mobile-ads + - title: Add multiplayer support + permalink: /cookbook/games/firestore-multiplayer + - title: Add in-app purchases + permalink: https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases + - title: Add user authentication + permalink: https://firebase.google.com/codelabs/firebase-auth-in-flutter-apps + - title: Debug using Crashlytics + permalink: https://firebase.google.com/docs/crashlytics/get-started?platform=flutter + - title: Intro to Flame with Flutter + permalink: https://codelabs.developers.google.com/codelabs/flutter-flame-brick-breaker + - title: Monetize your app + children: + - title: Integrate ads + children: + - title: Ads overview + permalink: /resources/ads-overview + - title: Add advertising + permalink: /cookbook/plugins/google-mobile-ads + - title: Add AdMob ads to your Flutter app + permalink: https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter + - title: Add an AdMob banner and native inline ads + permalink: https://codelabs.developers.google.com/codelabs/admob-inline-ads-in-flutter + - title: Integrate multimedia ads (video) + permalink: https://www.youtube.com/watch?v=U8x5n6RwZOo + - title: Google AdMob mediation + permalink: https://developers.google.com/admob/flutter/mediation + - title: Interactive Media Ads SDK + permalink: https://pub.dev/packages/interactive_media_ads + - title: Support payments + children: + - title: Payments overview + permalink: /resources/payments-overview + - title: Google pay package + permalink: https://pub.dev/packages/pay + - title: Add in-app purchases + permalink: https://codelabs.developers.google.com/codelabs/flutter-in-app-purchases + - title: Integrate maps + children: + - title: Add Google maps to a Flutter app + permalink: https://codelabs.developers.google.com/codelabs/google-maps-in-flutter + - title: Google Maps package + permalink: https://developers.google.com/maps/flutter-package + - title: AI solutions + permalink: /ai + icon: smart_toy + children: + - title: Create with AI + permalink: /ai/create-with-ai + - title: Rules for AI + permalink: /ai/ai-rules + - title: AI best practices + permalink: /ai/best-practices + children: + - title: Overview + permalink: /ai/best-practices + - title: Prompting + permalink: /ai/best-practices/prompting + - title: Structure & output + permalink: /ai/best-practices/structure-output + - title: Tool calls (aka function calls) + permalink: /ai/best-practices/tool-calls + - title: Mode of interaction + permalink: /ai/best-practices/mode-of-interaction + - title: Developer experience + permalink: /ai/best-practices/developer-experience + - title: AI Toolkit + permalink: /ai/ai-toolkit + children: + - title: Overview + permalink: /ai/ai-toolkit + - title: User experience + permalink: /ai/ai-toolkit/user-experience + - title: Feature integration + permalink: /ai/ai-toolkit/feature-integration + - title: Custom LLM providers + permalink: /ai/ai-toolkit/custom-llm-providers + - title: Chat client sample + permalink: /ai/ai-toolkit/chat-client-sample + - title: GenUI SDK for Flutter + permalink: /ai/genui + children: + - title: Overview + permalink: /ai/genui + - title: Main components & concepts + permalink: /ai/genui/components + - title: Get started + permalink: /ai/genui/get-started + - title: Input and events + permalink: /ai/genui/input-events + - title: Dart & Flutter MCP server + permalink: /ai/mcp-server + - title: Flutter extension for Gemini CLI + permalink: /ai/gemini-cli-extension + - title: Firebase AI Logic + permalink: https://firebase.google.com/docs/ai-logic/get-started?platform=flutter + + +- title: From another platform? + icon: devices + permalink: /flutter-for + children: + - title: Flutter for Android devs + permalink: /flutter-for/android-devs + - title: Flutter for Jetpack Compose devs + permalink: /flutter-for/compose-devs + - title: Flutter for SwiftUI devs + permalink: /flutter-for/swiftui-devs + - title: Flutter for UIKit devs + permalink: /flutter-for/uikit-devs + - title: Flutter for React Native devs + permalink: /flutter-for/react-native-devs + - title: Flutter for web devs + permalink: /flutter-for/web-devs + - title: Flutter for Xamarin.Forms devs + permalink: /flutter-for/xamarin-forms-devs + - title: Introduction to declarative UI + permalink: /flutter-for/declarative + - title: Flutter versus Swift concurrency + permalink: /flutter-for/dart-swift-concurrency + +- title: Stay up to date + permalink: /release + icon: update + children: + - title: Release notes + permalink: /release/release-notes + - title: Breaking changes + permalink: /release/breaking-changes + - title: Compatibility policy + permalink: /release/compatibility-policy + - divider + - title: Flutter blog + permalink: https://blog.flutter.dev + - title: What's new in the docs + permalink: /release/whats-new + +- title: Manage install + icon: computer + children: + - title: SDK archive + permalink: /install/archive + - title: Upgrade SDK + permalink: /install/upgrade + - title: Add to path + permalink: /install/add-to-path + - title: Troubleshoot + permalink: /install/troubleshoot + - title: Uninstall SDK + permalink: /install/uninstall + + - title: Resources permalink: /resources icon: library_books @@ -923,4 +910,4 @@ - title: flutter CLI permalink: /reference/flutter-cli - title: API docs - permalink: https://api.flutter.dev + permalink: https://api.flutter.dev \ No newline at end of file diff --git a/src/data/sidenav/learn.yml b/src/data/sidenav/learn.yml new file mode 100644 index 00000000000..e5bd78dfcbc --- /dev/null +++ b/src/data/sidenav/learn.yml @@ -0,0 +1,18 @@ +- title: Getting started course + permalink: /learn/pathway + expanded: true + icon: school + children: + - title: Overview + permalink: /learn/pathway + - title: Install Flutter + permalink: /learn/pathway/quick-install + - title: Dart getting started + permalink: https://dart.dev/learn + - title: Flutter getting started + permalink: /learn/pathway/tutorial + - title: How Flutter Works + permalink: /learn/pathway/how-flutter-works +- title: More resources + permalink: /learn/learning-resources + icon: more diff --git a/src/data/tutorial.yml b/src/data/tutorial.yml index d4175e0c342..03cb08f40ef 100644 --- a/src/data/tutorial.yml +++ b/src/data/tutorial.yml @@ -1,39 +1,47 @@ -title: Learn Flutter -url: /learn/tutorial +title: Getting started course +url: /learn/pathway units: + - title: Quick install + chapters: + - title: Install Flutter + url: /learn/pathway/quick-install - title: Introduction to Flutter UI chapters: - title: Create a Flutter app - url: /learn/tutorial/create-an-app + url: /learn/pathway/tutorial/create-an-app - title: Widget fundamentals - url: /learn/tutorial/widget-fundamentals + url: /learn/pathway/tutorial/widget-fundamentals - title: Layout widgets on a screen - url: /learn/tutorial/layout + url: /learn/pathway/tutorial/layout - title: DevTools - url: /learn/tutorial/devtools + url: /learn/pathway/tutorial/devtools - title: Handle user input - url: /learn/tutorial/user-input + url: /learn/pathway/tutorial/user-input - title: Learn about stateful widgets - url: /learn/tutorial/stateful-widget + url: /learn/pathway/tutorial/stateful-widget - title: Add implicit animations - url: /learn/tutorial/implicit-animations + url: /learn/pathway/tutorial/implicit-animations - title: State in Flutter apps chapters: - title: The state management project - url: /learn/tutorial/set-up-state-project + url: /learn/pathway/tutorial/set-up-state-project - title: Make Http Requests - url: /learn/tutorial/http-requests + url: /learn/pathway/tutorial/http-requests - title: Use `ChangeNotifier` to update app state - url: /learn/tutorial/change-notifier + url: /learn/pathway/tutorial/change-notifier - title: Use `ListenableBuilder` to update app UI - url: /learn/tutorial/listenable-builder + url: /learn/pathway/tutorial/listenable-builder - title: Flutter UI 102 chapters: - title: Advanced UI features - url: /learn/tutorial/advanced-ui + url: /learn/pathway/tutorial/advanced-ui - title: Adaptive layouts - url: /learn/tutorial/adaptive-layout + url: /learn/pathway/tutorial/adaptive-layout - title: Scrolling and slivers - url: /learn/tutorial/slivers + url: /learn/pathway/tutorial/slivers - title: Stack based navigation - url: /learn/tutorial/navigation + url: /learn/pathway/tutorial/navigation + - title: How Flutter works + chapters: + - title: How Flutter works + url: /learn/pathway/how-flutter-works