In Android we can position elements in a linear layout using LayoutGravity , I would like to know how to achieve the same in Flutter. I have widgets in a column and I would like some widgets to be position on the left, some on the right and some on the left. How can I achieve this? Here is my code:
return new Container(
margin: const EdgeInsets.only(top: 16.0),
color: Colors.white,
child: new Column(
children: <Widget>[
//the following textfields must be positioned on the right, but they are on the center
new Text("Hair cut",),
new Text("Shampoo",),
//the button is in the center and that is correct
new RaisedButton(
onPressed: ()=>{},
color: Colors.purple,
child: new Text("Book",style: new TextStyle(color: Colors.white),),
)
],
),
);
Setting crossAxisAlignment to CrossAxisAlignment.end moves everything to the right. I tried adding the textfields in their own Column widget and setting crossAxisAlignment to end but nothing happens.
You can set crossAxisAlignment for a generic alignment. And then override it for a specific item by wrapping it in Align widget.
new Column(
children: <Widget>[
//the following textfields must be positioned on the right, but they are not the center
new Align(
alignment: Alignment.centerRight,
child: new Text("Hair cut"),
),
new Align(
alignment: Alignment.centerRight,
child: new Text("Shampoo"),
),
//the button is in the center and that is correct
new RaisedButton(
onPressed: () => {},
color: Colors.purple,
child: new Text(
"Book",
style: new TextStyle(color: Colors.white),
),
)
],
),
You may also want to wrap your Column into a IntrinsicWidth if you don't want your column to fill the width.
Related
I have two FlatButtons in a row. The row is a column which is in turn in a container that is used for the padding of the screen. This container has padding of right:20 and left:20. I want my buttons to be 20 in from left and 20 in from the right to keep everything aligned in my column. I know the FlatButton widget has default padding and I've tried the solutions in this question Changing the buttons to GestureDectectors widgets works with alignment but doesn't have a very nice user experience, the area to click is too small maybe. Ideally I'd like to remove the padding of the FlatButton on one side left/right depending on which button. Here is my code
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
FlatButton(
child: new Text('SIGN IN',
style: Theme.of(context).textTheme.body1),
onPressed: () {
Navigator.push(
context, SignInPage(widget.onSignedIn));
},
),
new FlatButton(
child: new Text(
'SIGN UP',
style: Theme.of(context).textTheme.body1,
),
onPressed: () {
Navigator.push(
context, SignUpPage(widget.onSignedIn));
},
),
]),
Now with the deprecation of the FlatButton for TextButton
TextButton(
style: TextButton.styleFrom(padding: EdgeInsets.all(0)),
...
)
Use zero padding, for example
padding: EdgeInsets.zero,
To remove extra space from around TextButton and OutlineButton which replace FlatButton use this:
style: OutlinedButton.styleFrom(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
)
try to use option 'padding: EdgeInsets.only( depends which side u wanna padding )'
FlatButton(
padding: EdgeInsets.only(left: 10.0, right:10.0),
child: new Text('SIGN IN',
style: Theme.of(context).textTheme.body1),
onPressed: () {
Navigator.push(
context, SignInPage(widget.onSignedIn));
},
),
SizedBox(
height: 25,
child: ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(
padding: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(kDefaultPadding))),
child: const Text("More"),
)
)
The FlatButton is now deprecated and you can use TextButton.
Even if you set padding to 0, there is still some padding left. To remove it completely you can use RawMaterialButton as suggested by #Arshak here.
Example:
RawMaterialButton(
constraints: BoxConstraints(),
padding: EdgeInsets.all(5.0), // optional, in order to add additional space around text if needed
child: Text('Button Text')
)
I know answer is right there but It took me hours to do this. So I thought to add it as answer also.
I want my body to be scrollable with this code below i included and image of what is is now
I need help in getting this thing to work
any opinions
to get a better idea
it is an e-commerce app with a carousel then below it categories and the below them the products
i need scrolling to be as if all of this is on part
how?
body: new Column(
children: <Widget>[
// ================= IMAGE CAROUSEL BEGINS HERE ==================
new ImageCarouselUI(),
// ================= HORIZONTAL LIST SECTION ====================
//padding widget
new Padding(padding: const EdgeInsets.all(6.0),
child: Container(
alignment: Alignment.centerLeft,
child: new Text('Categories', style: new TextStyle(fontSize: 15.0),)),
),
//Horizontal list view begins here
HorizontalList(),
//padding widget
new Padding(padding: const EdgeInsets.all(10.0),
child: new Container(
alignment: Alignment.centerLeft,
child: new Text('Recent products')),),
//grid view
new Flexible(
child: Products()
),
],
),
Image Of What I Want It to be:
If all your body is only one complex widget you can use use a SingleChildScrollView class.
//...
body: SingleChildScrollView ( // this will make your body scrollable
child: Column(
/// your parameters
children: <Widget> [
// your widgets,
// your widget...
],
),
)
,
NOTE: Im using Navigator.of(context).push to push ModalRoute,
Hi I have page with ModalRoute with TextFormField in the body, but when keyboard show up, the input is being hide by keyboard, how to fix this?
return Container(
child: ListView(
children: <Widget>[
//other widget
SizedBox(height: _qtyAnimation.value),
Row(
children: <Widget>[
Expanded(
child: Text(
"Jumlah",
style: TextStyle(fontWeight: FontWeight.bold),
),
),
SizedBox(
width: 145.0,
child: TextFormField(
focusNode: _qtyFocusNode,
controller: qty,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0.0),
prefixIcon: IconButton(
icon: Icon(Icons.remove),
onPressed: () {},
),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey, width: 0.1),
),
suffixIcon: IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
),
),
),
],
),
],
);
thats my code, i try with focusnode and more, still same result
please help me
thanks solve my problem with this padding on bottom of textfield
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom));
and mare reverse list
This worked for me...
First add this
final bottom = MediaQuery.of(context).viewInsets.bottom;
Then use a SingleChildScrollView() to wrap around the main widget (whatever you're using, e.g. Column, ListView, etc) like this...
You need "reverse: true"
Widget build{
return Scaffold(
body: SingleChildScrollView(
reverse: true;
child: Container(...
You also need these two lines of code for the Scaffold as well..
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: SingleChildScrollView(...
and finally, reference the 'bottom' for your EdgeInsets..
body: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Container(...
You need to wrap everything in a SingleChildScrollView and set the reverse to true.
SingleChildScrollView(
reverse: true,
child: Container(),
);
Just that worked for me!
I had a similar problem. I try all solution, but didn't work.
Finally I removed
<item name="android:windowFullscreen">true</item>
from my styles.xml file in android folder, and fix the problem.
There are few methods for this (as of Dec 3rd 2018):
You can read this for a better solution: When i select a Textfield the keyboard moves over it.
Inside Scaffold() add: resizeToAvoidBottomPadding: false,.
You can also wrap your TextWidget with SingleChildScrollView(). This will allow you to scroll whenever the keyboard is shown.
Set resizeToAvoidBottomInset to false inside your Scaffold Widget.
Note that resizeToAvoidBottomPadding will be deprecated.
Scaffold( resizeToAvoidBottomInset: false, ...)
I use form elements in modal_bottom_sheet plugin. I solved it by just adding the following code to SingleChildScrollView.
padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom)
Too add to the commonly accepted answers here which is
body: SingleChildScrollView(
reverse: true,
child: Container(
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Stack(
fit: StackFit.loose,
children: <Widget>[
I added a thing to the bottom inset to prevent it from going too high.
var bottom = MediaQuery.of(context).viewInsets.bottom;
bottom = max(min(bottom, 80), 0);
What worked for me was combining the docs with tips over here. It uses, LayoutBuilder, SingleChildScrollView, Padding (with bottom hack) and finally, ConstrainedBox (to use Expanded). By combining these It works with Expanded widgets inside Columns.
The docs (from where LayoutBuilder comes):
https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html
Structure
return Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,`
body: SafeArea(
child: Container(
child: LayoutBuilder(builder:
(BuildContext context, BoxConstraints viewportConstraints) {
return SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
maxHeight: viewportConstraints.maxHeight),
child: Column(
SingleChildScrollView does solve the problem while the resizeToAvoidBottomInset is set to true, while setting it to false would be a not recommended solution. Let me explain why:
When user presses the TextField, usually a virtual keyboard will popup and takes up a large portion of the bottom space on the screen. In such case, problem would occur, if the TextField is near said bottom, it will be covered by the keyboard (resizeToAvoid... set to false), and user will be unable to see what they've typed in; if there are other widgets below the TextField (when resizeToAvoid is true, e.g. buttons in the same Column with TextField), there will be overflow because there is no space for them to show on the remaining viewport.
Speaking from a user's perspective, what we want is:
TextField who gets focus is always visible.
No bottom overflow and bugged graphics.
However, such description is not technical, it does not tell us how exactly do we implement it. What we actually want is, make the whole layout scrollable, and allow Scaffold to resize. When the viewport resizes, anything below the focused TextField scrolls away to the invisible bottom, and the TextField itself snaps to the keyboard.That's why SingleChildScrollView + resize = true is what we want.
To have a centered content first on build method I added this:
final bottom = MediaQuery.of(context).viewInsets.bottom;
and return this:
return GestureDetector(
onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
child: Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
fit: StackFit.expand,
children: [
///Content
Align(
alignment: Alignment.center,
child: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: [
MyContent()
],
),
),
),
),
///Button
Align(
alignment: Alignment.bottomCenter,
child: MyBottomButton()
)
],
),
),
);
And it works very well with keyboard flow
In my case, there was were important to use only small padding, otherwise when open the keyboard it makes a big mess.
Padding(padding: EdgeInsets.only(bottom: 20)
Check my solution:
child: Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
body: Container(
color: Colors.black,
child: SingleChildScrollView(
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: 20),
child: Container(
child: ReservationCard(
),
),
),
),
)
For Android, check for windowSoftInputMode. (AndroidManifest.xml)
android:windowSoftInputMode="adjustResize"
I am trying to make a simple chat app, so I created a scaffold and my body, will be the messages and my bottomNavigationBar would be my typing field and sending icon.
I added a text field but when typing the navigation bar is hidden by the keyboard.
this is the code of my BottomNavigationBar :
bottomNavigationBar: new Container(
height: ScreenSize.height/12,
/*color: Colors.red,*/
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Container(
child: new Icon(Icons.send),
width:ScreenSize.width/6,
),
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Material(
child: new Container(
child: new TextField(
autofocus: false,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(9.0),
border: InputBorder.none,
hintText: 'Please enter a search term',
),
),
width:ScreenSize.width*4/6,
),
elevation: 4.0,
/*borderRadius: new BorderRadius.all(new Radius.circular(45.0)),*/
clipBehavior: Clip.antiAlias,
type: MaterialType.card,
)
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new Container(
child: Text('HELLO C1'),
color: Colors.green,
width:ScreenSize.width/6,
),
],
)
],
),
),
here is how it looks when focused :
if you use a Stack on your Scaffold's body, instead of bottomNavigationBar, your nav will push up above the keyboard. even if you fix to the bottom with a Positioned:
Positioned(
bottom: 0.0,
left: 0.0,
right: 0.0,
child: MyNav(),
),
simply wrap your bottom navigation bar with Padding and set it to MediaQuery.of(context).viewInsets,
bottomNavigationBar: Padding(
padding: MediaQuery.of(context).viewInsets,
child: ChatInputField(),
),
Literally just worked through the same issue. Given the code i was refactoring, this worked like a charm. Peep the github link, review his change and apply. Couldn't be much more straight forward: https://github.com/GitJournal/GitJournal/commit/f946fe487a18b2cb8cb1d488026af5c64a8f2f78..
Content of the link above in case the link goes down:
(-)BottomAppBar buildEditorBottonBar(
(+)Widget buildEditorBottonBar(
BuildContext context,
Editor editor,
EditorState editorState,
BottomAppBar buildEditorBottonBar(
folderName = "Root Folder";
}
*REPLACE* return BottomAppBar(
elevation: 0.0,
color: Theme.of(context).scaffoldBackgroundColor,
child: Row(
children: <Widget>[
FlatButton.icon(
icon: Icon(Icons.folder),
label: Text(folderName),
onPressed: () {
var note = editorState.getNote();
editor.moveNoteToFolderSelected(note);
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
*WITH THE WRAPPER* return StickyBottomAppBar(
child: BottomAppBar(
elevation: 0.0,
color: Theme.of(context).scaffoldBackgroundColor,
child: Row(
children: <Widget>[
FlatButton.icon(
icon: Icon(Icons.folder),
label: Text(folderName),
onPressed: () {
var note = editorState.getNote();
editor.moveNoteToFolderSelected(note);
},
)
],
mainAxisAlignment: MainAxisAlignment.center,
),
),
);
}
class StickyBottomAppBar extends StatelessWidget {
final BottomAppBar child;
StickyBottomAppBar({#required this.child});
#override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0.0, -1 * MediaQuery.of(context).viewInsets.bottom),
child: child,
);
}
}
I achieved this by a mix of two things I found separated in the web:
1 - Inside the Scaffold, I put other with only a bottomNavigationBar with a empty Container. For some reason, this trick push all my real bottomNavigationBar up to the top of the keyboard.
Scaffold(
bottomNavigationBar: Container(
height: 0,
),
body: Scaffold(
body: MyWidget(
But, I did not want all the content up, so I got that Package:
2 - I added flutter_keyboard_visibility: ^5.1.0 from
https://pub.dev/packages/flutter_keyboard_visibility
With this Package, you can do anything you want in response to keyboard visibility - is up to you. In my case, I made all content of my real bottomNavigationBar disappear except the textfield, which stay on the top of the keyboard:
[TextFormField] // dont go away,
//The others:
KeyboardVisibilityBuilder(builder: (context, visible) {
return Column(
children: [
visible
? SizedBox(
height: 0,
)
: OtherWidgets(
If you need some kind of button; you can do:
Scaffold(
bottomNavigationBar: bottomNavigationBar,
floatingActionButton: ExampleButton(
text: 'Hello',
),
body: body,
),
You can apply further customizations on the Floating Action Button using parameters in the Scaffold.
There is a simple way to do this if you want to really need to use the bottom navigation bar of the scaffold to put your widgets in rather than put it on a stack. Just wrap your scaffold with another scaffold and it should solve the problem.
return Scaffold(
body: Scaffold(
bottomNavigationBar: yourBottomNavigationBarWidget(),
body: yourBody(),
This works best especially when the height of your widget changes dynamically (because the text user types may introduce multiple lines) and you want the body to resize accordingly. A body in the stack, as suggested by many, will require a bottom padding to be visible over the text field and need to change dynamically as user types which is difficult to handle when you have multiple widgets sitting in and around the text field.
I'm learning Flutter, and I've made some VERY simple modifications to the starter app, so that the floating button changes the text item to a random string from an array.
The problem is that the text is too close to the edge of the screen--needs padding. But whenever I try to add a padding: element in any number of places, VSCode doesn't seem to like it. I've seen padding used in other example code, but can't seem to get it to work in this case.
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'Welcome to DadBot!',
),
new Text(
_txt,
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _changeText,
tooltip: 'Increment',
child: new Icon(Icons.add),
),
);
}
The easiest way to get padding is to wrap your widget in a Padding widget and specify the offset you want.
Fixed the issue by wrapping the Text widget in question within a Padding class, like so:
new Padding(
padding: new EdgeInsets.all(10.0),
child: new Text(
_txt,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.display1,
),
),
I'm still getting used to the way Flutter does things, but I like it!