LateInitializationError: Field 'mainAxisPosition' has not been initialized.

[tazik561]

I am using slidable 1.1.0 . I want to use custom ActionPane children like this:

return Slidable(
        closeOnScroll: false,
        startActionPane: ActionPane(
          motion: DrawerMotion(),
          extentRatio: 0.3,
          children: [
            SlidableAction(
              onPressed: (_) {},
              flex: 2,
              backgroundColor: Color(0xFF0392CF),
              foregroundColor: Colors.red,
              icon: Icons.save,
              label: 'Save',
              autoClose: true,
            ),
          ],
        ),
        endActionPane: ActionPane(
          motion: DrawerMotion(),
          children: [
            InkWell(
              onTap: () async {
              },
              child: Padding(
                padding: EdgeInsets.all(8),
                child: Container(
                  height: 80,
                  width: 80,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      border: Border.all(color: colorGrayCCC, width: 1),
                      borderRadius: radius),
                  child: Padding(
                    padding: EdgeInsets.all(8),
                    child: Padding(
                      padding: const EdgeInsets.all(2.0),
                      child: Center(
                        child: Text(
                          "remove",
                          style: TextStyle(
                              fontSize: 13,
                              color: colorRed),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
        // The child of the Slidable is what the user sees when the
        // component is not dragged.
        child: MyCard(
          title: e.title,
          date: e.date,
          message: e.message,
          imageSVG: e.imageSVG,
          iconBackgroundColor: e.iconBackgroundColor,
        ),
      );

But When I swape my card I got this error:

════════ Exception caught by animation library ═════════════════════════════════
LateInitializationError: Field 'mainAxisPosition' has not been initialized.
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderClipRect#6def5
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1929 pos 12: 'hasSize'

The relevant error-causing widget was
Slidable

[letsar]

Can you provide me a reproductible example I would just have to run?

[pam3ec555]

Hi everyone!

I have the same issue. But I can't catch it locally. I see this error on my sentry in production. This error happens rarely.

I am using 1.1.0
flutter ver - 2.8.1 (stable channel)

[dmasotti]

Hi, I'm having this problem also.

It happens by chance sometimes, but I can't reproduce it here.

flutter_slidable: ^1.0.0
Flutter (Channel stable, 2.8.0, on macOS 11.6 20G165 darwin-x64, locale it)

======== Exception caught by widgets library =======================================================
The following LateError was thrown building DrawerMotion(dependencies: [_ActionPaneScope]):
LateInitializationError: Field 'mainAxisPosition' has not been initialized.

The relevant error-causing widget was:
DrawerMotion DrawerMotion:file:///Users/macbookpro/Coding/flutter_25/RHD_project/rhd/lib/screens/home_page.dart:658:23
When the exception was thrown, this was the stack:
#0 _FlexEntranceTransitionParentData.mainAxisPosition (package:flutter_slidable/src/flex_entrance_transition.dart)
#1 _RenderFlexEntranceTransition.updateChildOffsets (package:flutter_slidable/src/flex_entrance_transition.dart:127:42)
#2 ContainerRenderObjectMixin.visitChildren (package:flutter/src/rendering/object.dart:3406:14)
#3 _RenderFlexEntranceTransition.updateOffsets (package:flutter_slidable/src/flex_entrance_transition.dart:122:5)
#4 _RenderFlexEntranceTransition.markNeedsOffsets (package:flutter_slidable/src/flex_entrance_transition.dart:117:5)
#5 _RenderFlexEntranceTransition.mainAxisPosition= (package:flutter_slidable/src/flex_entrance_transition.dart:93:7)
#6 FlexEntranceTransition.updateRenderObject (package:flutter_slidable/src/flex_entrance_transition.dart:38:9)
#7 RenderObjectElement.update (package:flutter/src/widgets/framework.dart:5486:12)
#8 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:6281:11)
#9 Element.updateChild (package:flutter/src/widgets/framework.dart:3370:15)
#10 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4613:16)
#11 Element.rebuild (package:flutter/src/widgets/framework.dart:4311:5)
#12 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2578:33)
#13 _LayoutBuilderElement._layout (package:flutter/src/widgets/layout_builder.dart:154:12)
#14 RenderObject.invokeLayoutCallback. (package:flutter/src/rendering/object.dart:1962:59)
#15 PipelineOwner._enableMutationsToDirtySubtrees (package:flutter/src/rendering/object.dart:910:15)
#16 RenderObject.invokeLayoutCallback (package:flutter/src/rendering/object.dart:1962:14)
#17 RenderConstrainedLayoutBuilder.rebuildIfNecessary (package:flutter/src/widgets/layout_builder.dart:228:7)
#18 _RenderLayoutBuilder.performLayout (package:flutter/src/widgets/layout_builder.dart:317:5)
#19 RenderObject.layout (package:flutter/src/rendering/object.dart:1852:7)
#20 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:171:12)
#21 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:1005:7)
#22 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:240:7)
#23 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:403:14)
#24 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1707:7)
#25 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:879:18)
#26 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:497:19)
#27 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:883:13)
#28 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5)
#29 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1145:15)
#30 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1082:9)
#31 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:996:5)
#35 _invoke (dart:ui/hooks.dart:150:10)
#36 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:270:5)
#37 _drawFrame (dart:ui/hooks.dart:114:31)

[tushar0518]

Hi, @tazik561 Try wrapping your Inkwell widget into Flexible, Something Like this:

ActionPane(
          motion: const DrawerMotion(),
          children: [
            SlidableAction(
              autoClose: false,
              onPressed: (context) { },
              backgroundColor: AppConstants.clrLogoGreen,
              foregroundColor: AppConstants.clrWhite,
              label: 'COMPLETE',
            ),
  Flexible(
              flex: 1,
              child: InkWell(
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    color: AppConstants.clrScaffoldBG,
                    borderRadius:
                    BorderRadius.circular(12),
                  ),
                  child: Center(
                    child: TextWidget("DISMISSED",
                        color: AppConstants.clrWhite,
                        fontWeight: FontWeight.w500,
                        fontFamily: AppConstants.fontFutura,
                        fontSize: AppConstants.medium_font),
                  ),
                ),
                onTap: () {  }
              )
            )
          ]
        );

[pam3ec555]

Hi, @tazik561 Try wrapping your Inkwell widget into Flexible, Something Like this:

ActionPane(
          motion: const DrawerMotion(),
          children: [
            SlidableAction(
              autoClose: false,
              onPressed: (context) { },
              backgroundColor: AppConstants.clrLogoGreen,
              foregroundColor: AppConstants.clrWhite,
              label: 'COMPLETE',
            ),
  Flexible(
              flex: 1,
              child: InkWell(
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    color: AppConstants.clrScaffoldBG,
                    borderRadius:
                    BorderRadius.circular(12),
                  ),
                  child: Center(
                    child: TextWidget("DISMISSED",
                        color: AppConstants.clrWhite,
                        fontWeight: FontWeight.w500,
                        fontFamily: AppConstants.fontFutura,
                        fontSize: AppConstants.medium_font),
                  ),
                ),
                onTap: () {  }
              )
            )
          ]
        );

Hello. I've already wrapped my widget into Flexible, but it didn't help 🥲

[letsar]

Thank you, I've fixed it and I will release another version on pub after.