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
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”
