Flutter Bug Fixing: Verschwundene Widgets und BoxConstraints

Flutter Bug Fixing: Verschwundene Widgets und BoxConstraints

In diesem Artikel gehen wir auf die Fehlermeldung BoxConstraints forces an infinite height ein. Wir schauen uns an, warum diese Fehlermeldung angezeigt wird und wie damit umgegangen werden kann. Diese Meldung taucht immer dann auf, wenn nicht das passende Widget genutzt wurde.

Die Fehlermeldung die in der Konsole ausgegeben wird sieht wie folgt aus:


Inhaltsverzeichnis

  1. Beschreibung der Situation
  2. Ursache der Fehlermeldung
  3. Lösung der Fehlermeldung
  4. Wie geht es weiter?

1. Beschreibung der Situation

Es soll in einem Column über die komplette Seite gestreckt ein drei Container mit unterschiedlichen Hintergrundfarben plaziert werden. In unserem Beispiel wollen wir die zwei äußeren Container blau und den mittleren Gelb färben. Die beiden blauen Container werden mit einer höhe von 100 definiert. Der gelbe Container soll gestreckt sein und den restlichen Raum einnehmen. Wenn SizedBox.expand eingesetzt wird, um den gelben Container zu strecken, dann erhalten wir folgendes Ergebnis:

Es wird nur der erste blaue Container dargestellt. Die restlichen Widgets bleiben verschwunden. Ein Blick in die Konsole zeigt, dass etwas schief gelaufen ist. Wir erhalten die Fehlermeldung BoxConstraints forces an infinite height.


2. Ursache der Fehlermeldung

Der Code der das obige Verhalten verursacht sieht wie folgt aus:

import 'package:flutter/material.dart';


void main() => runApp(const MyApp());


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  static const String _title = 'Flutter Code Sample';


  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}


class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            SizedBox.expand(
              child: Container(
                color: Colors.amber,
                width: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }
}

Die Fehlermeldung wird durch das SizedBox.expand Widget verursacht. Der Grund hierfür ist, dass ein SizedBox.expand Widget so designed ist, dass dieser nur in SingleChildRenderObjectWidget wie Scaffold, Center oder Padding eingesetzt werden kann. Das sind alles Widgets die nur ein child erwarten. In dem obigen Beispiel wird jedoch das SizedBox.expand Widget in children des Column Widgets eingebettet.


3. Lösung der Fehlermeldung

Wie im vorherigen Abschnitt bereits beschrieben, kann das SizedBox.expand Widget nur in SingleChildRenderObjectWidget Widgets eingebettet werden. In unserem Beispiel möchten wir, jedoch das gelbe Container Widget in einem Column Widget gestreckt anzeigen. Das Column Widget ist ein MultiChildRenderObjectWidget. Um ein anderes Widget in einem MultiChildRenderObjectWidget Widget zu strecken, muss das Expanded Widget verwendet werden. Wenn wir das Expanded statt SizedBox.expand einsetzen, erhalten wir folgendes Ergebnis:

Der vollständige Code mit Expanded, der die Fehlermeldung BoxConstraints forces an infinite height löst:

import 'package:flutter/material.dart';


void main() => runApp(const MyApp());


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  static const String _title = 'Flutter Code Sample';


  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}


class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                width: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }
}

4. Wie geht es weiter?

Schon einmal auf die Fehlermeldung Incorrect use of ParentDataWidget gestoßen? Was die Fehlermeldung bedeutet und was zu tun ist um diese wieder los zu werden lässt sich hier herausfinden: Was tun bei “Incorrect use of ParentDataWidget”

Werde zum Flutter-Experten

Lerne Flutter von den Profis – persönlich und vor Ort. Mit unseren Flutter-Schulungen kommst du auf nächste Entwickler-Level.

Flutter Schulung entdecken