Add implicit animations codelab #3118

legalcodes · 2019-10-16T21:04:00Z

Staged:
https://jt-flutter-website-2.firebaseapp.com/docs/codelabs/implicit-animations

Jump to markdown file:
https://github.com/flutter/website/pull/3118/files#diff-0b95e489513499b71bf4745f5b7bea31

…icitAnimations

sfshaza2

@legalcodes, I defer to others on reviewing the code and I have some Grammar Police nits but, overall, I think this is a great codelab! I really like how you've explained things and how you've used DP.

Once the nits are addressed, I say LGTM..

sfshaza2 · 2019-10-21T17:17:47Z

src/docs/codelabs/implicit-animations.md

@@ -0,0 +1,432 @@
+---
+title: "Implicit Animations"


Sentence case: "Implicit animations"

sfshaza2 · 2019-10-21T17:24:06Z

src/docs/codelabs/implicit-animations.md

+- One "Show Details" button that does nothing when clicked.
+- Description text of the owl in the photograph.
+
+Run the example to render the following code:


Maybe more direct?
"Click the Run button to run the example:"

I clicked the Run button over and over. It merely says "no issues". I get no output. I also tried "Reset" and then "Run". I tried multiple times. No output.

Per our discussion, I've raised dart-lang/dart-pad#1340

Could you add a screenshot and any additional description you might have of this issue?

Many thanks!

For me, dartpad was working fine.

sfshaza2 · 2019-10-21T17:27:05Z

src/docs/codelabs/implicit-animations.md

+```
+
+{{site.alert.secondary}}
+Notice that you only need to set the beginning and ending values of `opacity`.


This is nitpicky, but we indent alerts by 2 spaces per line.

sfshaza2 · 2019-10-21T17:28:48Z

src/docs/codelabs/implicit-animations.md

+The `AnimatedOpacity` widget manages everything in between.
+{{site.alert.end}}
+
+Here's the example with the completed changes you've just made -- run this 


GLOBAL: use an — for a long dash, or – for a short dash. This would use a long dash. Also, don't bracket it with spaces: https://developers.google.com/style/dashes

sfshaza2 · 2019-10-21T17:30:58Z

src/docs/codelabs/implicit-animations.md

+{{site.alert.end}}
+
+Here's the example with the completed changes you've just made -- run this 
+example and click on the "Show Details" button to trigger the animation.


It's "click" not "click on". (Search for click in the word list: https://developers.google.com/style/word-list)

Also, UI is denoted in bold, not quotes, so "Show Details: https://developers.google.com/style/ui-elements
And, if I wanted to be extra nitpicky, I'd suggest Show details.

By the way, I still can't run the example.

sfshaza2 · 2019-10-21T18:01:44Z

src/docs/codelabs/implicit-animations.md

+`borderRadius`, and `margin`) has an associated function (`randomColor`,
+`randomBorderRadius`, and `randomMargin` respectively) that returns a randomly
+generated value for that property. By using an `AniamtedContainer` widget, you can 
+quickly refactor this code to:


Sentence fragment. => "refactor this code to do the following:"

sfshaza2 · 2019-10-21T18:03:59Z

src/docs/codelabs/implicit-animations.md

+         ),
+```
+
+**5.** Finally, set the duration of the animation that will power the transition 


"that will power" => "that powers"

sfshaza2 · 2019-10-21T18:04:35Z

src/docs/codelabs/implicit-animations.md

+               color: Theme.of(context).primaryColor,
+```
+
+Here’s the example with the completed changes you’ve just made – run the code


— for an —

sfshaza2 · 2019-10-21T18:06:14Z

src/docs/codelabs/implicit-animations.md

+
+The preceding example demonstrates animated transitions between values for 
+the container's `margin`, `borderRadius`, and `color` properties. However, 
+`AnimatedContainer` animates changes in all of its properties, including ones


Not a fan of "ones":
"including ones..." => including those that...

sfshaza2 · 2019-10-21T18:14:30Z

src/docs/codelabs/implicit-animations.md

+[linear animation curve] by default.
+
+However, watch how the animation changes in the preceding example
+when you pass a `fastOutSlowIn` curve:


Hmmmm... I'm of two minds about this. When it says "watch how the animation changes..." I'm expecting another DartPad. But, as you are probably thinking, do we NEED another DP here? I think not, but I'd rephrase this to say something like, "make the following change to the previous DartPad to see how the..."

This was bothering me, you offered the perfect phrase for the job. Many thanks Shams!

Lol, I also was looking for another dartpad here... But yeah, telling people to modify the previous one sounds good.

goderbauer · 2019-10-22T19:18:30Z

src/docs/codelabs/implicit-animations.md

+{{site.alert.secondary}}
+  This section contains a list of steps you can use to add an implicit animation to the
+  preceding example code. After the steps, you can also run an example with the
+  the changes already made.


remove the "the"? It's already on the preceding line.

goderbauer · 2019-10-22T19:21:11Z

src/docs/codelabs/implicit-animations.md

+that manage animations for you. These widgets are collectively referred to as _implicit
+animations_, or _implicitly animated widgets_, deriving their name from the
+[ImplicitlyAnimatedWidget] class that they implement. Implicit animations trade
+control for convenience&mdash;they manage animation effects so that you don't have to.


I always like to say that with implicit animations you you set a target value and when that target value changes the widget animates you from the old to the new.

Perfect! This adds some much-needed glue the intro was missing. Many thanks.

goderbauer · 2019-10-22T19:22:55Z

src/docs/codelabs/implicit-animations.md

+The previous example also uses a common workflow for using implicit animations:
+- First, pick a widget property to animate.
+- Next, choose an implicit animation that can animate that property.
+- Set the start and end values for the property that you're animating.


This sounds kinda odd. You're really only picking a start value. In the last bullet point, where you trigger the animation you basically trigger it by picking the end value.

Yes, I think you're right -- Set the start and end values is misleading. The "workflow" I'm summarizing here is essentially a series of decisions made at design time, so Choose the start and end values... would be the better phrase. WDYT?

goderbauer · 2019-10-22T19:25:39Z

examples/animation/implicit/container5/lib/main.dart

+import 'package:flutter_web_test/flutter_web_test.dart';
+import 'package:flutter_web_ui/ui.dart' as ui;
+import 'dart:math';
+const _duration = Duration(milliseconds: 400);


nit: add an empty line above this line.

goderbauer · 2019-10-22T19:28:23Z

examples/animation/implicit/container0/lib/main.dart

@@ -0,0 +1,67 @@
+import 'package:flutter_web/material.dart';


Do you need license headers for all the .dart files?

goderbauer · 2019-10-22T19:32:26Z

examples/animation/implicit/container1/lib/main.dart

+  double borderRadius;
+  double margin;
+
+  initState() {


@override void initState() { super.initState();

goderbauer · 2019-10-22T19:33:07Z

examples/animation/implicit/container1/lib/main.dart

+  double margin;
+
+  initState() {
+    final color = randomColor();


remove the "final" on these lines? Not sure what that even means...

goderbauer · 2019-10-22T19:35:29Z

examples/animation/implicit/container7/lib/main.dart

+              Text('Age: 39'),
+              Text('Employment: None'),
+            ],
+          ))


nit:

Suggested change

))

),

),

goderbauer · 2019-10-22T19:36:22Z

examples/animation/implicit/container7/lib/main.dart

+import 'package:flutter_web_test/flutter_web_test.dart';
+import 'package:flutter_web_ui/ui.dart' as ui;
+
+const owl_url =


nit: I would just leave this on one line (unless you are bound to 80 chars per line)

goderbauer · 2019-10-22T19:38:51Z

examples/animation/implicit/opacity0/lib/main.dart

+  Widget build(BuildContext context) {
+    return MaterialApp(
+        home: Scaffold(
+      body: Center(child: FadeInDemo()),


Indentation is off here. This should probably be:

return MaterialApp( home: Scaffold( body: Center(child: FadeInDemo()), ), );

johnpryan · 2019-10-23T17:50:13Z

src/docs/codelabs/implicit-animations.md

+
+The previous example also uses a common workflow for using implicit animations:
+- First, pick a widget property to animate.
+- Next, choose an implicit animation that can animate that property.


Might want to say somewhere that you are choosing a subtype of ImplicitlyAnimatedWidget

Sure -- how about something like:

Remember, an implicit animation is a subtype of `ImplicitlyAnimatedWidget`, and you can browse the [list of common implicitly animated widgets] that ship with Flutter.

johnpryan · 2019-10-23T17:54:37Z

src/docs/codelabs/implicit-animations.md

+
+- A shape with size, margin, and color that are different each time you run the
+example.
+- A **Change** button that does nothing when clicked.


Is it necessary to include the StatelessWidget to StatefulWidget change? In this case, why not have the sample start with a StatefulWidget that changes the shape and color, and then having the user make it animated?

Let's followup to make sure I've fully captured this suggestion in the next change.

galeyang · 2019-10-23T23:31:22Z

Like

Overall, it’s very clear on what the step is about, what code to change
Like clear expectations: prerequirest, covered topics, est time
Static code differences are very clear
Like the animated curve graph

Potential improvements

I kind of wish that I see this part earlier. I tried to summarize the high-level flow when I was reading the detailed steps. This part gives me a very clear overview.
I’m not sure if we should use auto-run in some of reading-centric examples. What value do users get from spending effort to click the run button?
Trivial: Would be helpful to remind me where to add the code. The preceding examples do not specify a curve, so the implicit animations apply a linear animation curve by default. Add a curve parameter to the preceding example and watch how the animation changes when you pass the easeInOutBack constant for curve:
Nit: text said "Show details" but the code is “Show Details”

Wishes
Some notes are outside of your scope but are general notes that we can improve in other PRs)

I wish that I can copy code snippets in those code difference blocks more easily
- When I wanted to practice these steps, I tried to copy the snippet to the DartPad above but it’s hard to do that. Issues (1) got irrelevant syntax (e.g. the plug sign) (2) Lots of scrolling. Eventually, I decided to read through the code
(Trivial) Wish that the different code is highlighted in DartPad
(Trivial) It would be good that we sometimes use Cupertino style (in new codelabs)
(Trivial) For DartPad, I wish that there is a small hint to let me know the output is not recompiled based on my updated code yet.

General question: what’s the difference between codelab and cookbook?

legalcodes · 2019-10-25T20:22:59Z

Awesome @galeyang, per our discussion I plan to make the following changes:

Distribute the "workflow" summary points throughout each step
Wait for a later PR to use auto-run if we find it necessary
Use named-examples with links, and also provide a hint to the user to use the provided line numbers for reference as the user makes suggested changes
Fix the nit

…icitAnimations

sfshaza2 · 2019-10-29T20:16:24Z

LGTM

legalcodes added 13 commits August 21, 2019 16:17

Testing implicit animations on docs/codelabs/implicit-animations

58e88a6

Test ffw example w/o animations

9ae73c4

Added 3 examples, title, description

a759e76

Merge branch 'master' of https://github.com/flutter/website into impl…

a35344d

…icitAnimations

Added static example without diff

2131bb0

Added first code diff (full file)

f2dedfd

Added complete instructions for AnimatedOpacity

b67d770

Added AnimatedContainer example instructions

d089f12

Polished language

90eb167

Merge branch 'master' of https://github.com/flutter/website into impl…

6f1426a

…icitAnimations

Updated language + added explanation to part 1

4f37b80

Added additional step demonstrating how to change animation curve

47f9459

Merge branch 'master' of https://github.com/flutter/website into impl…

d94950a

…icitAnimations

googlebot added the cla: yes Contributor has signed the Contributor License Agreement label Oct 16, 2019

legalcodes requested a review from sfshaza2 October 21, 2019 16:50

sfshaza2 approved these changes Oct 21, 2019

View reviewed changes

legalcodes added 3 commits October 21, 2019 13:07

Update with suggestions from sfshaza2

6919ef8

Added play button for animations example (still needs resizing)

86a44c3

Update instructions for examples

b59b688

legalcodes requested review from efortuna, galeyang, goderbauer and johnpryan October 22, 2019 15:54

goderbauer reviewed Oct 22, 2019

View reviewed changes

johnpryan reviewed Oct 23, 2019

View reviewed changes

legalcodes added 2 commits October 24, 2019 15:23

Update w/ changes from goderbauer

1bfb7f8

Refreshed code excerpts

5c62659

Update section 1 steps w/ summary points throughout.

194052b

legalcodes added 3 commits October 28, 2019 13:37

Merge branch 'master' of https://github.com/flutter/website into impl…

f7b87a1

…icitAnimations

Update toc

7440311

Add google form survey

1978a48

legalcodes changed the title ~~[WIP] Add implicit animations codelab~~ Add implicit animations codelab Oct 29, 2019

sfshaza2 merged commit 2714d9f into flutter:master Oct 29, 2019

snyk-bot mentioned this pull request Apr 9, 2022

[Snyk] Fix for 1 vulnerabilities Zintexiss/website#23

Open

Add implicit animations codelab #3118

Add implicit animations codelab #3118

Uh oh!

Conversation

legalcodes commented Oct 16, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sfshaza2 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfshaza2 Oct 21, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfshaza2 Oct 21, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfshaza2 Oct 21, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

legalcodes Oct 21, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

galeyang commented Oct 23, 2019

legalcodes commented Oct 16, 2019 •

edited

Loading

sfshaza2 left a comment •

edited

Loading

sfshaza2 Oct 21, 2019 •

edited

Loading

sfshaza2 Oct 21, 2019 •

edited

Loading

sfshaza2 Oct 21, 2019 •

edited

Loading

legalcodes Oct 21, 2019 •

edited

Loading

legalcodes commented Oct 25, 2019 •

edited

Loading