Skip to content

[regression] TextField in a Wrap in AlertDialog crash #71687

New issue
New issue
Closed
#148086
Closed
[regression] TextField in a Wrap in AlertDialog crash#71687
#148086
Assignees
LongCatIsLooong
Labels
a: text inputEntering text in a text field or keyboard related problemsc: crashStack traces logged to the consolec: regressionIt was better in the past than it is nowcustomer: housef: material designflutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamworkaround availableThere is a workaround available to overcome the issue
@rydmike

Description

@rydmike
rydmike
opened on Dec 3, 2020

Steps to Reproduce

Flutter throws an exception when a TextFiled is used inside a Wrap in an AlertDialog.

This exception only occurs on channels dev and master.

It does not happen channels stable and beta.

It did not use to happen on dev and master channels either, it most likely started with version 1.25.x.

Demo code

Create a new Flutter project and replace the default code with this issue demo code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'TextField in Wrap in Dialog Regression'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('The Card below is content for an AlertDialog'),
            const Card(
              elevation: 2,
              child: Padding(
                padding: const EdgeInsets.all(8),
                child: DialogContent(),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              child: const Text('Show the above card in an AlertDialog'),
              onPressed: () async {
                final bool result = await DialogContent().showAsDialog(context);
                debugPrint('Dialog button: $result');
              },
            )
          ],
        ),
      ),
    );
  }
}

class DialogContent extends StatefulWidget {
  const DialogContent({Key key}) : super(key: key);

  @override
  _DialogContentState createState() => _DialogContentState();

  Future<bool> showAsDialog(
    BuildContext context,
  ) async {
    bool _result = false;
    await showDialog<bool>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            content: this,
            scrollable: true,
            actions: <Widget>[
              OutlinedButton(
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
                child: Text('CANCEL'),
              ),
              OutlinedButton(
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
                autofocus: true,
                child: Text('OK'),
              ),
            ],
          );
        }).then((bool value) {
      _result = value ?? false;
    });
    return _result;
  }
}

class _DialogContentState extends State<DialogContent> {
  TextEditingController textController;

  @override
  void initState() {
    textController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('A Demo Heading', style: Theme.of(context).textTheme.headline6),
        const SizedBox(height: 8),
        Wrap(
          crossAxisAlignment: WrapCrossAlignment.center,
          children: [
            const Text('Enter text'),
            Padding(
              padding: const EdgeInsets.all(8),
              child: SizedBox(
                width: 200,
                child: Container(height: 40, color: Colors.blue),
              ),
            ),
          ],
        ),
        Wrap(
          crossAxisAlignment: WrapCrossAlignment.center,
          children: [
            const Text('Enter text'),
            Padding(
              padding: const EdgeInsets.all(8),
              child: SizedBox(
                width: 200,
                child: TextField(
                  onChanged: (String text) {},
                  controller: textController,
                  decoration: InputDecoration(
                    hintText: 'Write something...',
                    border: const OutlineInputBorder(),
                    labelText: 'Text input label',
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Expected results

Expected to see this result when the program is run:

image

And when the button below the card is clicked, it is expected that the content in the card above the Elevated button is shown in an AlertDialog like this:

image

The above is the working produced OK result on channels and versions:

  • Channel stable, 1.22.4
  • Channel beta, 1.24.0-10.2.pre

Actual results

On channels:

  • Channel dev, 1.25.0-4.0.pre
  • Channel master, 1.25.0-5.0.pre.56

The main page is presented OK again:
image

but when we try to open the dialog with the "Show the above card in an AlertDialog" ElevatedButton, we get an exception thrown as follows:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
The _RenderDecoration class does not support dry layout.

Layout requires baseline metrics, which are only available after a full layout.
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
When the exception was thrown, this was the stack: 
#0      RenderBox.debugCannotComputeDryLayout.<anonymous closure> (package:flutter/src/rendering/box.dart:1891:11)

If the Padding with the TextField is removed, then the dialog can be shown. The Wrap above it with the Text and Container works fine.

class _DialogContentState extends State<DialogContent> {
  TextEditingController textController;

  @override
  void initState() {
    textController = TextEditingController();
    super.initState();
  }

  @override
  void dispose() {
    textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('A Demo Heading', style: Theme.of(context).textTheme.headline6),
        const SizedBox(height: 8),
        Wrap(
          crossAxisAlignment: WrapCrossAlignment.center,
          children: [
            const Text('Enter text'),
            Padding(
              padding: const EdgeInsets.all(8),
              child: SizedBox(
                width: 200,
                child: Container(height: 40, color: Colors.blue),
              ),
            ),
          ],
        ),
        Wrap(
          crossAxisAlignment: WrapCrossAlignment.center,
          children: [
            const Text('Enter text'),
            // Padding(
            //   padding: const EdgeInsets.all(8),
            //   child: SizedBox(
            //     width: 200,
            //     child: TextField(
            //       onChanged: (String text) {},
            //       controller: textController,
            //       decoration: InputDecoration(
            //         hintText: 'Write something...',
            //         border: const OutlineInputBorder(),
            //         labelText: 'Text input label',
            //       ),
            //     ),
            //   ),
            // ),
          ],
        ),
      ],
    );
  }
}

With the TextField removed, the AlertDialog is shown without an exception as follows:

image

Full exception log here 
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
The _RenderDecoration class does not support dry layout.

Layout requires baseline metrics, which are only available after a full layout.
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
When the exception was thrown, this was the stack: 
#0      RenderBox.debugCannotComputeDryLayout.<anonymous closure> (package:flutter/src/rendering/box.dart:1891:11)
#1      RenderBox.debugCannotComputeDryLayout (package:flutter/src/rendering/box.dart:1901:6)
#2      _RenderDecoration.computeDryLayout (package:flutter/src/material/input_decorator.dart:1284:12)
#3      RenderBox._computeDryLayout (package:flutter/src/rendering/box.dart:1815:26)
#4      RenderBox.getDryLayout.<anonymous closure> (package:flutter/src/rendering/box.dart:1804:68)
...
The following RenderObject was being processed when the exception was fired: RenderIntrinsicWidth#9ed63 relayoutBoundary=up6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(280.0<=w<=1200.0, 0.0<=h<=680.0)
...  size: MISSING
...  stepWidth: null
...  stepHeight: null
RenderObject: RenderIntrinsicWidth#9ed63 relayoutBoundary=up6 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  parentData: <none> (can use size)
  constraints: BoxConstraints(280.0<=w<=1200.0, 0.0<=h<=680.0)
  size: MISSING
  stepWidth: null
  stepHeight: null
...  child: RenderFlex#f147f NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: <none>
...    constraints: MISSING
...    size: MISSING
...    direction: vertical
...    mainAxisAlignment: start
...    mainAxisSize: min
...    crossAxisAlignment: stretch
...    verticalDirection: down
...    child 1: RenderRepaintBoundary#6c408 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      needs compositing
...      parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.loose
...      constraints: MISSING
...      size: MISSING
...      usefulness ratio: no metrics collected yet (never painted)
...      child: RenderCustomPaint#b9ddb NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        child: RenderRepaintBoundary#9a210 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          needs compositing
...          parentData: <none>
...          constraints: MISSING
...          size: MISSING
...          usefulness ratio: no metrics collected yet (never painted)
...    child 2: RenderPadding#f3d7d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null
...      constraints: MISSING
...      size: MISSING
...      padding: EdgeInsets.zero
...      textDirection: ltr
...      child: RenderPadding#1edde NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...        parentData: offset=Offset(0.0, 0.0)
...        constraints: MISSING
...        size: MISSING
...        padding: EdgeInsets(4.0, 8.0, 4.0, 8.0)
...        textDirection: ltr
...        child: _RenderButtonBarRow#4ce37 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...          parentData: offset=Offset(0.0, 0.0)
...          constraints: MISSING
...          size: MISSING
...          direction: horizontal
...          mainAxisAlignment: end
...          mainAxisSize: max
...          crossAxisAlignment: center
...          textDirection: ltr
...          verticalDirection: down
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderIntrinsicWidth#9ed63 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1919 pos 12: 'hasSize'
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#6df9b relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1919 pos 12: 'hasSize'
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: _RenderInkFeatures#1ae0a relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1919 pos 12: 'hasSize'
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#84269 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1919 pos 12: 'hasSize'
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#d4f1e relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1919 pos 12: 'hasSize'
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
'package:flutter/src/rendering/shifted_box.dart': Failed assertion: line 341 pos 12: 'child!.hasSize': is not true.
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#d4f1e relayoutBoundary=up2
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1919 pos 12: 'hasSize'
The relevant error-causing widget was: 
  AlertDialog file:///C:/Users/mryds/OneDrive/code/flutter/_issues/issue_dialog/lib/main.dart:72:18
════════════════════════════════════════════════════════════════════════════════════════════════════

Flutter doctor

Flutter doctor output 
>>doctor --verbose
[√] Flutter (Channel dev, 1.25.0-4.0.pre, on Microsoft Windows [Version 10.0.18363.1139], locale en-US)
    • Flutter version 1.25.0-4.0.pre at C:\Users\mryds\fvm\versions\dev
    • Framework revision a7f5fd5360 (3 days ago), 2020-11-30 13:14:13 +0100
    • Engine revision 20caf54969
    • Dart version 2.12.0 (build 2.12.0-76.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\mryds\AppData\Local\Android\sdk
    • Platform android-30, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.8.0)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.8.30709.132
    • Windows 10 SDK version 10.0.18362.0

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\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 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Community Edition (version 2020.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.3.1
    • Flutter plugin version 51.0.3
    • Dart plugin version 202.8070

[√] VS Code (version 1.51.1)
    • VS Code at C:\Users\mryds\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.16.0

[√] Connected device (5 available)
    • SM T510 (mobile)  • R52N906MLAV • android-arm    • Android 10 (API 29)
    • Windows (desktop) • windows     • windows-x64    • Microsoft Windows [Version 10.0.18363.1139]
    • Web Server (web)  • web-server  • web-javascript • Flutter Tools
    • Chrome (web)      • chrome      • web-javascript • Google Chrome 86.0.4240.198
    • Edge (web)        • edge        • web-javascript • Microsoft Edge 87.0.664.47

• No issues found!
Process finished with exit code 0

Metadata

Metadata

Assignees

Labels

a: text inputEntering text in a text field or keyboard related problemsc: crashStack traces logged to the consolec: regressionIt was better in the past than it is nowcustomer: housef: material designflutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamworkaround availableThere is a workaround available to overcome the issue

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions