[英]Flutter bottom overflowed by infinity pixels
I'm facing this issue where I keep getting "bottom overflowed by infinity pixels" when I add a certain widget into a column's children.我正面临这个问题,当我将某个小部件添加到列的子项中时,我不断收到“无限像素溢出的底部”。 Now this is how it looks like before adding the new widget called countdown
:现在这是添加名为countdown
的新小部件之前的样子:
The following is what happens after I add countdown
:以下是我添加countdown
后发生的情况:
Here is the code for the bottom half of the screen, where I add countdown
:这是屏幕下半部分的代码,我在其中添加了countdown
:
final countdown = Countdown();
final quizBottomContent = SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[quizBottomContentText, quizOptions, countdown],
),
)
);
Here is the countdown widget:这是倒计时小部件:
import 'package:flutter/material.dart';
import 'dart:math' as math;
class Countdown extends StatefulWidget {
@override
CountdownState createState() => CountdownState();
}
class CountdownState extends State<Countdown> with TickerProviderStateMixin {
AnimationController controller;
String get timerString {
Duration duration = controller.duration * controller.value;
return '${duration.inMinutes}:${(duration.inSeconds % 60).toString().padLeft(2, '0')}';
}
@override
void initState() {
super.initState();
controller = AnimationController(
vsync: this,
duration: Duration(seconds: 10),
);
}
@override
Widget build(BuildContext context) {
ThemeData themeData = Theme.of(context);
return Scaffold(
body: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Align(
alignment: FractionalOffset.center,
child: AspectRatio(
aspectRatio: 1.0,
child: Stack(
children: <Widget>[
Positioned.fill(
child: AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return CustomPaint(
painter: TimerPainter(
animation: controller,
backgroundColor: Colors.white,
color: themeData.indicatorColor,
));
},
),
),
Align(
alignment: FractionalOffset.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
"Count Down",
style: themeData.textTheme.subhead,
),
AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return Text(
timerString,
style: themeData.textTheme.display4,
);
}),
],
),
),
],
),
),
),
),
Container(
margin: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
FloatingActionButton(
child: AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return Icon(controller.isAnimating
? Icons.pause
: Icons.play_arrow);
},
),
onPressed: () {
if (controller.isAnimating)
controller.stop();
else {
controller.reverse(
from: controller.value == 0.0
? 1.0
: controller.value);
}
},
)
],
),
)
],
),
),
);
}
}
class TimerPainter extends CustomPainter {
TimerPainter({
this.animation,
this.backgroundColor,
this.color,
}) : super(repaint: animation);
final Animation<double> animation;
final Color backgroundColor, color;
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = backgroundColor
..strokeWidth = 5.0
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke;
canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
paint.color = color;
double progress = (1.0 - animation.value) * 2 * math.pi;
canvas.drawArc(Offset.zero & size, math.pi * 1.5, -progress, false, paint);
}
@override
bool shouldRepaint(TimerPainter old) {
return animation.value != old.animation.value ||
color != old.color ||
backgroundColor != old.backgroundColor;
}
}
Some context: Countdown is basically a timer with animation while counting down I extracted from this link .一些上下文:倒计时基本上是一个带有动画的计时器,同时倒计时我从这个链接中提取。 So the timer would be just below the buttons.所以计时器就在按钮下方。
try to set mainaxissize of the column mainAxisSize: MainAxisSize.min,
尝试设置列mainAxisSize: MainAxisSize.min,
update更新
ok so if you are trying to Countdown widget as a widget in a column you can remove the scaffold from build method of count down widget and wrap it in a container and define a height好的,如果您尝试将倒计时小部件作为列中的小部件,您可以从倒计时小部件的构建方法中移除脚手架并将其包装在容器中并定义高度
return Scaffold(
body: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
to到
return Container(
height: 100,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Column(
I had similar issue , wrapping the quizBottomContent
with Expanded
widget solved it for me:我有类似的问题,用Expanded
小部件包装quizBottomContent
为我解决了这个问题:
final quizBottomContent = Expanded(
child: SingleChildScrollView(
...
)
);
只需用容器包装该小部件并指定高度即可
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.