diff --git a/src/_data/sidenav.yml b/src/_data/sidenav.yml index b1a06bb97e..0557b20bcd 100644 --- a/src/_data/sidenav.yml +++ b/src/_data/sidenav.yml @@ -864,6 +864,8 @@ permalink: /dash - title: Widget index permalink: /reference/widgets + - title: Create a new app + permalink: /reference/create-new-app - title: flutter CLI permalink: /reference/flutter-cli - title: API docs diff --git a/src/_sass/base/_base.scss b/src/_sass/base/_base.scss index 8b7fa17cba..f37ad5dfb8 100644 --- a/src/_sass/base/_base.scss +++ b/src/_sass/base/_base.scss @@ -289,6 +289,77 @@ details { } } +ol.steps { + position: relative; + list-style: none; + counter-reset: steps; + padding-inline-start: 2.5rem; + margin-block-end: 1rem; + + $step-indicator-height: 1.75rem; + + li { + position: relative; + counter-increment: steps; + + > h3:first-child { + display: flex; + align-items: center; + height: $step-indicator-height; + font-size: 1.125rem; + font-weight: 500; + color: $site-color-body-light; + margin-block-end: 0.5rem; + } + + > * { + &:first-child { + margin-block-start: 0; + } + + &:last-child { + margin-block-end: 0; + } + } + + &:not(:last-child) { + padding-block-end: 0.75rem; + + &:after { + position: absolute; + display: block; + content: ''; + top: 0; + left: calc($step-indicator-height / 2 - 2.5rem - 1px); + width: 2px; + height: 100%; + background-color: $sidenav-divider-color; + } + } + + &:before { + display: flex; + align-items: center; + justify-content: center; + + font-family: $site-font-family-ui; + content: counter(steps); + user-select: none; + z-index: 10; + + position: absolute; + left: -2.5rem; + + height: $step-indicator-height; + width: $step-indicator-height; + background-color: $sidenav-divider-color; + color: $site-color-body-light; + font-weight: 500; + border-radius: 100%; + } + } +} + main { ol + img, ul + img, ol + p, ul + p, p + p + img, article li:not(.toc-entry, .breadcrumb-item, .nav-item):last-child, diff --git a/src/_sass/components/_card.scss b/src/_sass/components/_card.scss index e592a78992..e13727c83a 100644 --- a/src/_sass/components/_card.scss +++ b/src/_sass/components/_card.scss @@ -91,6 +91,10 @@ margin: 0; margin-block-end: 0.75rem; + &:last-child { + margin-block-end: 0.25rem; + } + code { font-size: 0.95em; background-color: rgba(0, 0, 0, .05); diff --git a/src/_sass/components/_content.scss b/src/_sass/components/_content.scss index e627fc9667..66baeb8c6e 100644 --- a/src/_sass/components/_content.scss +++ b/src/_sass/components/_content.scss @@ -16,6 +16,7 @@ article { min-width: 8rem; max-width: $site-content-max-width; + min-height: calc(100vh - $site-header-height - $site-inline-toc-height); padding: 2rem; img { diff --git a/src/content/assets/js/main.js b/src/content/assets/js/main.js index e7023fffec..9fb4b6c5b1 100644 --- a/src/content/assets/js/main.js +++ b/src/content/assets/js/main.js @@ -411,6 +411,15 @@ function setupFeedback() { }, { once: true }); } +function setupPlatformKeys() { + const os = getOS(); + const specialKey = os === 'macos' ? 'Command' : 'Control'; + document.querySelectorAll('kbd.special-key') + .forEach(function (element) { + element.textContent = specialKey; + }); +} + function setupSite() { scrollSidenavIntoView(); initCookieNotice(); @@ -423,6 +432,7 @@ function setupSite() { setupTabs(); setupToc(); + setupPlatformKeys(); setupFeedback(); } diff --git a/src/content/reference/create-new-app.md b/src/content/reference/create-new-app.md new file mode 100644 index 0000000000..07d4b74809 --- /dev/null +++ b/src/content/reference/create-new-app.md @@ -0,0 +1,435 @@ +--- +title: Create a new Flutter app +short-title: Create a new app +description: >- + Learn how to bootstrap a new Flutter application from + your command-line, different editors, and even in the cloud. +--- + +This page provides step-by-step instructions on how to +bootstrap a new Flutter app in your preferred development environment. + +To create a new Flutter app, first [set up Flutter][flutter-setup], then +choose your preferred environment and follow the corresponding instructions. + +
+ +
+
VS Code
+
+
+

Create a new Flutter app without leaving VS Code.

+
+ + +
+
Android Studio
+
+
+

Create a new Flutter app without leaving Android Studio.

+
+ + +
+
IntelliJ
+
+
+

Create a new Flutter app without leaving your IntelliJ-based IDE.

+
+ + +
+
Project IDX
+
+
+

For quick and easy setup, create a new Flutter app in Project IDX.

+
+ + +
+
Terminal
+
+
+

For maximum flexibility, create a new Flutter app from the command line.

+
+ + +
+
+ Add to app + +
+
+
+

Create a new Flutter module to embed in an existing app.

+
+ +
+ +## VS Code + +To create a Flutter app with [VS Code][] and other Code OSS editors, +you first need to [install Flutter][flutter-setup] and +[set up VS Code][vscode-setup] for Flutter development. +Then follow these steps: + + 1.

Launch VS Code

+ + Open VS Code or your preferred Code OSS editor. + + 1.

Open the command palette

+ + Go to **View** > **Command Palette** or + press Cmd/Ctrl + + Shift + P. + + 1.

Find the Flutter commands

+ + In the command palette, start typing `flutter:`. + VS Code should surface commands from the Flutter plugin. + + 1.

Run the new project command

+ + Select the **Flutter: New Project** command. + Your OS or VS Code might ask for access to your documents, + agree to continue to the next step. + + 1.

Choose a template

+ + VS Code should prompt you with **Which Flutter template?**. + Depending on what type of Flutter project you want to create, + choose the corresponding template. + For a new Flutter app, choose **Application**. + + 1.

Select a project location

+ + A file dialog will appear. + Select or create the parent directory where the project will be created. + Do not create the project folder itself, the Flutter tool will do so. + To confirm your selection, + click **Select a folder to create the project in**. + + 1.

Enter a project name

+ + VS Code should prompt you to enter a name for your new project. + Enter a name for your app that follows the `lowercase_with_underscores` + naming convention, following the [Effective Dart][package-name] guidelines. + To confirm your selection, press Enter. + + 1.

Wait for project initialization

+ + Based on the information you entered, + VS Code will use `flutter create` to bootstrap your application. + Progress is often surfaced as a notification in the bottom right + and can also be accessed from the **Output** panel. + + 1.

Run your app

+ + Your new app should now be created and open in VS Code. + To try your new app, + follow the steps to [run and debug][vscode-run] in VS Code. + +{:.steps} + +You've successfully created a new Flutter app in VS Code! +If you need more help with developing Flutter in VS Code, +check out the [VS Code for Flutter reference][vscode-more]. + +[VS Code]: https://code.visualstudio.com/ +[vscode-setup]: /tools/vs-code#installation-and-setup +[vscode-run]: /tools/vs-code#running-and-debugging +[vscode-more]: /tools/vs-code + +## Android Studio + +To create a Flutter app with Android Studio, +you first need to [install Flutter][flutter-setup] and +[set up Android Studio][as-setup] for Flutter development. +Then follow these steps: + + 1.

Launch Android Studio

+ + Open Android Studio with the Dart and Flutter plugins installed. + + 1.

Begin project creation

+ + If you're on the IDE welcome dialog that says **Welcome to Android Studio**, + find and click the **New Flutter Project** button in the center. + + If you already have a project open, either close it or + go to **File** > **New** + > **New Flutter Project...**. + + 1.

Choose a project type

+ + In the **New Project** dialog, under **Generators** in the left panel, + select **Flutter**. + + 1.

Verify Flutter SDK setup

+ + At the top of the right panel, ensure the **Flutter SDK path** value matches + the location of the Flutter SDK you'd like to develop with. + If not, update it by choosing or specifying the correct one. + + 1.

Configure your project

+ + Click **Next** to continue to project configuration. + Multiple configuration options should appear. + + In the **Project name** field, enter a name for your app that + follows the `lowercase_with_underscores` naming convention, + following the [Effective Dart][package-name] guidelines. + + If you're not creating an application, + select another template from the **Project type** dropdown. + + If you're creating an app that you might publish in the future, + set the **Organization** field [to your company domain][as-set-org]. + + The other fields can be kept as is or + configured according to your project's needs. + + 1.

Finish project creation

+ + Once you've completed the configuration of your project, + click **Create** to begin project initialization. + + 1.

Wait for workspace initialization

+ + Android Studio will now initialize your workspace, + bootstrap your project file structure, + and retrieve your app's dependencies. + This might take a while and can be tracked at the bottom of the window. + + 1.

Run your app

+ + Your new app should now be created and open in Android Studio. + To try your new app, + follow the steps to [run and debug][as-run] in Android Studio. + +{:.steps} + +You've successfully created a new Flutter app in Android Studio! +If you need more help with developing Flutter in Android Studio, +check out the [Android Studio for Flutter reference][as-more]. + +[as-setup]: /tools/android-studio#installation-and-setup +[as-set-org]: /tools/android-studio#set-the-company-domain +[as-run]: /tools/android-studio#running-and-debugging +[as-more]: /tools/android-studio + +## IntelliJ + +To create a Flutter app with IntelliJ or other JetBrains IDEs, +you first need to [install Flutter][flutter-setup] and +[set up IntelliJ][ij-setup] for Flutter development. +Then follow these steps: + + 1.

Launch IntelliJ

+ + Open IntelliJ IDEA or your preferred IntelliJ-based IDE by JetBrains + that has the Dart and Flutter plugins installed. + + 1.

Begin project creation

+ + If you're on the IDE welcome dialog that says **Welcome to IntelliJ IDEA**, + find and click the **New Project** button in the upper right corner. + + If you already have a project open, either close it or + go to **File** > **New** + > **New Project...**. + + 1.

Choose a project type

+ + In the **New Project** dialog, under **Generators** in the left panel, + select **Flutter**. + + 1.

Verify Flutter SDK setup

+ + At the top of the right panel, ensure the **Flutter SDK path** value matches + the location of the Flutter SDK you'd like to develop with. + If not, update it by choosing or specifying the correct one. + + 1.

Configure your project

+ + Click **Next** to continue to project configuration. + Multiple configuration options should appear. + + In the **Project name** field, enter a name for your app that + follows the `lowercase_with_underscores` naming convention, + following the [Effective Dart][package-name] guidelines. + + If you're not creating an application, + select another template from the **Project type** dropdown. + + If you're creating an app that you might publish in the future, + set the **Organization** field [to your company domain][ij-set-org]. + + The other fields can be kept as is or + configured according to your project's needs. + + 1.

Finish project creation

+ + Once you've completed the configuration of your project, + click **Create** to begin project initialization. + + 1.

Wait for workspace initialization

+ + IntelliJ will now initialize your workspace, + bootstrap your project file structure, + and retrieve your app's dependencies. + This might take a while and can be tracked at the bottom of the window. + + 1.

Run your app

+ + Your new app should now be created and open in IntelliJ. + To try your new app, + follow the steps to [run and debug][ij-run] in IntelliJ. + +{:.steps} + +You've successfully created a new Flutter app in IntelliJ! +If you need more help with developing Flutter in IntelliJ, +check out the [IntelliJ for Flutter reference][ij-more]. + +[ij-setup]: /tools/android-studio#installation-and-setup +[ij-more]: /tools/android-studio +[ij-run]: /tools/android-studio#running-and-debugging + +## Project IDX + +To create a Flutter app with [Project IDX][idx], +you first need a Google account and to [set up IDX][idx-setup]. +Then follow these steps: + + 1.

Launch Project IDX

+ + In your preferred browser, navigate to the [IDX dashboard][] + found at `idx.google.com`. + If you haven't yet, you might need to log in to your Google account. + + 1.

Create a new workspace

+ + In the IDX dashboard, find the **New workspace** card. + It should include a variety of templates to choose from. + Select the **Flutter** template. + If you can't find it, it might be under the **Mobile** category. + + 1.

Name your workspace

+ + IDX should prompt you to **Name your workspace**. + This name is distinct from the name of your Flutter app. + Choose a descriptive name that you'll recognize + in a list of your IDX workspaces. + + 1.

Provision your new workspace

+ + Once you've chosen a name and configured your workspace, + click **Create** to provision your new workspace. + + 1.

Wait for workspace initialization

+ + IDX will now initialize your workspace, + bootstrap your project file structure, + and retrieve your app's dependencies. + This might take a while. + +1.

Run your app

+ + Your new app should now be created and open in IDX. + To try your new app, follow the docs provided by Project IDX to + [preview your app][idx-preview] on the web or on Android. + +{:.steps} + +You've successfully created a new Flutter app in Project IDX! +If you need help configuring your workspace, +check out [Customize your IDX workspace][]. + +[idx]: https://idx.dev/ +[IDX dashboard]: https://idx.google.com/ +[idx-setup]: https://developers.google.com/idx/guides/get-started +[idx-preview]: https://developers.google.com/idx/guides/preview-apps +[Customize your IDX workspace]: https://developers.google.com/idx/guides/customize-idx-env + +## Terminal + +To create a Flutter app in your terminal, +you first need to install and [set up Flutter][flutter-setup]. +Then follow these steps: + + 1.

Open your terminal

+ + Open your preferred method to access the command line, + such as Terminal on macOS or PowerShell on Windows. + + 1.

Navigate to the desired directory

+ + Ensure your current working directory + is the desired parent directory for your new app. + Do not create the project folder, the `flutter` tool will do so. + + 1.

Configure project creation

+ + In your terminal, type out the `flutter create` command and + pass in any desired flags and options to configure your project. + For example, to create an app with a minimal `main.dart` file, + you can add the `--empty` option: + + ```console + $ flutter create --empty + ``` + + To learn about the available creation options, + run `flutter create --help` in another terminal window. + + 1.

Enter a project name

+ + As the only non-option argument to `flutter create`, + specify the directory and default name for your application. + The name should follow the `lowercase_with_underscores` naming convention, + following the [Effective Dart][package-name] guidelines. + + For example, if you wanted to create an app named `my_app`: + + ```console + $ flutter create my_app + ``` + + 1.

Execute the configured command

+ + To create a project with your specified configuration, + run the command you built in the previous step. + + 1.

Wait for project initialization

+ + The `flutter` tool will now bootstrap your project's file structure + and retrieve any necessary dependencies. + This might take a while. + + 1.

Navigate into the project directory

+ + Now that your project has been created, + you can navigate to it in your terminal or your preferred editor. + For example, with a bash shell and a project named `my_app`: + + ```console + $ cd my_app + ``` + + 1.

Run your app

+ + To try your new app, + run the `flutter run` command in your terminal and + respond to its prompts to select an output device. + +{:.steps} + +You've successfully created a new Flutter app in your terminal! +If you need help configuring your project or with the `flutter` CLI tool, +check out the [Flutter CLI reference][cli-reference]. + +[cli-reference]: /reference/flutter-cli + +[flutter-setup]: /get-started/install +[package-name]: {{site.dart-site}}/effective-dart/style#do-name-packages-and-file-system-entities-using-lowercase-with-underscores