This is my code for better understanding. I am using text view to display paragraphs inside a column. The size of my container is fixed in which my text view is placed.
Edit:-
When I use singlechildscrollview on textview with scroll direction : Axis. horizontal it works but when I change the scroll direction to vertical it shows the same error.
Container(
color: Colors.amber,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.85,
child: PageView(
//physics: NeverScrollableScrollPhysics(),
//to get list as pages using pageview
children: List.generate(4, (index) {
//creating indivadiuals pages for pageview inside a list
map_of_answers['q $index'] = idea['q $index'];
return Column(
children: [
Container(
//this is our question textview widget
width: double.infinity,
margin: const EdgeInsets.all(20),
child: Text(list_of_questions[index],
textAlign: TextAlign.center,
style: GoogleFonts.openSans(
fontWeight: FontWeight.w500, fontSize: 25)),
),
Container(
//our answer textview widget
padding: const EdgeInsets.all(20.0),
width: double.infinity,
child: Text(
idea['q $index'],
style: GoogleFonts.openSans(fontSize: 15),
),
),
],
);
}),
controller: controller,
onPageChanged: (value) {
setState(() {
activeIndex = value;
});
}));
Here is the screenshot of the error on my phone.
CodePudding user response:
You can wrap the Column Widget with SingleChildScrollView
this will solve the problem :
Container(
color: Colors.amber,
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.85,
child: PageView(
//physics: NeverScrollableScrollPhysics(),
//to get list as pages using pageview
children: List.generate(4, (index) {
//creating indivadiuals pages for pageview inside a list
map_of_answers['q $index'] = idea['q $index'];
return SingleChildScrollView(
// add this widget
child: Column(
children: [
Container(
//this is our question textview widget
width: double.infinity,
margin: const EdgeInsets.all(20),
child: Text(list_of_questions[index],
textAlign: TextAlign.center,
style: GoogleFonts.openSans(
fontWeight: FontWeight.w500, fontSize: 25)),
),
Container(
//our answer textview widget
padding: const EdgeInsets.all(20.0),
width: double.infinity,
child: Text(
idea['q $index'],
style: GoogleFonts.openSans(fontSize: 15),
),
),
],
),
);
}),
controller: controller,
onPageChanged: (value) {
setState(() {
activeIndex = value;
});
}),
),
);
CodePudding user response:
Container adapts its size accordingly to the child widget if you don't specify its height
and width
. Meaning if height
is empty, it will look at its child height
to size itself. In this case, it's your Text
widget. Since your Text
widget is given unlimited height, it will display all of its current content, thus leading to overflow, or more than the MediaQuery.of(context).size.height * 0.85
height.
You can either specify the Container
height or make it scrollable. Wrapping it with ListView
or SingleChildScrollView
can be done either way.