Skip to content

Commit

Permalink
Clean up shimmer loading comments and docregion names (#10647)
Browse files Browse the repository at this point in the history
  • Loading branch information
@parlough
parlough committed May 22, 2024
1 parent ae8cea8 commit fe6576e
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 23 deletions.
24 changes: 12 additions & 12 deletions examples/cookbook/effects/shimmer_loading/lib/original_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ class Shimmer extends StatefulWidget {
ShimmerState createState() => ShimmerState();
}

// #docregion ShimmerStateAnimation
// #docregion shimmer-state-animation
class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
late AnimationController _shimmerController;

Expand All @@ -143,9 +143,9 @@ class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
super.dispose();
}
// code-excerpt-closing-bracket
// #enddocregion ShimmerStateAnimation
// #enddocregion shimmer-state-animation

// #docregion LinearGradient
// #docregion linear-gradient
LinearGradient get gradient => LinearGradient(
colors: widget.linearGradient.colors,
stops: widget.linearGradient.stops,
Expand All @@ -154,7 +154,7 @@ class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
transform:
_SlidingGradientTransform(slidePercent: _shimmerController.value),
);
// #enddocregion LinearGradient
// #enddocregion linear-gradient

bool get isSized =>
(context.findRenderObject() as RenderBox?)?.hasSize ?? false;
Expand All @@ -165,21 +165,21 @@ class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
required RenderBox descendant,
Offset offset = Offset.zero,
}) {
final shimmerBox = context.findRenderObject() as RenderBox;
final shimmerBox = context.findRenderObject() as RenderBox?;
return descendant.localToGlobal(offset, ancestor: shimmerBox);
}

// #docregion shimmerChanges
// #docregion shimmer-changes
Listenable get shimmerChanges => _shimmerController;
// #enddocregion shimmerChanges
// #enddocregion shimmer-changes

@override
Widget build(BuildContext context) {
return widget.child ?? const SizedBox();
}
}

// #docregion SlidingGradientTransform
// #docregion sliding-gradient-transform
class _SlidingGradientTransform extends GradientTransform {
const _SlidingGradientTransform({
required this.slidePercent,
Expand All @@ -192,7 +192,7 @@ class _SlidingGradientTransform extends GradientTransform {
return Matrix4.translationValues(bounds.width * slidePercent, 0.0, 0.0);
}
}
// #enddocregion SlidingGradientTransform
// #enddocregion sliding-gradient-transform

class ShimmerLoading extends StatefulWidget {
const ShimmerLoading({
Expand All @@ -208,7 +208,7 @@ class ShimmerLoading extends StatefulWidget {
State<ShimmerLoading> createState() => _ShimmerLoadingState();
}

// #docregion ShimmerLoadingState
// #docregion shimmer-loading-state
class _ShimmerLoadingState extends State<ShimmerLoading> {
Listenable? _shimmerChanges;

Expand All @@ -233,12 +233,12 @@ class _ShimmerLoadingState extends State<ShimmerLoading> {
void _onShimmerChange() {
if (widget.isLoading) {
setState(() {
// update the shimmer painting.
// Update the shimmer painting.
});
}
}
// code-excerpt-closing-bracket
// #enddocregion ShimmerLoadingState
// #enddocregion shimmer-loading-state

@override
Widget build(BuildContext context) {
Expand Down
20 changes: 9 additions & 11 deletions src/content/cookbook/effects/shimmer-loading.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ The `transform` property accepts a `GradientTransform` instance.
Define a class called `_SlidingGradientTransform` that implements
`GradientTransform` to achieve the appearance of horizontal sliding.

<?code-excerpt "lib/original_example.dart (SlidingGradientTransform)"?>
<?code-excerpt "lib/original_example.dart (sliding-gradient-transform)"?>
```dart
class _SlidingGradientTransform extends GradientTransform {
const _SlidingGradientTransform({
Expand All @@ -483,7 +483,7 @@ in order to create the appearance of motion.
To change the percentage, configure an
[`AnimationController`][] in the `ShimmerState` class.

<?code-excerpt "lib/original_example.dart (ShimmerStateAnimation)" replace="/\/\/ code-excerpt-closing-bracket/}/g"?>
<?code-excerpt "lib/original_example.dart (shimmer-state-animation)" replace="/\/\/ code-excerpt-closing-bracket/}/g"?>
```dart
class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
late AnimationController _shimmerController;
Expand All @@ -507,7 +507,7 @@ class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
Apply the `_SlidingGradientTransform` to the `gradient`
by using the `_shimmerController`'s `value` as the `slidePercent`.

<?code-excerpt "lib/original_example.dart (LinearGradient)"?>
<?code-excerpt "lib/original_example.dart (linear-gradient)"?>
```dart
LinearGradient get gradient => LinearGradient(
colors: widget.linearGradient.colors,
Expand All @@ -527,7 +527,7 @@ is happening.
Expose the `_shimmerController` from `ShimmerState`
as a [`Listenable`][].

<?code-excerpt "lib/original_example.dart (shimmerChanges)"?>
<?code-excerpt "lib/original_example.dart (shimmer-changes)"?>
```dart
Listenable get shimmerChanges => _shimmerController;
```
Expand All @@ -536,7 +536,7 @@ In `ShimmerLoading`, listen for changes to the ancestor
`ShimmerState`'s `shimmerChanges` property,
and repaint the shimmer gradient.

<?code-excerpt "lib/original_example.dart (ShimmerLoadingState)" replace="/\/\/ code-excerpt-closing-bracket/}/g"?>
<?code-excerpt "lib/original_example.dart (shimmer-loading-state)" replace="/\/\/ code-excerpt-closing-bracket/}/g"?>
```dart
class _ShimmerLoadingState extends State<ShimmerLoading> {
Listenable? _shimmerChanges;
Expand All @@ -562,7 +562,7 @@ class _ShimmerLoadingState extends State<ShimmerLoading> {
void _onShimmerChange() {
if (widget.isLoading) {
setState(() {
// update the shimmer painting.
// Update the shimmer painting.
});
}
}
Expand All @@ -576,7 +576,7 @@ on and off as the content loads.

## Interactive example

<?code-excerpt "lib/original_example.dart"?>
<?code-excerpt "lib/original_example.dart" remove="code-excerpt-closing-bracket"?>
```run-dartpad:theme-light:mode-flutter:run-true:width-100%:height-600px:split-60:ga_id-interactive_example
import 'package:flutter/material.dart';
Expand Down Expand Up @@ -721,7 +721,6 @@ class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
_shimmerController.dispose();
super.dispose();
}
// code-excerpt-closing-bracket
LinearGradient get gradient => LinearGradient(
colors: widget.linearGradient.colors,
Expand All @@ -741,7 +740,7 @@ class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
required RenderBox descendant,
Offset offset = Offset.zero,
}) {
final shimmerBox = context.findRenderObject() as RenderBox;
final shimmerBox = context.findRenderObject() as RenderBox?;
return descendant.localToGlobal(offset, ancestor: shimmerBox);
}
Expand Down Expand Up @@ -804,11 +803,10 @@ class _ShimmerLoadingState extends State<ShimmerLoading> {
void _onShimmerChange() {
if (widget.isLoading) {
setState(() {
// update the shimmer painting.
// Update the shimmer painting.
});
}
}
// code-excerpt-closing-bracket
@override
Widget build(BuildContext context) {
Expand Down

0 comments on commit fe6576e

Please sign in to comment.