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”