Débordement inférieur dans le panneau d'extension
Quelqu'un peut-il aider à déchiffrer l'exception que je continue de rencontrer? Je ne sais pas quoi essayer ensuite pour corriger le débordement lorsque le panneau se dilate. J'ai essayé de l'envelopper dans un widget flexible mais cela ne semble pas résoudre le problème.
Voici un gif rapide montrant l'erreur: https://imgur.com/itIYV8s
Voici mon exception:
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 74 pixels on the bottom.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
flutter: The Edge of the RenderFlex that is overflowing has been marked
in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents
being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget)
to force the children of the
flutter: RenderFlex to fit within the available space instead of being
sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is:
flutter: RenderFlex#ac136 OVERFLOWING
flutter: creator: Column ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Container ←
flutter: Column ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#04b41 ink renderer]
flutter: ← NotificationListener<LayoutChangedNotification> ← CustomPaint ← ⋯
flutter: parentData: <none> (can use size)
flutter: constraints: BoxConstraints(w=363.0, h=0.4)
flutter: size: Size(363.0, 0.4)
flutter: direction: vertical
flutter: mainAxisAlignment: spaceBetween
flutter: mainAxisSize: max
flutter: crossAxisAlignment: center
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
flutter: Another exception was thrown: A RenderFlex overflowed by 74 pixels on the bottom.
Voici mon code:
new SingleChildScrollView(
child: new Card(
margin: EdgeInsets.all(0.0),
elevation: 2.0,
color: MyApp.getTheme().canvasColor,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new ListTile(
title: new Text("FB", style: new TextStyle(
fontWeight: FontWeight.bold,
),),
subtitle: new Text("Facebook, Inc."),
onTap: () {
setState(() {
if (this._bodyHeight == 200.0) {
this._bodyHeight = 0.0;
} else {
this._bodyHeight = 200.0;
}
});
},
trailing: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
),
onPressed: () {
setState(() {
mode++;
if (mode == 1) {
text = "+0.80%";
} else if (mode == 2) {
text = "+1.41";
} else {
text = "513.3B";
mode=0;
}
});
},
child: new Text("+1.41", style: new TextStyle(
color: Colors.white,
),),
color: Colors.green,
)
),
new Container(
child: new AnimatedContainer(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Text(""),
new Padding(
padding: new EdgeInsets.only(bottom: 5.0),
child: new Column(
children: <Widget>[
new Divider(),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new FlatButton(
onPressed: () {
setState(() {
if (this._bodyHeight == 200.0) {
this._bodyHeight = 0.0;
} else {
this._bodyHeight = 200.0;
}
});
},
child: new Text(
"CANCEL",
style: new TextStyle(
color: Colors.grey,
),
),
),
new FlatButton(
onPressed: null,
child: new Text(
"SAVE",
style: new TextStyle(
color: MyApp.getTheme().indicatorColor,
),
),
),
],
),
],
),
)
],
),
width: 400.0,
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 500),
height: _bodyHeight,
color: MyApp.getTheme().canvasColor,
),
),
],
),
),
),
Merci beaucoup!
J'ai vérifié votre code et la raison de l'erreur était Column dans le FlatButton and Dividers.
new SingleChildScrollView(
child: new Card(
margin: EdgeInsets.all(0.0),
elevation: 2.0,
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new ListTile(
title: new Text(
"FB",
style: new TextStyle(
fontWeight: FontWeight.bold,
),
),
subtitle: new Text("Facebook, Inc."),
onTap: () {
setState(() {
if (this._bodyHeight == 200.0) {
this._bodyHeight = 0.0;
} else {
this._bodyHeight = 200.0;
}
});
},
trailing: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.all(new Radius.circular(20.0)),
),
onPressed: () {
setState(() {
mode++;
if (mode == 1) {
text = "+0.80%";
} else if (mode == 2) {
text = "+1.41";
} else {
text = "513.3B";
mode = 0;
}
});
},
child: new Text(
"+1.41",
style: new TextStyle(
color: Colors.white,
),
),
color: Colors.green,
)),
new Container(
child: new AnimatedContainer(
child: Align(
alignment: Alignment.bottomRight,
child: new SingleChildScrollView(
child: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Divider(),
new Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new FlatButton(
onPressed: () {
setState(() {
if (this._bodyHeight == 200.0) {
this._bodyHeight = 0.0;
} else {
this._bodyHeight = 200.0;
}
});
},
child: new Text(
"CANCEL",
style: new TextStyle(
color: Colors.grey,
),
),
),
new FlatButton(
onPressed: null,
child: new Text(
"SAVE",
),
),
],
),
],
),
)),
width: 400.0,
curve: Curves.easeInOut,
duration: const Duration(milliseconds: 500),
height: _bodyHeight,
),
),
],
),
),
), // This trailing comma makes auto-formatting nicer for build methods.
Et pendant l'animation, la colonne déborde. Et parce que la colonne n'est pas visible (et elle devrait être visible), cela provoque cette erreur. Par conséquent, nous allons mettre la colonne dans le SingleChildScrollView pour résoudre le problème afin qu'il prenne en compte le visible.
J'espère que tout est clair, dites-moi si quelque chose n'est pas clair ou si le code ne fonctionne pas.