Fix code sample in Shimmer effect codelab

[nicolamazz]

Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Steps to reproduce

1. Run the official shimmer example code (https://docs.flutter.dev/cookbook/effects/shimmer-loading)
2. While the listview is scrolling, toggle the FAB button in order to show the shimmer effect

Expected results

I expect the listview widgets with the loading effect to be shown.
Instead this error is generated: type 'Null' is not a subtype of type 'RenderBox' in type cast.

I tested with both android and ios emulator.

Actual results

A white screen is shown and the widgets flickers.

Code sample

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: ExampleUiLoadingAnimation(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

const _shimmerGradient = LinearGradient(
  colors: [
    Color(0xFFEBEBF4),
    Color(0xFFF4F4F4),
    Color(0xFFEBEBF4),
  ],
  stops: [
    0.1,
    0.3,
    0.4,
  ],
  begin: Alignment(-1.0, -0.3),
  end: Alignment(1.0, 0.3),
  tileMode: TileMode.clamp,
);

class ExampleUiLoadingAnimation extends StatefulWidget {
  const ExampleUiLoadingAnimation({
    super.key,
  });

  @override
  State<ExampleUiLoadingAnimation> createState() => _ExampleUiLoadingAnimationState();
}

class _ExampleUiLoadingAnimationState extends State<ExampleUiLoadingAnimation> {
  bool _isLoading = true;

  void _toggleLoading() {
    setState(() {
      _isLoading = !_isLoading;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Shimmer(
        linearGradient: _shimmerGradient,
        child: ListView(
          physics: _isLoading ? const NeverScrollableScrollPhysics() : null,
          children: [
            const SizedBox(height: 16),
            _buildTopRowList(),
            const SizedBox(height: 16),
            _buildListItem(),
            _buildListItem(),
            _buildListItem(),
            _buildListItem(),
            _buildListItem(),
            _buildListItem(),
            _buildListItem(),
            _buildListItem(),
            _buildListItem(),
            _buildListItem(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleLoading,
        child: Icon(
          _isLoading ? Icons.hourglass_full : Icons.hourglass_bottom,
        ),
      ),
    );
  }

  Widget _buildTopRowList() {
    return SizedBox(
      height: 72,
      child: ListView(
        physics: _isLoading ? const NeverScrollableScrollPhysics() : null,
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        children: [
          const SizedBox(width: 16),
          _buildTopRowItem(),
          _buildTopRowItem(),
          _buildTopRowItem(),
          _buildTopRowItem(),
          _buildTopRowItem(),
          _buildTopRowItem(),
        ],
      ),
    );
  }

  Widget _buildTopRowItem() {
    return ShimmerLoading(
      isLoading: _isLoading,
      child: const CircleListItem(),
    );
  }

  Widget _buildListItem() {
    return ShimmerLoading(
      isLoading: _isLoading,
      child: CardListItem(
        isLoading: _isLoading,
      ),
    );
  }
}

class Shimmer extends StatefulWidget {
  static ShimmerState? of(BuildContext context) {
    return context.findAncestorStateOfType<ShimmerState>();
  }

  const Shimmer({
    super.key,
    required this.linearGradient,
    this.child,
  });

  final LinearGradient linearGradient;
  final Widget? child;

  @override
  ShimmerState createState() => ShimmerState();
}

class ShimmerState extends State<Shimmer> with SingleTickerProviderStateMixin {
  late AnimationController _shimmerController;

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

    _shimmerController = AnimationController.unbounded(vsync: this)..repeat(min: -0.5, max: 1.5, period: const Duration(milliseconds: 1000));
  }

  @override
  void dispose() {
    _shimmerController.dispose();
    super.dispose();
  }
// code-excerpt-closing-bracket

  LinearGradient get gradient => LinearGradient(
        colors: widget.linearGradient.colors,
        stops: widget.linearGradient.stops,
        begin: widget.linearGradient.begin,
        end: widget.linearGradient.end,
        transform: _SlidingGradientTransform(slidePercent: _shimmerController.value),
      );

  bool get isSized => (context.findRenderObject() as RenderBox).hasSize;

  Size get size => (context.findRenderObject() as RenderBox).size;

  Offset getDescendantOffset({
    required RenderBox descendant,
    Offset offset = Offset.zero,
  }) {
    final shimmerBox = context.findRenderObject() as RenderBox;
    return descendant.localToGlobal(offset, ancestor: shimmerBox);
  }

  Listenable get shimmerChanges => _shimmerController;

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

class _SlidingGradientTransform extends GradientTransform {
  const _SlidingGradientTransform({
    required this.slidePercent,
  });

  final double slidePercent;

  @override
  Matrix4? transform(Rect bounds, {TextDirection? textDirection}) {
    return Matrix4.translationValues(bounds.width * slidePercent, 0.0, 0.0);
  }
}

class ShimmerLoading extends StatefulWidget {
  const ShimmerLoading({
    super.key,
    required this.isLoading,
    required this.child,
  });

  final bool isLoading;
  final Widget child;

  @override
  State<ShimmerLoading> createState() => _ShimmerLoadingState();
}

class _ShimmerLoadingState extends State<ShimmerLoading> {
  Listenable? _shimmerChanges;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (_shimmerChanges != null) {
      _shimmerChanges!.removeListener(_onShimmerChange);
    }
    _shimmerChanges = Shimmer.of(context)?.shimmerChanges;
    if (_shimmerChanges != null) {
      _shimmerChanges!.addListener(_onShimmerChange);
    }
  }

  @override
  void dispose() {
    _shimmerChanges?.removeListener(_onShimmerChange);
    super.dispose();
  }

  void _onShimmerChange() {
    if (widget.isLoading) {
      setState(() {
        // update the shimmer painting.
      });
    }
  }
// code-excerpt-closing-bracket

  @override
  Widget build(BuildContext context) {
    if (!widget.isLoading) {
      return widget.child;
    }

    // Collect ancestor shimmer info.
    final shimmer = Shimmer.of(context)!;
    if (!shimmer.isSized) {
      // The ancestor Shimmer widget has not laid
      // itself out yet. Return an empty box.
      return const SizedBox();
    }
    final shimmerSize = shimmer.size;
    final gradient = shimmer.gradient;
    final offsetWithinShimmer = shimmer.getDescendantOffset(
      descendant: context.findRenderObject() as RenderBox,
    );

    return ShaderMask(
      blendMode: BlendMode.srcATop,
      shaderCallback: (bounds) {
        return gradient.createShader(
          Rect.fromLTWH(
            -offsetWithinShimmer.dx,
            -offsetWithinShimmer.dy,
            shimmerSize.width,
            shimmerSize.height,
          ),
        );
      },
      child: widget.child,
    );
  }
}

//----------- List Items ---------
class CircleListItem extends StatelessWidget {
  const CircleListItem({super.key});
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
      child: Container(
        width: 54,
        height: 54,
        decoration: const BoxDecoration(
          color: Colors.black,
          shape: BoxShape.circle,
        ),
        child: ClipOval(
          child: Image.network(
            'https://docs.flutter.dev/cookbook'
            '/img-files/effects/split-check/Avatar1.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

class CardListItem extends StatelessWidget {
  const CardListItem({
    super.key,
    required this.isLoading,
  });

  final bool isLoading;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildImage(),
          const SizedBox(height: 16),
          _buildText(),
        ],
      ),
    );
  }

  Widget _buildImage() {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: Container(
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(16),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(16),
          child: Image.network(
            'https://docs.flutter.dev/cookbook'
            '/img-files/effects/split-check/Food1.jpg',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }

  Widget _buildText() {
    if (isLoading) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: double.infinity,
            height: 24,
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(16),
            ),
          ),
          const SizedBox(height: 16),
          Container(
            width: 250,
            height: 24,
            decoration: BoxDecoration(
              color: Colors.black,
              borderRadius: BorderRadius.circular(16),
            ),
          ),
        ],
      );
    } else {
      return const Padding(
        padding: EdgeInsets.symmetric(horizontal: 8),
        child: Text(
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do '
          'eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        ),
      );
    }
  }
}

Screenshots or Video

Screenshots / Video demonstration

Simulator.Screen.Recording.-.iPhone.14.Pro.Max.-.2023-09-10.at.14.33.58.mp4

[Upload media here]

Logs

Logs

Restarted application in 390ms.

════════ Exception caught by widgets library ═══════════════════════════════════
The following _TypeError was thrown building ShimmerLoading(dirty, state: _ShimmerLoadingState#7a3b8):
type 'Null' is not a subtype of type 'RenderBox' in type cast

The relevant error-causing widget was
ShimmerLoading
When the exception was thrown, this was the stack
#0      _ShimmerLoadingState.build
flutter/flutter#1      StatefulElement.build
flutter/flutter#2      ComponentElement.performRebuild
flutter/flutter#3      StatefulElement.performRebuild
flutter/flutter#4      Element.rebuild
flutter/flutter#5      ComponentElement._firstBuild
flutter/flutter#6      StatefulElement._firstBuild
flutter/flutter#7      ComponentElement.mount
...     Normal element mounting (41 frames)
flutter/flutter#48     Element.inflateWidget
flutter/flutter#49     Element.updateChild
flutter/flutter#50     SliverMultiBoxAdaptorElement.updateChild
flutter/flutter#51     SliverMultiBoxAdaptorElement.createChild.<anonymous closure>
flutter/flutter#52     BuildOwner.buildScope
flutter/flutter#53     SliverMultiBoxAdaptorElement.createChild
flutter/flutter#54     RenderSliverMultiBoxAdaptor._createOrObtainChild.<anonymous closure>
flutter/flutter#55     RenderObject.invokeLayoutCallback.<anonymous closure>
flutter/flutter#56     PipelineOwner._enableMutationsToDirtySubtrees
flutter/flutter#57     RenderObject.invokeLayoutCallback
flutter/flutter#58     RenderSliverMultiBoxAdaptor._createOrObtainChild
flutter/flutter#59     RenderSliverMultiBoxAdaptor.insertAndLayoutChild
flutter/flutter#60     RenderSliverList.performLayout.advance
flutter/flutter#61     RenderSliverList.performLayout
flutter/flutter#62     RenderObject.layout
flutter/flutter#63     RenderSliverEdgeInsetsPadding.performLayout
flutter/flutter#64     RenderSliverPadding.performLayout
flutter/flutter#65     RenderObject.layout
flutter/flutter#66     RenderViewportBase.layoutChildSequence
flutter/flutter#67     RenderShrinkWrappingViewport._attemptLayout
flutter/flutter#68     RenderShrinkWrappingViewport.performLayout
flutter/flutter#69     RenderObject.layout
flutter/flutter#70     RenderBox.layout
flutter/flutter#71     RenderProxyBoxMixin.performLayout
flutter/flutter#72     RenderObject.layout
flutter/flutter#73     RenderBox.layout
flutter/flutter#74     RenderProxyBoxMixin.performLayout
flutter/flutter#75     RenderObject.layout
flutter/flutter#76     RenderBox.layout
flutter/flutter#77     RenderProxyBoxMixin.performLayout
flutter/flutter#78     RenderObject.layout
flutter/flutter#79     RenderBox.layout
flutter/flutter#80     RenderProxyBoxMixin.performLayout
flutter/flutter#81     RenderObject.layout
flutter/flutter#82     RenderBox.layout
flutter/flutter#83     RenderProxyBoxMixin.performLayout
flutter/flutter#84     RenderObject.layout
flutter/flutter#85     RenderBox.layout
flutter/flutter#86     RenderProxyBoxMixin.performLayout
flutter/flutter#87     RenderObject.layout
flutter/flutter#88     RenderBox.layout
flutter/flutter#89     RenderConstrainedBox.performLayout
flutter/flutter#90     RenderObject.layout
flutter/flutter#91     RenderBox.layout
flutter/flutter#92     RenderProxyBoxMixin.performLayout
flutter/flutter#93     RenderObject.layout
flutter/flutter#94     RenderBox.layout
flutter/flutter#95     RenderProxyBoxMixin.performLayout
flutter/flutter#96     RenderObject.layout
flutter/flutter#97     RenderBox.layout
flutter/flutter#98     RenderSliverMultiBoxAdaptor.insertAndLayoutLeadingChild
flutter/flutter#99     RenderSliverList.performLayout
flutter/flutter#100    RenderObject.layout
flutter/flutter#101    RenderSliverEdgeInsetsPadding.performLayout
flutter/flutter#102    RenderSliverPadding.performLayout
flutter/flutter#103    RenderObject.layout
flutter/flutter#104    RenderViewportBase.layoutChildSequence
flutter/flutter#105    RenderViewport._attemptLayout
flutter/flutter#106    RenderViewport.performLayout
flutter/flutter#107    RenderObject._layoutWithoutResize
flutter/flutter#108    PipelineOwner.flushLayout
flutter/flutter#109    RendererBinding.drawFrame
flutter/flutter#110    WidgetsBinding.drawFrame
flutter/flutter#111    RendererBinding._handlePersistentFrameCallback
flutter/flutter#112    SchedulerBinding._invokeFrameCallback
flutter/flutter#113    SchedulerBinding.handleDrawFrame
flutter/flutter#114    SchedulerBinding._handleDrawFrame
flutter/flutter#115    _invoke (dart:ui/hooks.dart:170:13)
flutter/flutter#116    PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:401:5)
flutter/flutter#117    _drawFrame (dart:ui/hooks.dart:140:31)
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
type 'Null' is not a subtype of type 'RenderBox' in type cast
The relevant error-causing widget was
ShimmerLoading
════════════════════════════════════════════════════════════════════════════════

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.13.3, on macOS 13.5.2 22G91 darwin-arm64, locale en-IT)
    • Flutter version 3.13.3 on channel stable at /Users/nicolamazzocato/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2524052335 (4 days ago), 2023-09-06 14:32:31 -0700
    • Engine revision b8d35810e9
    • Dart version 3.1.1
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/nicolamazzocato/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.12.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.82.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.72.0

[✓] Connected device (3 available)
    • iPhone 14 Pro Max (mobile) • 5F295FAD-5D8E-4699-AC79-206B4DE83F19 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 13.5.2 22G91 darwin-arm64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 116.0.5845.179

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[huycozy]

Thanks for filing the issue, @nicolamazz. This may be fixed by adding a check null for context.findRenderObject() following the code from the stack trace. This fix may be not the best one, though.

Offset offsetWithinShimmer = Offset.zero;
if(context.findRenderObject() != null) {
  final box = context.findRenderObject() as RenderBox;
  offsetWithinShimmer = shimmer.getDescendantOffset(
    descendant: box,
  );
}

But I think this is an implementation issue and it is best suited for website repository. So I will transfer this issue to that repository.

[nicolamazz]

Thank you for the fix @huycozy!

[sebaiuliano]

For anyone running into the issue while also having applied the fix by @huycozy, please note the getDescendantOffset method tries to find the RenderBox again (and that was failing for me for some reason)

  Offset getDescendantOffset({
    required RenderBox descendant,
    Offset offset = Offset.zero,
  }) {
    final shimmerBox = context.findRenderObject() as RenderBox;
    return descendant.localToGlobal(offset, ancestor: shimmerBox);
  }

This can be avoided by changing the getDescendantOffset method to:

  Offset getDescendantOffset({
    required RenderBox descendant,
    Offset offset = Offset.zero,
  }) {
    return descendant.localToGlobal(offset, ancestor: descendant);
  }