In my Flutter application I have a form which is encapsulated within a native view using hybrid composition. Tapping an input at the bottom of the form opens the keyboard. This causes the keyboard to overlap the focused form field.
How can I get the keyboard in Flutter to not overlap the form field in the native view component?
Below is my current layout:
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
margin: const EdgeInsets.fromLTRB(0, 20, 0, 0),
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Padding(
padding: EdgeInsets.all(30),
child: Container(
height: 520,
child: AddressDetailsNativeView(),
),
),
),
SizedBox(height: 20),
],
),
),
Take your column widget inside singlechildscroll view widget this will prevent the overlap of the keyboard.
SinglechildscrollView(
child:Column(
children:[
TextField(),
TextField()
]
Related
I'm trying to create a scrollable register form for a Flutter app. I got SingleChildScroll to work, but theres a large padding or inset or something on top of the keyboard that can block content. You can see if pretty well If I scroll all they way to the bottom.
Here's my code.
Widget _buildContainer() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClipRRect(
// This Clips the border Radius of the Container
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
child: Container(
// This sets the attributes of the Container
height: MediaQuery.of(context).size.height * 0.69,
width: MediaQuery.of(context).size.width * 0.9,
decoration: const BoxDecoration(
color: Colors.white,
),
child: Scaffold(
body: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildFirstNameRow(),
_buildLastNameRow(),
_buildEmailRow(),
_buildPasswordRow(),
_buildConfirmPasswordRow(),
_buildRegisterButton(),
],
),
),
),
),
),
),
],
);
}
I've tried setting resizeToAvoidBottomInset: false, in the Scaffold, but that prevents any scrolling from happening.
I've also tried adding to Scaffold as well, but that only changes the padding around that mystery inset.
body: Padding(
padding: EdgeInsets.only(
bottom: 8.0),
Thanks for your Help!
I'm new on flutter and i have a problem.
When i click on the textformField, this one disappears
I put in red the container but normaly it's transparent
I put a stack, then in the background the GoogleMap which is extend. And to have a research effect I put an overlay with the textformfield and I will have specific filter buttons instead of the yellow and green.
The problem is that when I click on the textformfield, it disappears from the screen.
I tried to play with the SingleChildScrollView, ListView, but I still have errors especially because of GoogleMap which takes up all the space
Everything is contained by a Scaffold
Can you help me please, where to give me a solution?
I enclose the code below
cordially
return Stack(
children: [
/// GoogleMap
Column(
children: [
Expanded(
child: GoogleMap(initialCameraPosition: _kInitialPosition),
),
],
),
/// Search Bar And Filter
Positioned.fill(
bottom: _searchBarContainer,
child: SafeArea(
child: Container(
color: Colors.red,
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Row(
children: [
/// Search Bar
Expanded(
child: TextFormField(
decoration: DesignWidget.inputDecorationTexFieldMap(
_searchBarMap, Icons.search),
),
),
/// Filter
Container(
width: _filterContainer,
color: Colors.green,
child: Row(
children: [
Container(
color: Colors.yellow,
width: _filterContainer / 2,
),
Container(
color: Colors.green,
width: _filterContainer / 2,
)
],
),
),
],
),
),
),
),
),
],
);
simply user this pakage [material_floating_search_bar: ^0.3.4]
I think before you use textFormField you either have to define a key or controller.....it happens when you don't define an instance of controller and use that controller inside of textFormField controller.
Okay i found the solution
I need to add (to Scallfold) : resizeToAvoidBottomInset: false
Now I am using row to horizon some component in flutter, this is my code:
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8.0),
child: Text(
item.subName,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
Padding(
padding: const EdgeInsets.only(top: 8,bottom: 8.0,right: 1),
child: ButtonTheme(
minWidth: 50,
height: 30.0,
child:RaisedButton(
color: Theme.of(context).primaryColor,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(5.0)),
onPressed: () async {
print("pressed");
},
child: Text("Subscribe"),
)
),
)
],
)
now I want the button subscribe align right, what should I do to make it work? I am tried like this but failed:
padding: const EdgeInsets.only(top: 8,bottom: 8.0,right: 1),
I am tried to make the button with one pixel of the screen, but it seems not working.
If you want something like this:
You can set the mainAxisAlignment property of Row to spaceBetween
What you are trying to add is padding which only surrounds the widget, it will not align the widget to right. it will add padding to the right side of the Widget.
In Row() widget make mainAxisAlignment: MainAxisAlignment.spaceBetween. This will align the Subscribe button to right.
If you want space between the widgets of the row.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
To Align the widgets completely on the right.
Row(
mainAxisAlignment: MainAxisAlignment.end,
),
To make the widgets take up the space evenly in the row.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
),
whenever I tap on any of the options of the given 4 buttons, my new data loads in the text and in the 4 option fields.
but the scroll view doesn't come back to its normal position, instead, it remains down, at what position I had left it, previously.
so how to get singlechildscrollview back to its original form after every refresh?
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
margin:EdgeInsets.only(top: 50.0,bottom: 50) ,
decoration: BoxDecoration(
color: Color(0xFFf2f2f2),
borderRadius: BorderRadius.only(topRight: Radius.circular(40),topLeft:Radius.circular(40) ),
),
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
height: 800,
child: (
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 50,left: 20,right: 20),
child: Text(question.replaceAll("\\n", "\n"),style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),),
),
SizedBox(height: 20),
optionButton(text: option1),
SizedBox(height: 30),
optionButton(text: option2),
SizedBox(height: 30),
optionButton(text: option1),
SizedBox(height: 30),
optionButton(text: option2),
SizedBox(height: 30),
Spacer(),
Column(
children: [
Text("TOTAL"),
Container(
width: MediaQuery. of(context). size. width,
color: Colors.blue,
child:
Center(child: Text(score.toString(),)),),
SizedBox(height: 20)
],),
],
)
),
),
),
),
),
Since I'm not sure what optionButton looks like, you'll probably need this first above your build method:
ScrollController scrollController = new ScrollController();
Then if your optionButton is within the same class, call this within your button function onTap(){} or onPressed(){} :
scrollController.jumpTo(0.0);
Make sure to add the controller to SingleChildScrollView
If optionButton is from a different class, then I'll have to change my answer.
Let me know if this helps!
I have the following code:
class _MyHomePageState extends State {
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return new Scaffold(
body: new Column(
children: [
new Container(
color: JBTheme.colorGreenBrand,
height: 130.0,
alignment: Alignment.bottomLeft,
child: new Center(
child: new Align(
alignment: Alignment.bottomCenter,
child: new Container(
color: JBTheme.colorOrange,
constraints: new BoxConstraints(maxWidth: 270.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Image.asset("flags/flag_dk.png"),
new Container(
margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
child: new Text("Danmark"),
),
new Text("DKK")
],
),
new Expanded(child: new Image.asset("images/arrow.png")),
new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
new Image.asset("flags/flag_us.png"),
new Container(
margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
child: new Text("USA"),
),
new Text("USD")
],
)
],
),
),
),
),
),
new Expanded(
child: new Container(
color: JBTheme.colorGreyMedium,
child: new Column(
children: [
new Expanded(child: new Container()),
new Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: new Card(
elevation: -8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: new Container(
width: 200.0,
height: 30.0,
color: JBTheme.colorWhite,
child: new Stack(
children: [
new TextField(
textAlign: TextAlign.center
)
],
)
),
)
)
],
),
)),
new Container(
height: 260.0,
color: JBTheme.colorGreenMint,
)
],
));
}
}
And it looks like this:
But when I click the TextField and the keyboard opens I get this:
I did not expect all of my layout to be moved up by the full keyboard height, I would like it to only move up enough so that the focused TextField is visible (and not to give a error). How can I fix this, and why is it happening?
Thank you
Søren
There are two solutions to this problem.
Add resizeToAvoidBottomPadding: false to your Scaffold
Scaffold(
resizeToAvoidBottomPadding: false,
body: ...)
Put your Scaffold body inside a scrollableView (like SingleChildScrollView or ListView)
new Scaffold(
body: SingleChildScrollView(child: //your existing body
...)
You can find similar problem and answer here
This is Flutters way of showing us how many pixels of content will be hidden from users eyesight when using the keypad. Try setting resizeToAvoidBottomPadding to false... From docs:
Whether the body (and other floating widgets) should size themselves
to avoid the window's bottom padding.
Scaffold(
resizeToAvoidBottomPadding: false,
This will avoid the resizing so you will at least avoid the dev warning being shown. But remember user will not see some content, and also this is a developer warning.
Update on 17/10/2019
resizeToAvoidBottomPadding is now Deprecated.
Use resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears.
Scaffold(
resizeToAvoidBottomInset: false,
If you just use SingleChildScrollView content looses vertical alignment. You can also wrap the SingleChildScrollView in a Center Widget.
child: Center(
child: SingleChildScrollView(
child: Column(
children: <Widget>...
A full description of this error and two possible solutions can be found on Medium article available on https://medium.com/zipper-studios/the-keyboard-causes-the-bottom-overflowed-error-5da150a1c660. The last one works great for me.