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.
