Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions AUTHORS
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,4 @@ Novoda Ltd. — www.novoda.com (Niamh Power, Sebastiano Poggi)
Gianluca Cesari <giangi.ces@gmail.com>
Hidenori Matsubayashi <Hidenori.Matsubayashi@sony.com>
Pradumna Saraf <pradumnasaraf@gmail.com>
Alex Li <alexv.525.li@gmail.com>
8 changes: 4 additions & 4 deletions src/desktop/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,11 +220,11 @@ and run your application to see it launch on the desktop.

To create a new application that includes desktop support
(in addition to mobile and web support), run the following commands,
substituting `myapp` with the name of your project:
substituting `my_app` with the name of your project:

```terminal
$ flutter create myapp
$ cd myapp
$ flutter create my_app
$ cd my_app
```
To launch your application from the command line,
enter one of the following commands from the top
Expand Down Expand Up @@ -379,7 +379,7 @@ In addition to that executable, you need the following:
Release
│ flutter_windows.dll
│ msvcp140.dll
myapp.exe
my_app.exe
│ vcruntime140.dll
│ vcruntime140_1.dll
Expand Down
2 changes: 1 addition & 1 deletion src/development/ui/navigation/url-strategies.md
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ handle any path gracefully and fallback to your app's `index.html` file.
Update the `<base href="/">` tag in `web/index.html`
to the path where your app is hosted.
For example, to host your Flutter app at
`myapp.dev/flutter_app`, change
`my_app.dev/flutter_app`, change
this tag to `<base href="/flutter_app/">`.


Expand Down
5 changes: 2 additions & 3 deletions src/get-started/flutter-for/ios-devs.md
Original file line number Diff line number Diff line change
Expand Up @@ -827,12 +827,11 @@ Future<List<Map<String, dynamic>>> sendReceive(SendPort port, String msg) {
port.send(<dynamic>[msg, response.sendPort]);
return response.first as Future<List<Map<String, dynamic>>>;
}

```

Here, `dataLoader()` is the `Isolate` that runs in
its own separate execution thread.
In the isolate you can perform more CPU intensive
In the isolate, you can perform more CPU intensive
processing (parsing a big JSON, for example),
or perform computationally intensive math,
such as encryption or signal processing.
Expand Down Expand Up @@ -1245,7 +1244,7 @@ for your own app's localizable copy,
if you want those to be localized too.

When initialized, the `WidgetsApp` (or `MaterialApp`)
creates a[`Localizations`][] widget for you,
creates a [`Localizations`][] widget for you,
with the delegates you specify.
The current locale for the device is always accessible
from the `Localizations` widget from the current context
Expand Down
4 changes: 2 additions & 2 deletions src/get-started/test-drive/_restart-vscode.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{{site.alert.warning}}
If VS Code was running during your initial Flutter setup,
you may need to restart it for VS Code's Flutter plugin to detect the Flutter SDK.
If VS Code was running during your initial Flutter setup,
you might need to restart it for VS Code's Flutter plugin to detect the Flutter SDK.
{{site.alert.end}}
31 changes: 16 additions & 15 deletions src/get-started/test-drive/_terminal.md
Original file line number Diff line number Diff line change
@@ -1,42 +1,43 @@
<div class="tab-pane" id="terminal" role="tabpanel" aria-labelledby="terminal-tab" markdown="1">

## Create the app {#create-app}
## Create the app {#create-app}

Use the `flutter create` command to create a new project:

```terminal
$ flutter create myapp
$ cd myapp
$ flutter create my_app
$ cd my_app
```

It is also possible to pass other arguments to `flutter create`,
such as the project name (*pubspec.yml*), the organization name,
or to specify the programming language used for the native platform:

```terminal
$ flutter create --project-name myapp --org dev.flutter --android-language java --ios-language objc myapp
$ cd myapp
$ flutter create --project-name my_app --org dev.flutter --android-language java --ios-language objc my_app
$ cd my_app
```

The command creates a Flutter project directory called `myapp` that
The command creates a Flutter project directory called `my_app` that
contains a simple demo app that uses [Material Components][].

{% include_relative _main-code-note.md %}

## Run the app

1. Check that an Android device is running. If none are shown, follow the
device-specific instructions on the [Install][] page for your OS.
1. Check that an Android device is running.
If none are shown, follow the device-specific instructions
on the [Install][] page for your OS.

```terminal
$ flutter devices
```
```terminal
$ flutter devices
```

2. Run the app with the following command:
2. Run the app with the following command:

```terminal
$ flutter run
```
```terminal
$ flutter run
```

{% capture save_changes -%}
.
Expand Down
52 changes: 29 additions & 23 deletions src/get-started/test-drive/_vscode.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@
1. Type "flutter", and select the **Flutter: New Project**.
1. Select **Application**.
1. Create or select the parent directory for the new project folder.
1. Enter a project name, such as `myapp`, and press **Enter**.
1. Enter a project name, such as `my_app`, and press **Enter**.
1. Wait for project creation to complete and the `main.dart`
file to appear.

The above commands create a Flutter project directory called `myapp` that
The above commands create a Flutter project directory called `my_app` that
contains a simple demo app that uses [Material Components][].

{% include_relative _package-name.md %}
Expand All @@ -21,27 +21,33 @@ contains a simple demo app that uses [Material Components][].

## Run the app

1. Locate the VS Code status bar (the blue bar at the bottom of the
window):<br> ![status bar][]{:.mw-100.pt-1.pb-2}
1. Select a device from the **Device Selector** area.
For details, see [Quickly switching between Flutter devices][].
- If no device is available and you want to use a device simulator,
click **No Devices** and launch a simulator.

{{site.alert.warning}}
You may not see **Start iOS Simulator** option when you click **No Devices** in VS Code. If you are on Mac then you may have to run following command in terminal to launch a simulator.
```
open -a simulator
```

On Windows or Linux it is not possible to launch iOS simulator.
{{site.alert.end}}

- To setup a real device, follow the device-specific instructions on the
[Install][] page for your OS.
1. Invoke **Run > Start Debugging** or press <kbd>F5</kbd>.
1. Wait for the app to launch &mdash; progress is printed
in the **Debug Console** view.
1. Locate the VS Code status bar
(the blue bar at the bottom of the window):<br>
![status bar][]{:.mw-100.pt-1.pb-2}
1. Select a device from the **Device Selector** area.
For details, see [Quickly switching between Flutter devices][].
- If no device is available, and you want to use a device simulator,
click **No Devices** and click
**Start iOS Simulator** to launch a simulator.

{{site.alert.warning}}
You might not see **Start iOS Simulator** option
when you click **No Devices** in VS Code.
If you're on Mac, then you might have to run following command
in terminal to launch a simulator.

```terminal
$ open -a simulator
```

On Windows or Linux, it's not possible to launch an iOS simulator.
{{site.alert.end}}

- To setup a real device, follow the device-specific instructions
on the [Install][] page for your OS.
1. Invoke **Run > Start Debugging** or press <kbd>F5</kbd>.
1. Wait for the app to launch&mdash;progress is printed
in the **Debug Console** view.

{% capture save_changes -%}
: invoke **Save All**, or click **Hot Reload**
Expand Down
6 changes: 3 additions & 3 deletions src/get-started/web.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,11 +89,11 @@ and run your app to see it launch in Chrome.

To create a new app that includes web support
(in addition to mobile support), run the following commands,
substituting `myapp` with the name of your project:
substituting `my_app` with the name of your project:

```terminal
$ flutter create myapp
$ cd myapp
$ flutter create my_app
$ cd my_app
```

To serve your app from `localhost` in Chrome,
Expand Down
36 changes: 18 additions & 18 deletions src/perf/best-practices.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,15 @@ to be slow, but can't always be avoided.
They should be used thoughtfully,
following the guidance below.

# Minimize expensive operations
## Minimize expensive operations

Some operations are more expensive than others,
meaning that they consume more resources.
Obviously, you want to only use these operations
when necessary. How you design and implement your
app's UI can have a big impact on how efficiently it runs.

## Control build() cost
### Control build() cost

Here are some things to keep in mind when designing your UI:

Expand Down Expand Up @@ -103,7 +103,7 @@ For more information, check out:

---

## Use saveLayer() thoughtfully
### Use saveLayer() thoughtfully

Some Flutter code uses `saveLayer()`, an expensive operation,
to implement various visual effects in the UI.
Expand All @@ -112,7 +112,7 @@ other widgets or packages that you use might call it behind the scenes.
Perhaps your app is calling `saveLayer()` more than necessary;
excessive calls to `saveLayer()` can cause jank.

### Why is saveLayer expensive?
#### Why is saveLayer expensive?

Calling `saveLayer()` allocates an offscreen buffer
and drawing content into the offscreen buffer might
Expand All @@ -123,14 +123,14 @@ to redirect that stream temporarily and then
direct it back again. On mobile GPUs this is
particularly disruptive to rendering throughput.

### When is saveLayer required?
#### When is saveLayer required?

At runtime, if you need to dynamically display various shapes
coming from a server (for example), each with some transparency,
that might (or might not) overlap,
then you pretty much have to use `saveLayer()`.

### Debugging calls to saveLayer
#### Debugging calls to saveLayer

How can you tell how often your app calls `saveLayer()`,
either directly or indirectly?
Expand All @@ -142,7 +142,7 @@ switch in the [DevTools Performance view][].

[DevTools timeline]: {{site.url}}/development/tools/devtools/performance#timeline-events-chart

### Minimizing calls to saveLayer
#### Minimizing calls to saveLayer

Can you avoid calls to `saveLayer`?
It might require rethinking of how you
Expand Down Expand Up @@ -200,7 +200,7 @@ and are potentially costly:

---

## Minimize use of opacity and clipping
### Minimize use of opacity and clipping

Opacity is another expensive operation, as is clipping.
Here are some tips you might find to be useful:
Expand Down Expand Up @@ -232,7 +232,7 @@ Here are some tips you might find to be useful:

---

## Implement grids and lists thoughtfully
### Implement grids and lists thoughtfully

How your grids and lists are implemented
might be causing performance problems for your app.
Expand All @@ -241,7 +241,7 @@ practice when creating grids and lists,
and how to determine whether your app uses
excessive layout passes.

### Be lazy!
#### Be lazy!

When building a large grid or list,
use the lazy builder methods, with callbacks.
Expand All @@ -260,14 +260,14 @@ For more information and examples, check out:
[`Listview.builder`]: {{site.api}}/flutter/widgets/ListView/ListView.builder.html
[Working with long lists]: {{site.url}}/cookbook/lists/long-lists

### Avoid intrinsics
#### Avoid intrinsics

For information on how intrinsic passes might be causing
problems with your grids and lists, see the next section.

---

## Minimize layout passes caused by intrinsic operations
### Minimize layout passes caused by intrinsic operations

If you've done much Flutter programming, you are
probably familiar with [how layout and constraints work][]
Expand All @@ -282,7 +282,7 @@ over the widgets but, sometimes,
a second pass (called an _intrinsic pass_) is needed,
and that can slow performance.

### What is an intrinsic pass?
#### What is an intrinsic pass?

An intrinsic pass happens when, for example,
you want all cells to have the size
Expand All @@ -302,7 +302,7 @@ the framework determines a uniform cell size,
and re-visits all grid cells a second time,
telling each card what size to use.

### Debugging intrinsic passes
#### Debugging intrinsic passes

To determine whether you have excessive intrinsic passes,
enable the **[Track layouts option][]**
Expand All @@ -312,7 +312,7 @@ to learn how many layout passes were performed.
Once you enable tracking, intrinsic timeline events
are labeled as '$runtimeType intrinsics'.

### Avoiding intrinsic passes
#### Avoiding intrinsic passes

You have a couple options for avoiding the intrinsic pass:

Expand All @@ -337,7 +337,7 @@ section in the [Flutter architectural overview][].

---

## Build and display frames in 16ms
### Build and display frames in 16ms

Since there are two separate threads for building
and rendering, you have 16ms for building,
Expand Down Expand Up @@ -369,7 +369,7 @@ check out the video [Why 60fps?][]
[profile mode]: {{site.url}}/testing/build-modes#profile
[Why 60fps?]: {{site.youtube-site}}/watch?v=CaMTIgxCSqU

# Pitfalls
## Pitfalls

If you need to tune your app’s performance,
or perhaps the UI isn't as smooth as you expect,
Expand Down Expand Up @@ -410,7 +410,7 @@ your app's performance.
if most of the children are not visible
on screen to avoid the build cost.

# Resources
## Resources

For more performance info, check out the following resources:

Expand Down