Skip to content

General cleanup of the packages pages and the cookbook. #2711

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Merged
sfshaza2 merged 7 commits into from
Jun 12, 2019
Merged

General cleanup of the packages pages and the cookbook. #2711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f957b97
General cleanup of the using packages page.
sfshaza2 May 29, 2019
e9a5cef
Fixing a bug.
sfshaza2 May 29, 2019
303daa1
Returning to the previous version range for the sdk
sfshaza2 May 30, 2019
eb50d25
Text changes to follow our dev guidelines.
sfshaza2 Jun 3, 2019
053127c
Incorporating a few missed pieces of feedback.
sfshaza2 Jun 3, 2019
7cde6bb
Incorporating feedback.
sfshaza2 Jun 7, 2019
19adf89
Merge branch 'master' into old-pr
sfshaza2 Jun 10, 2019
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
4 changes: 2 additions & 2 deletions pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ packages:
name: linkcheck
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.6"
version: "1.7.0"
logging:
dependency: transitive
description:
Expand Down Expand Up @@ -375,7 +375,7 @@ packages:
name: stream_channel
url: "https://pub.dartlang.org"
source: hosted
version: "1.7.0"
version: "2.0.0"
stream_transform:
dependency: transitive
description:
Expand Down
22 changes: 10 additions & 12 deletions src/docs/codelabs/layout-basics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,19 @@ toc: false
---

{{site.alert.note}}
This codelab is being used to test out some new features of
DartPad! You may encounter bugs,
malapropisms, annoyances, and other general weirdness.
If that happens, please take a moment to
[file a bug on GitHub](https://github.com/dart-lang/dart-pad/issues/new).
Feature requests and suggestions are also greatly appreciated.
The embedded editors use an experimental version of DartPad.
If you find a DartPad bug or have suggestions for DartPad,
please [create a DartPad
issue](https://github.com/dart-lang/dart-pad/issues/new)
by clicking the bug icon at the top right of this page.
{{site.alert.end}}

{{site.alert.note}}
This codelab is currently being developed and tested
with Chrome. There may be (in the short term) features that
work in some browsers and not others. If you encounter
any, please feel free to
[file a bug on GitHub](https://goo.gle/flutter_web_issue),
labelling the issue with `platform-web`.
with Chrome. There might be (in the short term) features that
work in some browsers and not others. If you encounter any, please
[create a DartPad issue](https://goo.gle/flutter_web_issue),
labeling the issue with `platform-web`.
{{site.alert.end}}

`Row` and `Column` are two very important widgets in the Flutter universe.
Expand Down Expand Up @@ -75,7 +73,7 @@ Here's the example you just finished. Try setting the `Row`'s

If you've set the `mainAxisSize` of a `Row` to the minimum,
there won't be any extra room beyond what the children use.
If you've set it to `max`, though, the `Row` may have some
If you've set it to `max`, though, the `Row` might have some
additional space lying around. You can use the `mainAxisAlignment`
property to control how the `Row` aligns its children within that space.

Expand Down
50 changes: 25 additions & 25 deletions src/docs/cookbook/animation/animated-container.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Animate the properties of a Container
title: Animate the properties of a container
next:
title: Fade a Widget in and out
title: Fade a widget in and out
path: /docs/cookbook/animation/opacity-animation
---

Expand All @@ -10,37 +10,37 @@ class provides a convenient way to create a widget with specific properties:
width, height, background color, padding, borders, and more.

Simple animations often involve changing these properties over time.
For example, you may want to animate the background color from grey to green to
For example,
you might want to animate the background color from grey to green to
indicate that an item has been selected by the user.

To animate these properties, Flutter provides the
[`AnimatedContainer`]({{site.api}}/flutter/widgets/AnimatedContainer-class.html)
widget. Like the `Container` Widget, `AnimatedContainer` allows you to define
widget. Like the `Container` widget, `AnimatedContainer` allows you to define
the width, height, background colors, and more. However, when the
`AnimatedContainer` is rebuilt with new properties, it automatically
animates between the old and new values. In Flutter, these types of
animations are known as "implicit animations."

This recipe describes how to use an `AnimatedContainer` to animate the size,
background color, and border radius when the user taps a button.
background color, and border radius when the user taps a button
using the following steps:

## Directions

1. Create a StatefulWidget with default properties
2. Build an `AnimatedContainer` using the properties
3. Start the animation by rebuilding with new properties
1. Create a StatefulWidget with default properties.
2. Build an `AnimatedContainer` using the properties.
3. Start the animation by rebuilding with new properties.

## 1. Create a StatefulWidget with default properties

To start, create
[`StatefulWidget`]({{site.api}}/flutter/widgets/StatefulWidget-class.html)
and [`State`]({{site.api}}/flutter/widgets/State-class.html) classes.
Use the custom State class to define the properties you need to change over
Use the custom State class to define the properties that change over
time. In this example, that includes the width, height, color, and border
radius. In addition, you can also define the default value of each property.

@kwalrath kwalrath Jun 5, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd drop "In addition," and change this to "You can also..."

radius. You can also define the default value of each property.

These properties must belong to a custom `State` class so they can be updated
when the user taps a button.
These properties belong to a custom `State` class so they
can be updated when the user taps a button.

<!-- skip -->
```dart
Expand All @@ -59,15 +59,15 @@ class _AnimatedContainerAppState extends State<AnimatedContainerApp> {

@override
Widget build(BuildContext context) {
// Fill this out in the next steps
// Fill this out in the next steps.
}
}
```

## 2. Build an `AnimatedContainer` using the properties

Next, you can build the `AnimatedContainer` using the properties defined in the
previous step. Furthermore, you must provide a `duration` that defines how long
Next, build the `AnimatedContainer` using the properties defined in the
previous step. Furthermore, provide a `duration` that defines how long
the animation should run.

<!-- skip -->
Expand All @@ -90,17 +90,17 @@ AnimatedContainer(
## 3. Start the animation by rebuilding with new properties

Finally, start the animation by rebuilding the `AnimatedContainer` with
new properties. How to trigger a rebuild? When it comes to `StatefulWidgets`,
[`setState`]({{site.api}}/flutter/widgets/State/setState.html) is the
solution.
the new properties. How to trigger a rebuild? Use the
[`setState()`]({{site.api}}/flutter/widgets/State/setState.html)
method.

For this example, add a button to the app. When the user taps the button, update
Add a button to the app. When the user taps the button, update
the properties with a new width, height, background color and border radius
inside a call to `setState`.
inside a call to `setState()`.

In a real app, you most often transition between fixed values (for example, from
a grey to a green background). For this app, generate new values each time the
user taps the button.
A real app typically transitions between fixed values (for example,
from a grey to a green background). For this app,
generate new values each time the user taps the button.

<!-- skip -->
```dart
Expand Down
115 changes: 59 additions & 56 deletions src/docs/cookbook/animation/opacity-animation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
---
title: Fade a Widget in and out
title: Fade a widget in and out
prev:
title: Animate the properties of a Container
title: Animate the properties of a container
path: /docs/cookbook/animation/animated-container
next:
title: Add a Drawer to a screen
title: Add a drawer to a screen
path: /docs/cookbook/design/drawer
---

As UI developers, you often need to show and hide elements on screen. However,
quickly popping elements on and off the screen can feel jarring to end users.
Instead, you can fade elements in and out with an opacity animation to create
UI developers often need to show and hide elements on screen.
However, quickly popping elements on and off the screen can
feel jarring to end users. Instead,
fade elements in and out with an opacity animation to create
a smooth experience.

In Flutter, you can achieve this task using the [`AnimatedOpacity`][] Widget.
The [`AnimatedOpacity`][] widget makes it easy to perform opacity
animations. This recipe uses the following steps:

## Directions

1. Show a box to fade in and out
2. Define a `StatefulWidget`
3. Display a button that toggles the visibility
4. Fade the box in and out
1. Create a box to fade in and out.
2. Define a `StatefulWidget`.
3. Display a button that toggles the visibility.
4. Fade the box in and out.

## 1. Create a box to fade in and out

First, you'll need something to fade in and out. In this example,
you'll draw a green box on screen.
First, create something to fade in and out. For this example,
draw a green box on screen.

<!-- skip -->
```dart
Expand All @@ -38,26 +38,27 @@ Container(

## 2. Define a `StatefulWidget`

Now that you have a green box to animate, you'll need a way to know whether the
box should be visible or invisible. To accomplish this, use a
[`StatefulWidget`][].
Now that you have a green box to animate,
you need a way to know whether the box should be visible.
To accomplish this, use a [`StatefulWidget`][].

A `StatefulWidget` is a class that creates a `State` object. The `State` object
holds some data about our app and provides a way to update that data. When you
update the data, you can also ask Flutter to rebuild our UI with those changes.
A `StatefulWidget` is a class that creates a `State` object.
The `State` object holds some data about the app and provides a way to
update that data. When updating the data,
you can also ask Flutter to rebuild the UI with those changes.

In this case, you'll have one piece of data: a boolean representing whether the
button is visible or invisible.
In this case, you have one piece of data:
a boolean representing whether the button is visible.

To construct a `StatefulWidget`, you need to create two classes: A
`StatefulWidget` and a corresponding `State` class. Pro tip: The Flutter plugins
for Android Studio and VSCode include the `stful` snippet to quickly generate
this code.
To construct a `StatefulWidget`, create two classes: A
`StatefulWidget` and a corresponding `State` class.
Pro tip: The Flutter plugins for Android Studio and VSCode include
the `stful` snippet to quickly generate this code.

<!-- skip -->
```dart
// The StatefulWidget's job is to take in some data and create a State class.
// In this case, our Widget takes in a title, and creates a _MyHomePageState.
// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
final String title;

Expand All @@ -70,7 +71,7 @@ class MyHomePage extends StatefulWidget {
// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
// Whether the green box should be visible or invisible
// Whether the green box should be visible.
bool _visible = true;

@override
Expand All @@ -82,23 +83,25 @@ class _MyHomePageState extends State<MyHomePage> {

## 3. Display a button that toggles the visibility

Now that you have some data to determine whether the green box should be visible
or invisible, you'll need a way update that data. In this case, if the box is
visible, you want to hide it. If the box is hidden, you want to show it.
Now that you have some data to determine whether the green box
should be visible, you need a way update that data.
In this example, if the box is visible, hide it.
If the box is hidden, show it.

To achieve this, you'll display a button. When a user presses the button, you'll
flip the boolean from true to false, or false to true. You need to make this
change using [`setState`][], which is a method on the `State` class.
This lets Flutter know it needs to rebuild the Widget.
To handle this, display a button. When a user presses the button,
flip the boolean from true to false, or false to true.
Make this change using [`setState()`][],
which is a method on the `State` class.
This tells Flutter to rebuild the widget.

Note: For more information on working with user input, please see the
[Gestures](/docs/cookbook#gestures) section of the Cookbook.
For more information on working with user input, see the
[Gestures](/docs/cookbook#gestures) section of the cookbook.

<!-- skip -->
```dart
FloatingActionButton(
onPressed: () {
// Make sure to call setState. This tells Flutter to rebuild the
// Call setState. This tells Flutter to rebuild the
// UI with the changes.
setState(() {
_visible = !_visible;
Expand All @@ -111,24 +114,24 @@ FloatingActionButton(

## 4. Fade the box in and out

You've got a green box on screen. You've got a button to toggle the visibility
to `true` or `false`. So how do you fade the box in and out? With an
[`AnimatedOpacity`][] Widget.
You have a green box on screen and a button to toggle the visibility
to `true` or `false`. How to fade the box in and out? With an
[`AnimatedOpacity`][] widget.

The `AnimatedOpacity` Widget requires three arguments:
The `AnimatedOpacity` widget requires three arguments:

* `opacity`: A value from 0.0 (invisible) to 1.0 (fully visible).
* `duration`: How long the animation should take to complete.
* `child`: The Widget to animate. In our case, the green box.
* `child`: The widget to animate. In this case, the green box.

<!-- skip -->
```dart
AnimatedOpacity(
// If the Widget should be visible, animate to 1.0 (fully visible). If
// the Widget should be hidden, animate to 0.0 (invisible).
// If the widget is visible, animate to 0.0 (invisible).
// If the widget is hidden, animate to 1.0 (fully visible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box needs to be the child of the AnimatedOpacity
// The green box must be a child of the AnimatedOpacity widget.
child: Container(
width: 200.0,
height: 200.0,
Expand All @@ -155,8 +158,8 @@ class MyApp extends StatelessWidget {
}
}

// The StatefulWidget's job is to take in some data and create a State class.
// In this case, the Widget takes a title, and creates a _MyHomePageState.
// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
final String title;

Expand All @@ -169,7 +172,7 @@ class MyHomePage extends StatefulWidget {
// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
// Whether the green box should be visible or invisible
// Whether the green box should be visible
bool _visible = true;

@override
Expand All @@ -180,11 +183,11 @@ class _MyHomePageState extends State<MyHomePage> {
),
body: Center(
child: AnimatedOpacity(
// If the Widget should be visible, animate to 1.0 (fully visible).
// If the Widget should be hidden, animate to 0.0 (invisible).
// If the widget is visible, animate to 0.0 (invisible).
// If the widget is hidden, animate to 1.0 (fully visible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box needs to be the child of the AnimatedOpacity
// The green box must be a child of the AnimatedOpacity widget.
child: Container(
width: 200.0,
height: 200.0,
Expand All @@ -194,7 +197,7 @@ class _MyHomePageState extends State<MyHomePage> {
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Make sure to call setState. This tells Flutter to rebuild the
// Call setState. This tells Flutter to rebuild the
// UI with the changes.
setState(() {
_visible = !_visible;
Expand All @@ -212,4 +215,4 @@ class _MyHomePageState extends State<MyHomePage> {

[`AnimatedOpacity`]: {{site.api}}/flutter/widgets/AnimatedOpacity-class.html
[`StatefulWidget`]: {{site.api}}/flutter/widgets/StatefulWidget-class.html
[`setState`]: {{site.api}}/flutter/widgets/State/setState.html
[`setState()`]: {{site.api}}/flutter/widgets/State/setState.html
Loading