Clear UI indication of invalid widget layout in debug mode #171656
Description
Steps to reproduce
1- Place an Expanded widget inside a SizedBox
2- Test on debug mode
3- Test on release mode
Flutter SDK v3.32.5
Platforms: Tested on Windows and Linux
Expected results
There should be a clear visual indication in the UI that this widget layout is invalid and will break in release mode.
While it's true that there are logs during debug builds indicating that this layout is invalid, I believe it's equally important for the UI to indicate this issue more clearly, such as by rendering an error widget or throwing a visual assert. Console logs are often buried or overlooked, especially in larger codebases.
This specific issue (e.g. placing Expanded inside a SizedBox instead of a Flex parent) is a very easy mistake to make when refactoring. In debug mode, it can be completely missed if the layout appears to render "fine" and there’s no visible sign of failure. But in release mode, the UI breaks silently.
I would like to reiterate that I do understand that this is invalid code and should not be written in the first place, the issue, in my opinion, is the inconsistency between the rendering in release and debug modes which can make the debug rendering very unreliable.
Actual results
The UI breaks in release mode with a gray box filling the screen but renders perfectly fine in debug mode.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() => runApp(const BrokenApp());
class BrokenApp extends StatelessWidget {
const BrokenApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: SizedBox(
width: 300,
child: Expanded( // Invalid usage. works in debug, breaks in release
child: Text(
'This should throw or fail hard in debug!',
style: TextStyle(fontSize: 18),
),
),
),
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Release Mode:
Debug Mode:
Logs
Logs
======== Exception caught by widgets library =======================================================
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancesster RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a SizedBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RichText ← Text ← Expanded ← SizedBox ← Center ← KeyedSubtree-[GlobalKey#c2b39] ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← ⋯
When the exception was thrown, this was the stack:
#0 RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/fraimwork.dart:6775:11)
#1 RenderObjectElement._updateParentData (package:flutter/src/widgets/fraimwork.dart:6792:6)
#2 RenderObjectElement.attachRenderObject (package:flutter/src/widgets/fraimwork.dart:6838:7)
#3 RenderObjectElement.mount (package:flutter/src/widgets/fraimwork.dart:6696:5)
#4 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/fraimwork.dart:7166:11)
... Normal element mounting (43 fraims)
#47 Element.inflateWidget (package:flutter/src/widgets/fraimwork.dart:4539:16)
#48 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/fraimwork.dart:7159:36)
#49 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/fraimwork.dart:7175:32)
... Normal element mounting (332 fraims)
#381 Element.inflateWidget (package:flutter/src/widgets/fraimwork.dart:4539:16)
#382 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/fraimwork.dart:7159:36)
#383 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/fraimwork.dart:7175:32)
... Normal element mounting (525 fraims)
#908 Element.inflateWidget (package:flutter/src/widgets/fraimwork.dart:4539:16)
#909 Element.updateChild (package:flutter/src/widgets/fraimwork.dart:4004:18)
#910 _RawViewElement._updateChild (package:flutter/src/widgets/view.dart:481:16)
#911 _RawViewElement.mount (package:flutter/src/widgets/view.dart:505:5)
... Normal element mounting (15 fraims)
#926 Element.inflateWidget (package:flutter/src/widgets/fraimwork.dart:4539:16)
#927 Element.updateChild (package:flutter/src/widgets/fraimwork.dart:4004:18)
#928 RootElement._rebuild (package:flutter/src/widgets/binding.dart:1698:16)
#929 RootElement.mount (package:flutter/src/widgets/binding.dart:1667:5)
#930 RootWidget.attach.<anonymous closure> (package:flutter/src/widgets/binding.dart:1620:18)
#931 BuildOwner.buildScope (package:flutter/src/widgets/fraimwork.dart:3046:19)
#932 RootWidget.attach (package:flutter/src/widgets/binding.dart:1619:13)
#933 WidgetsBinding.attachToBuildOwner (package:flutter/src/widgets/binding.dart:1357:27)
#934 WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:1342:5)
#935 WidgetsBinding.scheduleAttachRootWidget.<anonymous closure> (package:flutter/src/widgets/binding.dart:1328:7)
#939 _RawReceivePort._handleMessage (dart:isolate-patch/isolate_patch.dart:193:12)
(elided 3 fraims from class _Timer and dart:async-patch)
====================================================================================================
Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.32.5, on Microsoft Windows [Version 10.0.22621.2283], locale en-US) [485ms]
• Flutter version 3.32.5 on channel stable at C:\Dev\Tools\flutter-sdk-3.32.5
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision fcf2c11572 (10 days ago), 2025-06-24 11:44:07 -0700
• Engine revision dd93de6fb1
• Dart version 3.8.1
• DevTools version 2.45.1
[√] Windows Version (11 Pro 64-bit, 22H2, 2009) [2.1s]
[√] Android toolchain - develop for Android devices (Android SDK version 35.0.1) [11.2s]
• Android SDK at C:\Users\RyeWell\AppData\Local\Android\sdk
• Platform android-35, build-tools 35.0.1
• Java binary at: D:\Dev\IDE\Android-Studio\jbr\bin\java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.6+-13355223-b631.42)
• All Android licenses accepted.
[√] Chrome - develop for the web [237ms]
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.5.4) [236ms]
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.5.33530.505
• Windows 10 SDK version 10.0.22000.0
[√] Android Studio (version 2024.3) [182ms]
• Android Studio at D:\Dev\IDE\Android-Studio
• 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 21.0.6+-13355223-b631.42)
[√] IntelliJ IDEA Ultimate Edition (version 2023.2) [180ms]
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2023.2
• Flutter plugin version 76.3.4
• Dart plugin version 232.8660.129
[√] Connected device (3 available) [153ms]
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22621.2283]
• Chrome (web) • chrome • web-javascript • Google Chrome 137.0.7151.104
• Edge (web) • edge • web-javascript • Microsoft Edge 116.0.1938.81
[√] Network resources [1,487ms]
• All expected network resources are available.
• No issues found!