Home > Blockchain >  My textview just gives me bottom overflowed by pixels. I have tried putting it into expanded,singlec
My textview just gives me bottom overflowed by pixels. I have tried putting it into expanded,singlec

Time:10-06

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.

  • Related