Is possible change widget layout when app run?
I want change widget position to left or right side of screen if bool change to true or false.
For example inside Row I have widget in centre. But I want change widget on outside to left or right:
return Container(
child: new Row(
children: <Widget>[
// Need change this widget position
new Container(
child:
Text(‘Outside’)
),
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text(
‘Middle’
),
],
),
),
// new Container(
// child:
// Text(‘Outside’)
// ),
],
),
);
Is possible change Container position? I have try use alignment but I cannot make work.
Thanks!
I think what you're looking for is Row's parameter textDirection. If you set this to TextDirection.rtl it should switch the order of its children. I don't believe this propagates downwards but you may want to test that to make sure.
Related
I have Column but issue is if screen very small height there is error:
BOTTOM OVERFLOWED BY 5.0 PIXELS
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CenterBoxText(),
SizedBox(height: 1),
RaisedButton(
child: Text(‘Example’),
),
],
),
I have try replace Column with ListView and this stop error. But now on large screen Widget are display from top and not in center. Because ListView no have mainAxisAlignment: MainAxisAlignment.center.
How to solve?
Thanks!
Try wrapping your Column widget with SingleChildScrollView widget, It will provide the ability to scroll.
Like this :
SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CenterBoxText(),
SizedBox(height: 1),
RaisedButton(
child: Text(‘Example’),
),
],
),
),
If you are having problems with the Column creating an overflow, then it is probably overflow in the vertical axis. ListView enables scrolling in the vertical axis and allows the overflow pixels to be below the viewing screen. That is why ListView works for you and Column doesn't. Since you want Column, then you just need to wrap the Column in an Expandable so the Column fits within the available space.
Here is a complete example:
import 'package:flutter/material.dart';
class ColumnTest extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//CenterBoxText(),
SizedBox(height: 1),
RaisedButton(
child: Text('example'),
),
],
),
))
],
),
);
}
}
Replace your Column with ListView.
In your ListView - add - shrinkWrap: true, then wrap your ListView with Center widget.
So i like to figure out how to make Card widget become full width in flutter, basically it only expand its width based on its child, i want it to fit the screen, the task fairly simple but im having a really hard time achieving that, in my scaffold basically it contain two card, and have some text in it, the card only expand to the size of the end of the text, i want the card to be full width, how do i achieve this?
I expect it the card to be full width of the screen, but the card only wrap the children text widget
Wrap the Column in a Container widget and set it's width to double.infinity
This way you'll save some lines of code.
Example Code:
Container(
width : double.infinity,
child: Column([...])
)
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
// flex:3,
child: Container(
padding: EdgeInsets.all(20.0),
color: Colors.cyan,
child: Text('1'),
)//Container
),//Expanded
],
)//column
this should do the trick
Try this.
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: double.infinity,
child: new Card(child: Text("This Card is Expanded to full width"),),
)
],
)
You can get the screen width with MediaQuery
final screenWidth = MediaQuery.of(context).size.width;
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.
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.
I have a Stack widget with some children. One of those children is an Align which has a Container child which has a Column child. This Column has some children. Now, in my Stack, the Column is way bigger than it should be (it fills the complete screen) although a third of that space would be enough. I'd like to know how I can use something like Flexible so I can use the fit property to tighten up the space. Is this possible?
Here is a representation of my code:
new Stack(
children: <Widget>[
new Container(...),
new Align( // This takes up way more space than needed!
alignment: new Alignment(1.0, 1.0) // This widget should be displayed at the bottom
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget> [
new Container(child: new Center(child: new Text("text"))),
new Row(children: [...]),
new Row(children: [...]),
new Row(children: [...]),
new Row(children: [...]),
]
)
)
)
]
)
I tried playing around with the fit property but without any luck.
By default, Column has mainAxisSize defaulting to MainAxisSize.max.
Which means that Column will take all the available height.
In your case, you don't want that. So you can set that value to MainAxisSize.min, which will do the opposite : fit it's children.
The end result is :
child: new Stack(
children: <Widget>[
new Container(...),
new Align(
alignment: Alignment.bottomCenter,
child: new Container(
color: Colors.purple,
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[new Text("foo"), new Text("hello world")],
),
),
)
],
),