I am facing problems with Rows in flutter, I want to put my asset at the botton of the container, How can I do that using Row? I tried mainAxisAlignment: MainAxisAlignment.end, and cross.end but is not working...
Widget build(BuildContext context) {
double wi = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Container(
color: Colors.blue,
width: wi,
height: 200,
),
Container(
width: wi,
height: 200,
color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
SvgPicture.asset('assets/escapa.svg', semanticsLabel: 'Flask', color: Colors.black, width: 100,height: 100,)
]
),
)
],
),
),
);
you can download the asset/image.svg here
http://filesharing24.com/d/DVh
Container has property alignment use that,
you can either use it like this
alignment: Alignment(0.0, 0.0), // this means center, range is from -1 to +1
you would need to set it as Alignment(-1.0, 1.0)
or use it like this
alignment: Alignment.bottomRight,
u don't need to play with row or column axis, container property should be enough.
play around with either one of the methods to get exact position
Related
In my layout I have two Widgets in a row, a text and a button.
How can I achieve something like below, where only the Text is centered, and the icon is simply next to it?
---------------------------
Text *
---------------------------
Using Row would center all the contents and would output something like
---------------------------
Text *
---------------------------
Tried: Row(children:[widget1, widget2], mainAxisAlignment: MainAxisAlignment.center);
But this centers both items, causing the text to look off-centered.
You can use CompositedTransformTarget and CompositedTransformFollower as mentioned on comment section by pskink.
class AppPT extends StatelessWidget {
const AppPT({super.key});
#override
Widget build(BuildContext context) {
final LayerLink _layerLink = LayerLink();
return Scaffold(
body: Column(
children: [
Stack(
children: [
Align(
child: CompositedTransformTarget(
link: _layerLink,
child: Container(
color: Colors.red,
width: 100,
height: 60,
alignment: Alignment.center,
child: Text("btn"),
),
),
),
CompositedTransformFollower(
link: _layerLink,
targetAnchor: Alignment.centerRight,
followerAnchor: Alignment.centerLeft,
child: Container(
color: Colors.cyanAccent,
width: 12,
height: 12,
alignment: Alignment.center,
child: Text("*"),
),
),
],
)
],
),
);
}
}
There are few tricks I can think of,
You can use Stack widget with Position.
including another widget on right by applying opacity(invisible) on current snippet.
using transform will be handle if you know the width of the widget.
Transform.translate(
offset: Offset(20 / 2, 0), //20 is the * box size
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
width: 100,
height: 60,
alignment: Alignment.center,
child: Text("btn"),
),
Container(
color: Colors.green,
width: 20,
height: 20,
child: Center(child: Text("*")),
),
],
),
),
Place text and second widget inside row then put the row inside container with alignment center and use SizedBox for spacing between widget instead of Padding Widget.
Container(
color: Colors.green,
alignment: Alignment.center,
height: 100,
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Text("Text"),
SizedBox(width: 10),
Text("*"),
],
),
);
I'd like to have a column take the width of the content, and have some elements align to right and some to the left.
Is this possible?
If I use Align widget on the children the whole column stretches in width. Is there another way?
Thank you
Edit: Example
Center(
child: Container(
color: Colors.yellow,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
color: Colors.red,
width: 50,
height: 50,
),
Text('Here goes some text with variable length'),
Container(
color: Colors.blue,
width: 50,
height: 50,
),
],
),
),
);
I want the column above with the red square to the left and the blue to the right (and the column not stretching to the available width).
Try this-
Center(
child: Container(
color: Colors.yellow,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
color: Colors.red,
width: 50,
height: 50,
),
],
),
SizedBox(width: 100),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: Colors.blue,
width: 50,
height: 50,
),
],
),
],
),
),
)
You can simply try to put the contents of the column in a row, so you would have elements inside containers for their width and height as you like.
Column -> Row -> aligned containers.
I have a Row widget on the bottom of the page that I can't center. I've tried all the mainAxisAlignment's and crossAxisAlignment's there are, as well as wrapping it in an Align widget and setting alignment to alignment.center and it's still on the left edge of the page. I've tried everything and am really stuck. Any help would be appreciated.
The Page (Updated)
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.lightBlue,
centerTitle: true,
elevation: 5,
title: Text("Pathomatic")),
body: Container(
decoration: new BoxDecoration(color: Colors.black),
child: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 2,
child: new Stack(
children: <Widget>[
new Container(
alignment: Alignment.center,
child: _cameraPreviewWidget(context),
),
new Align(
alignment: Alignment.center,
child: GestureDetector(
child: Stack(children: <Widget>[
Positioned(
top: yPosition,
left: xPosition,
child: Container(
// padding: EdgeInsets.only(top: 200.0, left: 20.0),
height: MediaQuery.of(context).size.height / 3,
width: MediaQuery.of(context).size.width / 3,
child:
Image.asset('assets/images/crosshair.png'),
),
),
]),
onPanUpdate: (tapInfo) {
setState(() {
xPosition += tapInfo.delta.dx;
yPosition += tapInfo.delta.dy;
});
}),
),
],
),
),
SizedBox(height: 5),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
_cameraTogglesRowWidget(),
_mlTextWidget(),
],
),
_captureControlRowWidget(context),
//SizedBox(width: 50),
],
),
SizedBox(height: 5),
],
),
),
),
);
}
This is usually because the widget you are trying to center is actually stretching its container. Since it's the size of the screen, it's contents stick to the left. You should use the Flutter Inspector with select widget mode to actually see how large your row is. Then everything will make much more sense.
In your code, your Row is stretching. Try
Row(mainAxisSize: MainAxisSize.min
This should make it not grow. Alternatively, you can keep the row large but make it center its children:
Row(mainAxisAlignment: MainAxisAlignment.Center
Of course, with this approach its children will get close to each other in the center. You can use a SizedBox between them, or use some other way of spacing them apart.
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 100.00,
height: 100.00,
color: Colors.red,
),
])),
));
Currently, the height is 100.00, but I need to stretch it to infinity.
I tried to change the height to double.infinity:
Container(
width: 100.00,
height: double.infinity,
color: Colors.red,
But then I receive the following error:
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
To achieve this, you can either:
1) Use a widget called Expanded widget.
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
),
),
])),
));
2) Give the Container a height and width of the device screen using the MediaQuery class
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
// give it a width equals to the device screen
width: MediaQuery.of(context).size.width,
// give it a height equals to the device screen
height: MediaQuery.of(context).size.height,
color: Colors.red,
),
])),
));
Wrap your Container with an Expanded-Widget and remove the height completely.
Expanded(
child: Container(
width: 100.00,
color: Colors.red,
),
),
The Expanded-Widget fills the available space of the child of a Row or a Column along the main-axis.
The right way to assign height to is the calculating height of
App Bar
Top Bar Space(Exist on the above App Bar)
Remaining screen
Logic:
1. Get the MediaQuer
final mediaQuery = MediaQuery.of(context);
2. Declare the AppBar Widget and same App Bar instance should be used in Scaffold App Bar
final PreferredSizeWidget appBar = AppBar(
title: Text('Home'),
);
3. Use calculated height
Container(
width: mediaQuery.size.width,
height: (mediaQuery.size.height -
appBar.preferredSize.height -
mediaQuery.padding.top),
color: Colors.red,
),
I was trying to achieve an effect of allowing a widget to overflow to another widget as seen here
The code I've this far is this:
#override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return new Column(children: <Widget>[
new Container(
color: Colors.blue,
height: screenSize.height / 2,
width: screenSize.width,
child: new Center(
child: new Container(
margin: const EdgeInsets.only(top: 320.0),
color: Colors.red,
height: 40.0,
width: 40.0,
),
))
]);
}
This resulted in the following, the square is cut off by the container.Is there another approach to this?
Generally speaking you should never overflow in flutter.
If you want a specific layout, you'll need to explicitly separate the "overflowing" widget on a different layer.
One solution for that is Stack widget, which allow widgets to be above each others.
In the end to achieve this :
the flutter code would be
new Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Container(
color: Colors.blue,
),
),
new Expanded(
child: new Container(
color: Colors.white,
),
),
],
),
new Center(
child: new Container(
color: Colors.red,
height: 40.0,
width: 40.0,
),
)
],
);