flutter stack positioned column scroll doesn't work
 
RESULT


Problem: Column scroll doesn't work on Stack Positioned.
Problem 2: Bottom overloaded by xxx pixels in flutter

Extra Tags
singlechildscrollview keyboard full scroll
scaffold does not resize when keyboard appear
flutter keyboard open change size from scroll

Normally
I'm added SingleChildScrollView on Scaffold body.
But this way Positioned inside Column scroll doesn't work.


How to fix
I added SingleChildScrollView before Column widget. 
I added Padding before SingleChildScrollView widget. In this way it works when the keyboard is opened.
I added Container before Padding

>Container 
>>Padding
>>>SingleChildScrollView 
>>>>Column 
Note: Container height mandatory.



NORMALLY
return Scaffold(
      appBar: null,
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.grey,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Positioned(
                top: 0.0,
                left: 0.0,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: 140,
                  margin: EdgeInsets.only(top: 15),
                  padding: EdgeInsets.all(20.0),
                  color: Colors.orange[100],
                  child: Text(
                    "TEST TITLE",
                    style: TextStyle(fontSize: 22),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
              Positioned(
                top: 60,
                left: 0.0,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 1',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 2',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 3',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 4',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 5',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 6',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 7',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 8',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 9',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 10',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 11',
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );


HOW TO FIX

return Scaffold(
      appBar: null,
      body: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      color: Colors.grey,
      child: Stack(
        alignment: Alignment.center,
        children: [
          Positioned(
            top: 0.0,
            left: 0.0,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: 140,
              margin: EdgeInsets.only(top: 15),
              padding: EdgeInsets.all(20.0),
              color: Colors.orange[100],
              child: Text(
                "TEST TITLE",
                style: TextStyle(fontSize: 22),
                textAlign: TextAlign.center,
              ),
            ),
          ),
          Positioned(
            top: 0,
            left: 0.0,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height:  MediaQuery.of(context).size.height,
              child: Padding(
                padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                child: SingleChildScrollView(
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 1',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 2',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 3',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 4',
                        ),
                      ),
                      TextFormField(
                        decoration: InputDecoration(
                            hintText: "text input",
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 5',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 6',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 7',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 8',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 9',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 10',
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(
                            vertical: 30, horizontal: 20),
                        color: Colors.red,
                        margin: EdgeInsets.all(5),
                        child: Text(
                          'TEXT 11',
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
        ),
    );


Screenshoot



Fix

 

Author: Engin ATALAY
Date: 6.02.2021 12:53:29
View Count: 101
 
 

COMMENTS
 
No comments yet. Be the first to comment who you are.
 
 
 
 
 
 
 
WRITE COMMENT
 
 
Your Name :
 
 
 
E-mail :
 
 
 
Your Message :
 
 
 
 
 
 
 
This project : ASP.NET MVC , RAZOR, Entity Framework , CSS , HTML , JQUERY(2.0.2) , AJAX the C# side-tier architecture was developed with logic.
 
Yukarı Çık