i want add a scrollbar to my chatbot when text is bigger user can scroll content

Question

When there is more text in my response i cant read it becasue of height chat window. So i want add there a scrollbar .

  Flexible(
                  child: Container(
                    padding: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(10.0),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.1),
                          blurRadius: 5.0,
                          offset: Offset(0, 2),
                        ),
                      ],
                    ),
                    child: SingleChildScrollView(         //wrapping the Text widget inside a SingleChildScrollView
                    child: Text(                          //neviem preco mi to nefunguje
                      _response,
                      style: TextStyle(fontSize: 16.0),
                      ),
                    ),
                  ),
                ),

The code which i add to show scrollbar is exactly here child: SingleChildScrollView( //wrapping the Text widget inside a SingleChildScrollView child: Text( //why it os not working ? _response, style: TextStyle(fontSize: 16.0), ), ),

and the result when i resize chatbot is still not scrollable text ...

The result you can see in the image .

Thanks everyone.

The code which i add to show scrollbar is exactly here child: SingleChildScrollView( //wrapping the Text widget inside a SingleChildScrollView child: Text( //why it os not working ? _response, style: TextStyle(fontSize: 16.0), ), ), Iwas expecting that when i resize chat window there will be scrollbar which i can use and reat whole text.

Answer 1

Add :

resizeToAvoidBottomInset: false,

in Scaffold:

Scaffold(
  resizeToAvoidBottomInset: false,
 body: ...)

Answer 2

When i set fixed height i can see finally scrollbar but it is not good looking here is the code

 > Flexible(   flex: 1,   child: Container(
    >      height: 200,
    >     padding: EdgeInsets.all(8.0),
    >     decoration: BoxDecoration(
    >       color: Colors.white,
    >       borderRadius: BorderRadius.circular(10.0),
    >       boxShadow: [
    >         BoxShadow(
    >           color: Colors.black.withOpacity(0.1),
    >           blurRadius: 5.0,
    >           offset: Offset(0, 2),
    >         ),
    >       ],
    >     ),
    >     child: SingleChildScrollView(
    >       child: Text(
    >         _response,
    >         style: TextStyle(fontSize: 16.0),
    >       ),
    >     ),   ), ),

I try it make auto resizable like this but i cant see no scroolbar again

Expanded(
  child: Container(
    padding: EdgeInsets.all(8.0),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10.0),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.1),
          blurRadius: 5.0,
          offset: Offset(0, 2),
        ),
      ],
    ),
    child: SingleChildScrollView(
      child: Text(
        _response,
        style: TextStyle(fontSize: 16.0),
      ),
    ),
  ),
),

Every time when a want it have flexible it is not working . I cant read whole text i see no scrollbar. Fixed height show scrollbar i can read whole text but it is not good looking .