CATEGORIES
>>
Dart(2)
>>
Errors(5)
>>
Android(11)
>>
Errors(1)
>>
Errors(2)
>>
Windows 8(3)
>>
iPhone7(1)
>>
Errors(4)
>>
Html(1)
RECOMMENDED SITES
flutter stack positioned column scroll doesn't work
RESULT
.gif)
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.
.PNG)
NORMALLY
HOW TO FIX
Screenshoot
Fix
.PNG)
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.>Container
>>Padding
>>>SingleChildScrollView
>>>>Column
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: 9300
COMMENTS
Usama
13
Aralık
2022
17:31
Hope my message finds you well. Thankyou so much for you solution. it was the issue that I was facing for quite some time now.
