Flutter transient RenderFlex overflow with successive dialogs

ChrisNadovich
November 21, 2023
151 views
0 votes
2 Answers

I have successive Alert Dialogs that appear after a button is pressed. When the second dialog displays, there’s a brief "FLT: A RenderFlex overflowed by 46 pixels on the bottom." that immediately goes away in a fraction of a second. This seems to only occurs when the vertical size of the second dialog is bigger than the first dialog. If the second dialog is smaller than the first, there is no error.

I think I’m correctly popping the first dialog. The first dialog method references a TextEditingController that is part of the parent widget class, which I believe I’m clearing correctly.

I don’t understand why I get this brief overflow error. It goes away immediately. Everything works otherwise. I see it on the android emulator and in the debug console. Is this a flutter bug or am I doing something stupid.

Basically I’m doing this

class _ParentWidgetState extends State<ParentWidget> {
  late TextEditingController controller;

  // init, dispose, build, blah blah...

ElevatedButton(
    blahBlah: ...
    onPressed: () async {
            someText = await firstDialog();
            await secondDialog(someText);
    }
}

Future<String?> firstDialog() {
    return showDialog<String>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('Enter something'),
        content: TextField(
            decoration: const InputDecoration(
                hintText: 'Enter something'),
            autofocus: true,
            controller: controller,
            onSubmitted: (_) {
              Navigator.of(context).pop(controller.text);
              controller.clear();
            }),
        actions: [
          TextButton(
              onPressed: () {
                Navigator.of(context).pop(controller.text);
                controller.clear();
              },
              child: const Text('SUBMIT'))
        ],
      ),
    );
  }

Future<bool?> secondDialog(String someText) => showDialog<bool>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(someText),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text('Blah blah blah'),
              const SizedBox(
                height: 8,
              ),
              const Text('Blah blah blah'),              
              const SizedBox(
                height: 8,
              ),
              const Text('Blah blah blah'),
              const SizedBox(
                height: 8,
              ),
              const Text('Blah blah blah'),
            ],
          ),
          actions: [
            TextButton(
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
                child: const Text('Continue')),
          ],
        );
      });

Answers

I have made an example and I don’t have this error, maybe this example can help you. I don’t get the error you mentioned.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    TextEditingController controller = TextEditingController();

    Future<String?> firstDialog() {
      return showDialog<String>(
        context: context,
        builder: (context) => AlertDialog(
          title: const Text('Enter something'),
          content: TextField(
              decoration: const InputDecoration(hintText: 'Enter something'),
              autofocus: true,
              controller: controller,
              onSubmitted: (_) {
                Navigator.of(context).pop(controller.text);
                controller.clear();
              }),
          actions: [
            TextButton(
                onPressed: () {
                  Navigator.of(context).pop(controller.text);
                  controller.clear();
                },
                child: const Text('SUBMIT'))
          ],
        ),
      );
    }

    Future<bool?> secondDialog(String someText) => showDialog<bool>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text(someText),
            content: const Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('Blah blah blah'),
                SizedBox(
                  height: 8,
                ),
                Text('Blah blah blah'),
                SizedBox(
                  height: 8,
                ),
                Text('Blah blah blah'),
                SizedBox(
                  height: 8,
                ),
                Text('Blah blah blah'),
              ],
            ),
            actions: [
              TextButton(
                  onPressed: () {
                    Navigator.of(context).pop(true);
                  },
                  child: const Text('Continue')),
            ],
          );
        });

    return Scaffold(
      appBar: AppBar(
        title: const Text('Material App Bar'),
      ),
      body: Center(
        child: TextButton(
            onPressed: () async {
              String someText = await firstDialog() ?? '';
              await secondDialog(someText);
            },
            child: const Text("test dialog")),
      ),
    );
  }
}

Here you go. You can copy this source code & paste it into the main.dart file and run it. Don’t forget to look at the attached output below the source code.

// ignore_for_file: use_build_context_synchronously

import "dart:developer";

import "package:flutter/material.dart";

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const MainScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  final TextEditingController _textEditingController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ElevatedButton(
          onPressed: () async {
            final String firstResult = await firstDialog(context);
            log(firstResult);

            final bool secondResult = await secondDialog(context);
            log(secondResult.toString());

            _textEditingController.clear();
          },
          child: const Text("Open dialog"),
        ),
      ),
    );
  }

  Future<String> firstDialog(BuildContext context) async {
    String output = "";
    await showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Add something"),
          content: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                TextField(
                  controller: _textEditingController,
                  autofocus: true,
                  decoration: const InputDecoration(hintText: "Enter input"),
                  onSubmitted: (String value) {
                    output = _textEditingController.value.text;
                    Navigator.of(context).pop(output);
                  },
                ),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                output = _textEditingController.value.text;
                Navigator.of(context).pop(output);
              },
              child: const Text("Submit"),
            ),
          ],
        );
      },
    );
    return Future<String>.value(output);
  }

  Future<bool> secondDialog(BuildContext context) async {
    bool output = false;
    await showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(_textEditingController.value.text),
          content: const SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                // Your widgets
                Text("Blah blah blah"),
                Text("Blah blah blah"),
                Text("Blah blah blah"),
                Text("Blah blah blah"),
                Text("Blah blah blah"),
                // Your widgets
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                output = true;
                Navigator.of(context).pop(output);
              },
              child: const Text("Submit"),
            ),
          ],
        );
      },
    );
    return Future<bool>.value(output);
  }
}

Output:

Please signup or login to give your own answer.

Click here to cancel reply.