Manage multiscreen size with TextField Flutter
I want to design a page for my Flutter app that can be displayed with the same aspect on all screen devices without having to scroll to see the bottom of the page. In the left image below you can see the result of my code :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
headline: TextStyle(fontSize: 64.0),
subhead: TextStyle(fontSize: 48.0),
title: TextStyle(fontSize: 36.0),
subtitle: TextStyle(fontSize: 24.0),
button: TextStyle(fontSize: 24, color: Colors.white),
body1: TextStyle(fontSize: 18.0, color: Colors.black),
body2: TextStyle(fontSize: 14.0, color: Colors.black),
),
),
home: Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.pushNamed(context, '/settings');
},
),
),
],
),
Text(
'My Title Here',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 64.0),
),
TextField(
style: Theme.of(context).textTheme.body1,
),
TextField(
style: Theme.of(context).textTheme.body1,
),
RaisedButton(child: Text('Start'), onPressed: () {}),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
],
),
],
),
),
),
);
}
}
It's very simple, and it's looking fine, but when I clicked on the second TextField, I have a problem of overflow like you can see in the right image : (I made my test on an iPhone 5s).
I tested to add a SingleChildScrollView, a SafeArea but when I do that I have a big blank space at the bottom of the screen and it's not what I m looking for. How can I solve this ?
Thanks for your help
flutter flutter-layout asked Jan 20 at 15:03
fandrofandro
2,88032544
add a comment |
I want to design a page for my Flutter app that can be displayed with the same aspect on all screen devices without having to scroll to see the bottom of the page. In the left image below you can see the result of my code :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
headline: TextStyle(fontSize: 64.0),
subhead: TextStyle(fontSize: 48.0),
title: TextStyle(fontSize: 36.0),
subtitle: TextStyle(fontSize: 24.0),
button: TextStyle(fontSize: 24, color: Colors.white),
body1: TextStyle(fontSize: 18.0, color: Colors.black),
body2: TextStyle(fontSize: 14.0, color: Colors.black),
),
),
home: Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.pushNamed(context, '/settings');
},
),
),
],
),
Text(
'My Title Here',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 64.0),
),
TextField(
style: Theme.of(context).textTheme.body1,
),
TextField(
style: Theme.of(context).textTheme.body1,
),
RaisedButton(child: Text('Start'), onPressed: () {}),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
],
),
],
),
),
),
);
}
}
It's very simple, and it's looking fine, but when I clicked on the second TextField, I have a problem of overflow like you can see in the right image : (I made my test on an iPhone 5s).
I tested to add a SingleChildScrollView, a SafeArea but when I do that I have a big blank space at the bottom of the screen and it's not what I m looking for. How can I solve this ?
Thanks for your help
flutter flutter-layout asked Jan 20 at 15:03
fandrofandro
2,88032544
add a comment |
I want to design a page for my Flutter app that can be displayed with the same aspect on all screen devices without having to scroll to see the bottom of the page. In the left image below you can see the result of my code :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
headline: TextStyle(fontSize: 64.0),
subhead: TextStyle(fontSize: 48.0),
title: TextStyle(fontSize: 36.0),
subtitle: TextStyle(fontSize: 24.0),
button: TextStyle(fontSize: 24, color: Colors.white),
body1: TextStyle(fontSize: 18.0, color: Colors.black),
body2: TextStyle(fontSize: 14.0, color: Colors.black),
),
),
home: Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.pushNamed(context, '/settings');
},
),
),
],
),
Text(
'My Title Here',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 64.0),
),
TextField(
style: Theme.of(context).textTheme.body1,
),
TextField(
style: Theme.of(context).textTheme.body1,
),
RaisedButton(child: Text('Start'), onPressed: () {}),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
],
),
],
),
),
),
);
}
}
It's very simple, and it's looking fine, but when I clicked on the second TextField, I have a problem of overflow like you can see in the right image : (I made my test on an iPhone 5s).
I tested to add a SingleChildScrollView, a SafeArea but when I do that I have a big blank space at the bottom of the screen and it's not what I m looking for. How can I solve this ?
Thanks for your help
flutter flutter-layout asked Jan 20 at 15:03
fandrofandro
2,88032544
I want to design a page for my Flutter app that can be displayed with the same aspect on all screen devices without having to scroll to see the bottom of the page. In the left image below you can see the result of my code :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
textTheme: TextTheme(
headline: TextStyle(fontSize: 64.0),
subhead: TextStyle(fontSize: 48.0),
title: TextStyle(fontSize: 36.0),
subtitle: TextStyle(fontSize: 24.0),
button: TextStyle(fontSize: 24, color: Colors.white),
body1: TextStyle(fontSize: 18.0, color: Colors.black),
body2: TextStyle(fontSize: 14.0, color: Colors.black),
),
),
home: Scaffold(
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.pushNamed(context, '/settings');
},
),
),
],
),
Text(
'My Title Here',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 64.0),
),
TextField(
style: Theme.of(context).textTheme.body1,
),
TextField(
style: Theme.of(context).textTheme.body1,
),
RaisedButton(child: Text('Start'), onPressed: () {}),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.star),
onPressed: () {},
),
],
),
],
),
),
),
);
}
}
It's very simple, and it's looking fine, but when I clicked on the second TextField, I have a problem of overflow like you can see in the right image : (I made my test on an iPhone 5s).
I tested to add a SingleChildScrollView, a SafeArea but when I do that I have a big blank space at the bottom of the screen and it's not what I m looking for. How can I solve this ?
Thanks for your help
flutter flutter-layout flutter flutter-layout asked Jan 20 at 15:03
fandrofandro
2,88032544
asked Jan 20 at 15:03
fandrofandro
2,88032544
asked Jan 20 at 15:03
fandrofandro
2,88032544
asked Jan 20 at 15:03
fandrofandro
2,88032544
asked Jan 20 at 15:03
fandrofandro
2,88032544
2,88032544
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Hi this is a closed issue on Flutter repo. Replace your column with ListView and instead of using alignment property add paddings and margins to your textfield
OR
You can use SingleChildScrollView as you said in the question
Both the cases you need to add padding to textField to fill the blank space
answered Jan 21 at 8:54
a2ena2en
414315
I found this post too, but this case looks to simple for me to be a bug, I tested these solutions without success.
– fandro
Jan 21 at 21:22
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%2f54277732%2fmanage-multiscreen-size-with-textfield-flutter%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Hi this is a closed issue on Flutter repo. Replace your column with ListView and instead of using alignment property add paddings and margins to your textfield
OR
You can use SingleChildScrollView as you said in the question
Both the cases you need to add padding to textField to fill the blank space
answered Jan 21 at 8:54
a2ena2en
414315
I found this post too, but this case looks to simple for me to be a bug, I tested these solutions without success.
– fandro
Jan 21 at 21:22
add a comment |
Hi this is a closed issue on Flutter repo. Replace your column with ListView and instead of using alignment property add paddings and margins to your textfield
OR
You can use SingleChildScrollView as you said in the question
Both the cases you need to add padding to textField to fill the blank space
answered Jan 21 at 8:54
a2ena2en
414315
I found this post too, but this case looks to simple for me to be a bug, I tested these solutions without success.
– fandro
Jan 21 at 21:22
add a comment |
Hi this is a closed issue on Flutter repo. Replace your column with ListView and instead of using alignment property add paddings and margins to your textfield
OR
You can use SingleChildScrollView as you said in the question
Both the cases you need to add padding to textField to fill the blank space
answered Jan 21 at 8:54
a2ena2en
414315
Hi this is a closed issue on Flutter repo. Replace your column with ListView and instead of using alignment property add paddings and margins to your textfield
OR
You can use SingleChildScrollView as you said in the question
Both the cases you need to add padding to textField to fill the blank space
answered Jan 21 at 8:54
a2ena2en
414315
edited Jan 21 at 8:59
answered Jan 21 at 8:54
a2ena2en
414315
answered Jan 21 at 8:54
a2ena2en
414315
answered Jan 21 at 8:54
a2ena2en
414315
414315
I found this post too, but this case looks to simple for me to be a bug, I tested these solutions without success.
– fandro
Jan 21 at 21:22
add a comment |
I found this post too, but this case looks to simple for me to be a bug, I tested these solutions without success.
– fandro
Jan 21 at 21:22
I found this post too, but this case looks to simple for me to be a bug, I tested these solutions without success.
– fandro
Jan 21 at 21:22
I found this post too, but this case looks to simple for me to be a bug, I tested these solutions without success.
– fandro
Jan 21 at 21:22
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%2f54277732%2fmanage-multiscreen-size-with-textfield-flutter%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
