I was hoping that someone could help me with an overflow issue when I turn the screen horizontally. When I turn the screen horizontally I get the exception:
The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex. Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView. The specific RenderFlex in question is: RenderFlex#baeb5 relayoutBoundary=up16 OVERFLOWING: creator: Column ← Padding ← ColoredBox ← ConstrainedBox ← Container ← _SingleChildViewport ← IgnorePointer-[GlobalKey#3fcbb] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#4a7bc] ← Listener ← ⋯ parentData: offset=Offset(12.0, 12.0) (can use size) constraints: BoxConstraints(0.0<=w<=762.3, h=133.7) size: Size(762.3, 133.7) direction: vertical mainAxisAlignment: start mainAxisSize: max crossAxisAlignment: center verticalDirection: down
And the prompt on my emulator:
BOTTOM OVERFLOW BY 194 PIXELS
Now because of this exception I tried adding a "SingleChildScrollView" to fix the issue, allowing the answer options to scroll and not overflow, however the scroll doesn't seem to work and the problem still persists. So I'm hoping someone could help me fix the issue and allow my quiz page to be worked on horizontally without error as well. Thank you very much for your help!
quiz.dart
class Salvation extends StatefulWidget {
const Salvation({Key? key}) : super(key: key);
@override
State<Salvation> createState() => _SalvationState();
}
class _SalvationState extends State<Salvation> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Quiz')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Column( children: [
Container(
height: constraints.maxHeight / 4,
child: Padding(padding: EdgeInsets.fromLTRB(12, 12, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text('Question',
style: TextStyle(fontSize: 20.0,)),))
),
Visibility(// visible: ,
child: Container(
height: constraints.maxHeight / 4,
child: Padding(padding: EdgeInsets.fromLTRB(12, 3, 12, 6),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(118, 60, 51, 0.5),
),
width: double.infinity,
child: Padding(padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Example/Image Box',
style: TextStyle(fontSize: 17.0,)),
// RichText(text: text)
Text('Hello there',
style: TextStyle(fontSize: 15.0,)),
],),
)),
),
),),
SingleChildScrollView(
child:Container(
height: constraints.maxHeight / 2,
color: const Color.fromRGBO(155, 205, 255, 0.8),
child: Padding(padding: const EdgeInsets.fromLTRB(12, 12, 12, 20),
child: Column(children: [
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option A'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option B'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option C'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
onLongPress: () {},
),),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option D'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),),
]),
),
),
)],
);
},
),
);
}
}
Edit: This question got answered, but the solution created another issue. So if you would like to help out with this question or you encounter the same issue follow the link. :)
CodePudding user response：
you need no wrap column in singlechildscrollview instead of container.
class Salvation extends StatefulWidget {
const Salvation({Key? key}) : super(key: key);
@override
State<Salvation> createState() => _SalvationState();
}
class _SalvationState extends State<Salvation> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Quiz')),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Column(
children: [
Container(
height: constraints.maxHeight / 4,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 12, 12, 8),
child: Align(
alignment: Alignment.topLeft,
child: Text('Question',
style: TextStyle(
fontSize: 20.0,
)),
))),
Visibility(
// visible: ,
child: Container(
height: constraints.maxHeight / 4,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 3, 12, 6),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Color.fromRGBO(118, 60, 51, 0.5),
),
width: double.infinity,
child: Padding(
padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Example/Image Box',
style: TextStyle(
fontSize: 17.0,
)),
// RichText(text: text)
Text('Hello there',
style: TextStyle(
fontSize: 15.0,
)),
],
),
)),
),
),
),
//not here
Container(
height: constraints.maxHeight/2,
color: const Color.fromRGBO(155, 205, 255, 0.8),
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 12, 12, 20),
child: SingleChildScrollView( //here
child: Column(children: [
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option A'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option B'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option C'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
onLongPress: () {},
),
),
Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 6),
child: ListTile(
title: Text('Option D'),
tileColor: const Color.fromRGBO(6, 145, 248, 1),
shape: RoundedRectangleBorder(
side: const BorderSide(
color: Colors.black, width: 10),
borderRadius: BorderRadius.circular(5)),
onTap: () {},
),
),
]),
),
),
)
],
);
},
),
);
}
}