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:

1. Beschreibung der Situation

Es sollen in einer Column, über die komplette Seite gestreckt, drei Container mit unterschiedlichen Hintergrundfarben platziert 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: Die Fehlermeldung wird durch das SizedBox.expand Widget verursacht. Der Grund hierfür ist, dass ein SizedBox.expand Widget so designed ist, dass dieses 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: Flutter Bug Fixing: Incorrect use of ParentDataWidget