Skip to content

Commit

Permalink
docs: Minor updates to steps 3 & 4 in Klondike tutorial (#2626)
Browse files Browse the repository at this point in the history 
I have just finished steps 1-4 of the Klondike tutorial and noticed a
couple of minor things that look to be outdated with the current dart /
flame versions.

### Step 3 - `late` keyword isn't required
When following this step the analyser hightlight this rule
[unnecessary_late](https://dart.dev/tools/linter-rules/unnecessary_late)
(introduced in Dart 2.16.0) which states:

> Top-level and static variables with initializers are already evaluated
lazily as if they are marked late.

I updated the notes around why the laziness is important so the reader
can still understand the reasoning.
  • Loading branch information
@gilescm
gilescm authored Jul 29, 2023
1 parent e430b6c commit 970babe
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 27 deletions.
27 changes: 14 additions & 13 deletions doc/tutorials/klondike/step3.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,14 @@ symbol on the canvas. The sprite object is initialized using the
```

Then comes the static list of all `Suit` objects in the game. Note that we
define it as `late`, meaning that it will be only initialized the first time
it is needed. This is important: as we seen above, the constructor tries to
retrieve an image from the global cache, so it can only be invoked after the
image is loaded into the cache.
define it as static variable so it is evaluated lazily (as if it was marked
with the `late` keyword) meaning that it will be only initialized the first
time it is needed. This is important: as we can see above, the constructor
tries to retrieve an image from the global cache, so it can only be invoked
after the image is loaded into the cache.

```dart
static late final List<Suit> _singletons = [
static final List<Suit> _singletons = [
Suit._(0, '♥', 1176, 17, 172, 183),
Suit._(1, '♦', 973, 14, 177, 182),
Suit._(2, '♣', 974, 226, 184, 172),
Expand Down Expand Up @@ -120,7 +121,7 @@ class Rank {
final Sprite redSprite;
final Sprite blackSprite;
static late final List<Rank> _singletons = [
static final List<Rank> _singletons = [
Rank._(1, 'A', 335, 164, 789, 161, 120, 129),
Rank._(2, '2', 20, 19, 15, 322, 83, 125),
Rank._(3, '3', 122, 19, 117, 322, 80, 127),
Expand Down Expand Up @@ -272,7 +273,7 @@ Various properties used in the `_renderBack()` method are defined as follows:
const Radius.circular(KlondikeGame.cardRadius),
);
static final RRect backRRectInner = cardRRect.deflate(40);
static late final Sprite flameSprite = klondikeSprite(1367, 6, 357, 501);
static final Sprite flameSprite = klondikeSprite(1367, 6, 357, 501);
```

I declared these properties as static because they will all be the same across
Expand Down Expand Up @@ -307,9 +308,9 @@ depending on whether the card is of a "red" suit or "black":
Next, we also need the images for the court cards:

```dart
static late final Sprite redJack = klondikeSprite(81, 565, 562, 488);
static late final Sprite redQueen = klondikeSprite(717, 541, 486, 515);
static late final Sprite redKing = klondikeSprite(1305, 532, 407, 549);
static final Sprite redJack = klondikeSprite(81, 565, 562, 488);
static final Sprite redQueen = klondikeSprite(717, 541, 486, 515);
static final Sprite redKing = klondikeSprite(1305, 532, 407, 549);
```

Note that I'm calling these sprites `redJack`, `redQueen`, and `redKing`. This
Expand All @@ -325,11 +326,11 @@ blending mode:
Color(0x880d8bff),
BlendMode.srcATop,
);
static late final Sprite blackJack = klondikeSprite(81, 565, 562, 488)
static final Sprite blackJack = klondikeSprite(81, 565, 562, 488)
..paint = blueFilter;
static late final Sprite blackQueen = klondikeSprite(717, 541, 486, 515)
static final Sprite blackQueen = klondikeSprite(717, 541, 486, 515)
..paint = blueFilter;
static late final Sprite blackKing = klondikeSprite(1305, 532, 407, 549)
static final Sprite blackKing = klondikeSprite(1305, 532, 407, 549)
..paint = blueFilter;
```

Expand Down
30 changes: 16 additions & 14 deletions doc/tutorials/klondike/step4.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -576,19 +576,21 @@ it so that it would check whether the card is allowed to be moved before startin
```dart
void onDragStart(DragStartEvent event) {
if (pile?.canMoveCard(this) ?? false) {
_isDragging = true;
super.onDragStart(event);
priority = 100;
}
}
```

We have also added the boolean `_isDragging` variable here: make sure to define it, and then to
check this flag in the `onDragUpdate()` method, and to set it back to false in the `onDragEnd()`:
We have also added a call to `super.onDragStart()` which sets an `_isDragged` variable to `true`
in the `DragCallbacks` mixin, we need to check this flag via the public `isDragged` getter in
the `onDragUpdate()` method and use `super.onDragEnd()` in `onDragEnd()` so the flag is set back
to `false`:

```dart
@override
void onDragUpdate(DragUpdateEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
final cameraZoom = (findGame()! as FlameGame)
Expand All @@ -600,11 +602,11 @@ check this flag in the `onDragUpdate()` method, and to set it back to false in t
@override
void onDragEnd(DragEndEvent event) {
_isDragging = false;
super.onDragEnd(event);
}
```

Now the only the proper cards can be dragged, but they still drop at random positions on the table,
Now only the proper cards can be dragged, but they still drop at random positions on the table,
so let's work on that.


Expand All @@ -620,10 +622,10 @@ Thus, my first attempt at revising the `onDragEnd` callback looks like this:
```dart
@override
void onDragEnd(DragEndEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
_isDragging = false;
super.onDragEnd(event);
final dropPiles = parent!
.componentsAtPoint(position + size / 2)
.whereType<Pile>()
Expand Down Expand Up @@ -790,10 +792,10 @@ Now, putting this all together, the `Card`'s `onDragEnd` method will look like t
```dart
@override
void onDragEnd(DragEndEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
_isDragging = false;
super.onDragEnd(event);
final dropPiles = parent!
.componentsAtPoint(position + size / 2)
.whereType<Pile>()
Expand Down Expand Up @@ -898,7 +900,7 @@ Heading back into the `Card` class, we can use this method in order to populate
@override
void onDragStart(DragStartEvent event) {
if (pile?.canMoveCard(this) ?? false) {
_isDragging = true;
super.onDragStart();
priority = 100;
if (pile is TableauPile) {
attachedCards.clear();
Expand All @@ -918,7 +920,7 @@ the `onDragUpdate` method:
```dart
@override
void onDragUpdate(DragUpdateEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
final cameraZoom = (findGame()! as FlameGame)
Expand Down Expand Up @@ -952,10 +954,10 @@ attached cards into the pile, and the same when it comes to returning the cards
```dart
@override
void onDragEnd(DragEndEvent event) {
if (!_isDragging) {
if (!isDragged) {
return;
}
_isDragging = false;
super.onDragEnd(event);
final dropPiles = parent!
.componentsAtPoint(position + size / 2)
.whereType<Pile>()
Expand Down

0 comments on commit 970babe

Please sign in to comment.