Mixing
Center widget vertically inside a SingleChildScrollView
I'm new to Flutter so I train myself by making a simple form. I realized while I was debugging on my iPhone the virtual keyboard triggered an error : "A RenderFlex overflowed by 29 pixels on the bottom". I fixed this issue by wrapping my Container inside a SingleChildScrollView.
The problem now is my Column's content is no longer center. I can't figure out why ...
Here's my code to help you to understand :
List<Widget> _buildBody() {
var listWidget = List<Widget>();
SingleChildScrollView singleChild = SingleChildScrollView(
padding: EdgeInsets.only(top: 1.0),
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(30.0),
padding: EdgeInsets.all(10.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 50.0),
child: Image.asset(
'assets/github.png',
width: 100.0,
height: 100.0,
),
),
Container(
margin: EdgeInsets.only(bottom: 10.0),
child: TextFormField(
controller: _usernameController,
autofocus: true,
decoration: InputDecoration(
hintText: 'Username',
suffixIcon: Icon(Icons.account_circle)))),
Container(
child: TextFormField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
hintText: 'Password', suffixIcon: Icon(Icons.vpn_key)),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: RaisedButton(
splashColor: Colors.greenAccent,
color: Colors.blue,
child: Text('Submit'),
onPressed: () {
_handleSubmit();
},
),
)
],
),
),
));
listWidget.add(singleChild);
if (_requesting) {
var modal = new Stack(
children: [
new Opacity(
opacity: 0.3,
child: const ModalBarrier(dismissible: false, color: Colors.grey),
),
new Center(
child: new CircularProgressIndicator(),
),
],
);
listWidget.add(modal);
}
return listWidget;
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Github Login'),
),
body: Stack(
children: _buildBody(),
));
}
I added the property "mainAxisAlignment: MainAxisAlignment.center" to my Column. It worked well before I wrapped it into the SingleChildScrollView.
If someone could help me and explain me why it doesn't work anymore I would really appreciated it :)
dart
flutter asked Nov 20 '18 at 17:33
HurobakiHurobaki
159218
add a comment |
I'm new to Flutter so I train myself by making a simple form. I realized while I was debugging on my iPhone the virtual keyboard triggered an error : "A RenderFlex overflowed by 29 pixels on the bottom". I fixed this issue by wrapping my Container inside a SingleChildScrollView.
The problem now is my Column's content is no longer center. I can't figure out why ...
Here's my code to help you to understand :
List<Widget> _buildBody() {
var listWidget = List<Widget>();
SingleChildScrollView singleChild = SingleChildScrollView(
padding: EdgeInsets.only(top: 1.0),
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(30.0),
padding: EdgeInsets.all(10.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 50.0),
child: Image.asset(
'assets/github.png',
width: 100.0,
height: 100.0,
),
),
Container(
margin: EdgeInsets.only(bottom: 10.0),
child: TextFormField(
controller: _usernameController,
autofocus: true,
decoration: InputDecoration(
hintText: 'Username',
suffixIcon: Icon(Icons.account_circle)))),
Container(
child: TextFormField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
hintText: 'Password', suffixIcon: Icon(Icons.vpn_key)),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: RaisedButton(
splashColor: Colors.greenAccent,
color: Colors.blue,
child: Text('Submit'),
onPressed: () {
_handleSubmit();
},
),
)
],
),
),
));
listWidget.add(singleChild);
if (_requesting) {
var modal = new Stack(
children: [
new Opacity(
opacity: 0.3,
child: const ModalBarrier(dismissible: false, color: Colors.grey),
),
new Center(
child: new CircularProgressIndicator(),
),
],
);
listWidget.add(modal);
}
return listWidget;
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Github Login'),
),
body: Stack(
children: _buildBody(),
));
}
I added the property "mainAxisAlignment: MainAxisAlignment.center" to my Column. It worked well before I wrapped it into the SingleChildScrollView.
If someone could help me and explain me why it doesn't work anymore I would really appreciated it :)
dart
flutter asked Nov 20 '18 at 17:33
HurobakiHurobaki
159218
It doesn't make sense to vertically center a vertically scrollable content. Your scroll should be within the centered content, not on its parent
– Rémi Rousselet
Nov 20 '18 at 17:42
So I have to put my SingleChildScrollView inside Column’s children ? But where should I put all my containers ? @RémiRousselet
– Hurobaki
Nov 20 '18 at 17:51
add a comment |
I'm new to Flutter so I train myself by making a simple form. I realized while I was debugging on my iPhone the virtual keyboard triggered an error : "A RenderFlex overflowed by 29 pixels on the bottom". I fixed this issue by wrapping my Container inside a SingleChildScrollView.
The problem now is my Column's content is no longer center. I can't figure out why ...
Here's my code to help you to understand :
List<Widget> _buildBody() {
var listWidget = List<Widget>();
SingleChildScrollView singleChild = SingleChildScrollView(
padding: EdgeInsets.only(top: 1.0),
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(30.0),
padding: EdgeInsets.all(10.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 50.0),
child: Image.asset(
'assets/github.png',
width: 100.0,
height: 100.0,
),
),
Container(
margin: EdgeInsets.only(bottom: 10.0),
child: TextFormField(
controller: _usernameController,
autofocus: true,
decoration: InputDecoration(
hintText: 'Username',
suffixIcon: Icon(Icons.account_circle)))),
Container(
child: TextFormField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
hintText: 'Password', suffixIcon: Icon(Icons.vpn_key)),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: RaisedButton(
splashColor: Colors.greenAccent,
color: Colors.blue,
child: Text('Submit'),
onPressed: () {
_handleSubmit();
},
),
)
],
),
),
));
listWidget.add(singleChild);
if (_requesting) {
var modal = new Stack(
children: [
new Opacity(
opacity: 0.3,
child: const ModalBarrier(dismissible: false, color: Colors.grey),
),
new Center(
child: new CircularProgressIndicator(),
),
],
);
listWidget.add(modal);
}
return listWidget;
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Github Login'),
),
body: Stack(
children: _buildBody(),
));
}
I added the property "mainAxisAlignment: MainAxisAlignment.center" to my Column. It worked well before I wrapped it into the SingleChildScrollView.
If someone could help me and explain me why it doesn't work anymore I would really appreciated it :)
dart
flutter asked Nov 20 '18 at 17:33
HurobakiHurobaki
159218
I'm new to Flutter so I train myself by making a simple form. I realized while I was debugging on my iPhone the virtual keyboard triggered an error : "A RenderFlex overflowed by 29 pixels on the bottom". I fixed this issue by wrapping my Container inside a SingleChildScrollView.
The problem now is my Column's content is no longer center. I can't figure out why ...
Here's my code to help you to understand :
List<Widget> _buildBody() {
var listWidget = List<Widget>();
SingleChildScrollView singleChild = SingleChildScrollView(
padding: EdgeInsets.only(top: 1.0),
child: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(30.0),
padding: EdgeInsets.all(10.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 50.0),
child: Image.asset(
'assets/github.png',
width: 100.0,
height: 100.0,
),
),
Container(
margin: EdgeInsets.only(bottom: 10.0),
child: TextFormField(
controller: _usernameController,
autofocus: true,
decoration: InputDecoration(
hintText: 'Username',
suffixIcon: Icon(Icons.account_circle)))),
Container(
child: TextFormField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
hintText: 'Password', suffixIcon: Icon(Icons.vpn_key)),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: RaisedButton(
splashColor: Colors.greenAccent,
color: Colors.blue,
child: Text('Submit'),
onPressed: () {
_handleSubmit();
},
),
)
],
),
),
));
listWidget.add(singleChild);
if (_requesting) {
var modal = new Stack(
children: [
new Opacity(
opacity: 0.3,
child: const ModalBarrier(dismissible: false, color: Colors.grey),
),
new Center(
child: new CircularProgressIndicator(),
),
],
);
listWidget.add(modal);
}
return listWidget;
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Github Login'),
),
body: Stack(
children: _buildBody(),
));
}
I added the property "mainAxisAlignment: MainAxisAlignment.center" to my Column. It worked well before I wrapped it into the SingleChildScrollView.
If someone could help me and explain me why it doesn't work anymore I would really appreciated it :)
dart
flutter dart
flutter asked Nov 20 '18 at 17:33
HurobakiHurobaki
159218
asked Nov 20 '18 at 17:33
HurobakiHurobaki
159218
asked Nov 20 '18 at 17:33
HurobakiHurobaki
159218
asked Nov 20 '18 at 17:33
HurobakiHurobaki
159218
asked Nov 20 '18 at 17:33
HurobakiHurobaki
159218
159218
It doesn't make sense to vertically center a vertically scrollable content. Your scroll should be within the centered content, not on its parent
– Rémi Rousselet
Nov 20 '18 at 17:42
So I have to put my SingleChildScrollView inside Column’s children ? But where should I put all my containers ? @RémiRousselet
– Hurobaki
Nov 20 '18 at 17:51
add a comment |
It doesn't make sense to vertically center a vertically scrollable content. Your scroll should be within the centered content, not on its parent
– Rémi Rousselet
Nov 20 '18 at 17:42
So I have to put my SingleChildScrollView inside Column’s children ? But where should I put all my containers ? @RémiRousselet
– Hurobaki
Nov 20 '18 at 17:51
It doesn't make sense to vertically center a vertically scrollable content. Your scroll should be within the centered content, not on its parent
– Rémi Rousselet
Nov 20 '18 at 17:42
It doesn't make sense to vertically center a vertically scrollable content. Your scroll should be within the centered content, not on its parent
– Rémi Rousselet
Nov 20 '18 at 17:42
So I have to put my SingleChildScrollView inside Column’s children ? But where should I put all my containers ? @RémiRousselet
– Hurobaki
Nov 20 '18 at 17:51
So I have to put my SingleChildScrollView inside Column’s children ? But where should I put all my containers ? @RémiRousselet
– Hurobaki
Nov 20 '18 at 17:51
add a comment |
2 Answers
2
active
oldest
votes
Solution:
Put your top level Stack inside Center widget.
body: Center(child: Stack(
children: _buildBody(),
)));
Tip to debug:
Use Flutter Inspector to find where the layout is going wrong.
I edited your code a bit(to make to work in my local) and then I inspected. It showed like below
We have a Stack and SingleChildScrollView as per code(refer right side of the diagram where the stack of widgets are displayed). As size is determined by SingleChildScrollView(contents inside it), Stack occupies only little space and by default, it aligned at top. So put it under Center, the whole Stack view will come in center.
answered Nov 21 '18 at 4:00
Dinesh BalasubramanianDinesh Balasubramanian
2,5391715
Thank you it works like a charm ! I was focus on the Column's behaviour I didn't think about Center the whole Stack ...
– Hurobaki
Nov 21 '18 at 9:53
add a comment |
Just wrap the Column in a Center. I used that for my apps and it seems to center the contents of my Column even inside a SingleChildScrollView.
answered Nov 20 '18 at 18:47
CoderCoder
406
Thank you for your answer but unfortunately it doesn't work for my case :/
– Hurobaki
Nov 21 '18 at 10:02
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398476%2fcenter-widget-vertically-inside-a-singlechildscrollview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Solution:
Put your top level Stack inside Center widget.
body: Center(child: Stack(
children: _buildBody(),
)));
Tip to debug:
Use Flutter Inspector to find where the layout is going wrong.
I edited your code a bit(to make to work in my local) and then I inspected. It showed like below
We have a Stack and SingleChildScrollView as per code(refer right side of the diagram where the stack of widgets are displayed). As size is determined by SingleChildScrollView(contents inside it), Stack occupies only little space and by default, it aligned at top. So put it under Center, the whole Stack view will come in center.
answered Nov 21 '18 at 4:00
Dinesh BalasubramanianDinesh Balasubramanian
2,5391715
Thank you it works like a charm ! I was focus on the Column's behaviour I didn't think about Center the whole Stack ...
– Hurobaki
Nov 21 '18 at 9:53
add a comment |
Solution:
Put your top level Stack inside Center widget.
body: Center(child: Stack(
children: _buildBody(),
)));
Tip to debug:
Use Flutter Inspector to find where the layout is going wrong.
I edited your code a bit(to make to work in my local) and then I inspected. It showed like below
We have a Stack and SingleChildScrollView as per code(refer right side of the diagram where the stack of widgets are displayed). As size is determined by SingleChildScrollView(contents inside it), Stack occupies only little space and by default, it aligned at top. So put it under Center, the whole Stack view will come in center.
answered Nov 21 '18 at 4:00
Dinesh BalasubramanianDinesh Balasubramanian
2,5391715
Thank you it works like a charm ! I was focus on the Column's behaviour I didn't think about Center the whole Stack ...
– Hurobaki
Nov 21 '18 at 9:53
add a comment |
Solution:
Put your top level Stack inside Center widget.
body: Center(child: Stack(
children: _buildBody(),
)));
Tip to debug:
Use Flutter Inspector to find where the layout is going wrong.
I edited your code a bit(to make to work in my local) and then I inspected. It showed like below
We have a Stack and SingleChildScrollView as per code(refer right side of the diagram where the stack of widgets are displayed). As size is determined by SingleChildScrollView(contents inside it), Stack occupies only little space and by default, it aligned at top. So put it under Center, the whole Stack view will come in center.
answered Nov 21 '18 at 4:00
Dinesh BalasubramanianDinesh Balasubramanian
2,5391715
Solution:
Put your top level Stack inside Center widget.
body: Center(child: Stack(
children: _buildBody(),
)));
Tip to debug:
Use Flutter Inspector to find where the layout is going wrong.
I edited your code a bit(to make to work in my local) and then I inspected. It showed like below
We have a Stack and SingleChildScrollView as per code(refer right side of the diagram where the stack of widgets are displayed). As size is determined by SingleChildScrollView(contents inside it), Stack occupies only little space and by default, it aligned at top. So put it under Center, the whole Stack view will come in center.
answered Nov 21 '18 at 4:00
Dinesh BalasubramanianDinesh Balasubramanian
2,5391715
answered Nov 21 '18 at 4:00
Dinesh BalasubramanianDinesh Balasubramanian
2,5391715
answered Nov 21 '18 at 4:00
Dinesh BalasubramanianDinesh Balasubramanian
2,5391715
answered Nov 21 '18 at 4:00
Dinesh BalasubramanianDinesh Balasubramanian
2,5391715
2,5391715
Thank you it works like a charm ! I was focus on the Column's behaviour I didn't think about Center the whole Stack ...
– Hurobaki
Nov 21 '18 at 9:53
add a comment |
Thank you it works like a charm ! I was focus on the Column's behaviour I didn't think about Center the whole Stack ...
– Hurobaki
Nov 21 '18 at 9:53
Thank you it works like a charm ! I was focus on the Column's behaviour I didn't think about Center the whole Stack ...
– Hurobaki
Nov 21 '18 at 9:53
Thank you it works like a charm ! I was focus on the Column's behaviour I didn't think about Center the whole Stack ...
– Hurobaki
Nov 21 '18 at 9:53
add a comment |
Just wrap the Column in a Center. I used that for my apps and it seems to center the contents of my Column even inside a SingleChildScrollView.
answered Nov 20 '18 at 18:47
CoderCoder
406
Thank you for your answer but unfortunately it doesn't work for my case :/
– Hurobaki
Nov 21 '18 at 10:02
add a comment |
Just wrap the Column in a Center. I used that for my apps and it seems to center the contents of my Column even inside a SingleChildScrollView.
answered Nov 20 '18 at 18:47
CoderCoder
406
Thank you for your answer but unfortunately it doesn't work for my case :/
– Hurobaki
Nov 21 '18 at 10:02
add a comment |
Just wrap the Column in a Center. I used that for my apps and it seems to center the contents of my Column even inside a SingleChildScrollView.
answered Nov 20 '18 at 18:47
CoderCoder
406
Just wrap the Column in a Center. I used that for my apps and it seems to center the contents of my Column even inside a SingleChildScrollView.
answered Nov 20 '18 at 18:47
CoderCoder
406
answered Nov 20 '18 at 18:47
CoderCoder
406
answered Nov 20 '18 at 18:47
CoderCoder
406
answered Nov 20 '18 at 18:47
CoderCoder
406
406
Thank you for your answer but unfortunately it doesn't work for my case :/
– Hurobaki
Nov 21 '18 at 10:02
add a comment |
Thank you for your answer but unfortunately it doesn't work for my case :/
– Hurobaki
Nov 21 '18 at 10:02
Thank you for your answer but unfortunately it doesn't work for my case :/
– Hurobaki
Nov 21 '18 at 10:02
Thank you for your answer but unfortunately it doesn't work for my case :/
– Hurobaki
Nov 21 '18 at 10:02
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398476%2fcenter-widget-vertically-inside-a-singlechildscrollview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
It doesn't make sense to vertically center a vertically scrollable content. Your scroll should be within the centered content, not on its parent
– Rémi Rousselet
Nov 20 '18 at 17:42
So I have to put my SingleChildScrollView inside Column’s children ? But where should I put all my containers ? @RémiRousselet
– Hurobaki
Nov 20 '18 at 17:51