I have the following code:
body: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(color: AppColors.LIGHT_BLUE, height: 75),
Positioned(
top: 50,
left: 0,
right: 0,
child: Center(
child: _buildAvatar(
Provider.of<AuthService>(context).getLoggedInUser(),
))),
],
),
Text(user.displayName, style: TextStyle(fontSize: 20))
],
)
which results in the Positioned avatar being clipped:
What am I doing wrong here? Is it incorrect to put a Stack inside of a Column like this? Or, do I need to wrap the Stack in something else?
I think the reason is you put the image into your Positioned widget. Stack widget is used when you want to put some widget in front of a widget.
So i think it have to be like this
body: Column(
children: <Widget>[
Container(
Stack(
children: <Widget>[
Image.network(url); // Image here
Positioned(
top: 50,
left: 0,
right: 0,
child: Center(
child: //Some widget front image (may be Text)
),
],
),
),
Text(user.displayName, style: TextStyle(fontSize: 20))
],
)
And I recommend you to use Expended widget with flex in your column so that you can divide it into many part with height of the part depend on flex.
Related
I'm new at flutter. I coded an example from youtube. At the home screen I have a text at the top:
#override
Widget build(BuildContext context) {
return Container(
alignment: Alignment(0, -0.5),
child: Text(
gameHasStarted ? '' : 'My App',
style: TextStyle(color: Colors.white, fontSize: 25),
),
);
}
}
Now I want to show another text at the bottom. Or on a another position. How to do that? I tried it with Row and Column but, then the two texts are depended from each other.
Thanks
Screenshot
You need to wrap this part with Stack and set your Text where you want
Stack(
children: const [
Positioned(
top: 10,
left: 50,
child: Text("Hello"),
),
Positioned(
bottom: 50,
right: 110,
child: Text("Hello"),
),
],
)
or also use with align in stack
Stack(
children: const [
Align(
alignment: Alignment.topLeft,
child: Text("Hello3"),
),
Align(
alignment: Alignment.bottomRight,
child: Text("Hello4"),
)
],
)
Maybe after wrapping both text with column ,
give mainAxisAlignment.spaceBetween .
Let me know if this solves your problem.
Only if you could provide a preview of screen, I could provide more help.
The easiest solution would be using the column and setting its properties
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children:[
Text('My App'),
Text('My Text'),
],
),
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.
I am working on a Flutter project. I'm trying to create a widget like the image below and I can't manage to do it.
So what I'm trying to do, is to create a widget with a Text at the top left (the size of this widget is not constant and depends on the text in it).
I'm trying to align 2 other widgets with the Text:
The Widget 1 is aligned horizontaly and centered with the Text widget and at its right with no space between
The Widget 2's right edge is aligned verticaly with the Text widget's right edge, and is positioned under it (and there is no space between the 2 widgets).
I tried to implement this with Column and Row widgets or with a GridView but I couldn't manage to do so.
Also the overall size of this custom widget has to be shrinked.
Does someone know how to do something like that ?
Thank you.
This works
Container(
width: double.infinity,
height: 300,
color: Colors.grey[200],
child: Column(
children: <Widget>[
Row(
children: [
Flexible(
flex: 2,
child: Container(
height: 200,
color: Colors.blue,
),
),
Flexible(
flex: 1,
child: Container(
height: 100,
color: Colors.green,
),
),
],
),
Row(
children: <Widget>[
Flexible(
flex: 2,
child: Align(
alignment: Alignment.centerRight,
child: Container(
width: 150,
height: 100,
color: Colors.orange,
),
),
),
Flexible(
flex: 1,
child: Container(),
),
],
),
],
),
),
I am unable to successfully make Stack widget to work when i place it as a child of Column widget. My intention is to mix the Stack layout and Column/Row layout methods to reap the benefits of both approach. When i run the code the compile gave a scanty error message:
════════ (2) Exception caught by rendering library
═════════════════════════════════════════════════ A RenderFlex
overflowed by Infinity pixels on the bottom. User-created ancestor of
the error-causing widget was: Scaffold
file:///C:/Users/admin/AndroidStudioProjects/music_app/lib/main.dart:240:12
Blank white page was returned when i ran the code. What am i doing wrong? The following is the code snippet:
body: Column(
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
)
],
),
Any help would be appreciated. Thanks
The error is occuring because you wrapped the Stack widget with Container which expands to the entire screen, if not provided height or width. So, just provide a custom height to the Container that will fix the overflow error. Working code below:
body: Column(
children: <Widget>[
Container(
color: Colors.blue,
height: 200,
child: Stack(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
)
],
),
I provided a test height. You may need to provide height or width per your requirement.
Hope this answers your question.
Please try below code:-
body: Column(
children: <Widget>[
Positioned(
top: 100,
left: 50,
child: Container(
child: Text("Text is Located here"),
),
),
],
),
I have a stack widgets with two widgets inside.
One of them draws the background, the other one draws on top of that.
I want both widgets to have the same size.
I want the top widget, which is a column, to expand and fill the stack vertically to the size that is set by the background widget.
I tried setting the MainAxis mainAxisSize: MainAxisSize.max but it didn't work.
How can I make it work?
Use Positioned.fill
Stack(
children: [
Positioned.fill(
child: Column(
children: [
//...
],
),
),
//...
],
);
More info about Positioned in Flutter Widget of the Week
How does it work?
This is all about constraints. Constraints are min/max width/height values that are passed from the parent to its children. In the case of Stack. The constraints it passes to its children state that they can size themselves as small as they want, which in the case of some widgets means they will be their "natural" size. After being sized, Stack will place its children in the top left corner.
Positioned.fill gets the same constraints from Stack but passes different constraints to its child, stating the it (the child) must be of exact size (which meant to fill the Stack).
Positioned.fill() is the same as:
Positioned(
top: 0,
right: 0,
left: 0,
bottom:0,
child: //...
)
For even more examples and info: How to fill a Stack widget and why? and Understanding constraints.
You can try wrapping the Column with a positioned widget. Set top to 0 and bottom to 0. This will make the column fill the stack vertically.
sample code:
Stack(
children: <Widget>[
// Background widget rep
Container(
color: Colors.pink,
),
Positioned(
top: 0,
bottom: 0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('madonna'),
Text('flutter'),
],
),
)
],
)
I think you could wrap you column in a container like this:
Container(
height: double.infinity,
width: double.infinity,
child: Column()
),
The accepted answer did not answer my issue completely. So, I put my code here in case you have a similar issue.
class NoContentView extends StatelessWidget {
const NoContentView({Key? key, required this.message}) : super(key: key);
final String message;
#override
Widget build(BuildContext context) {
return Expanded(
child: Stack(
children: [
Positioned.fill(
child: FittedBox(
child: const Image(image: AssetImage(AppImages.noReceiptsWeb), fit: BoxFit.fitWidth),
),
),
MessageView(message: message),
],
),
);
}
}
In my case, I thought that I needed to expand the container in the light blue color with an expanded widget inside the stack widget.
Problems arose, especially since I was adding the stack widget in the column widget, and the way to make the container double.infinity dimensions I definitely had a problem with the vertical axis.
In the end, I managed to show it like this photo...
Column(
children: [
//filter
Container(
color: orange,
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
child: Text(
'All',
style: getRegular(color: white.withOpacity(.6)),
),
),
Container(
color: white.withOpacity(.6),
width: 1,
height: 50,
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 10, 0),
child: Text(
'Ready',
style: getRegular(color: white.withOpacity(.6)),
),
),
freeh(),
Container(
color: white.withOpacity(.6),
width: 1,
height: 50,
),
],
),
Row(
children: [
Icon(
filter,
color: white.withOpacity(.7),
size: 20,
),
Text(
'FILTER',
style: getLight(
color: white.withOpacity(.7),
),
),
freeh(),
],
),
],
),
),
Expanded(
child: Stack(
alignment: Alignment.topLeft,
children: [
Container(
color: lightBlue, //here to use map>>>>
),
Container(
height: 35,
width: 120,
margin: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: primary,
borderRadius: BorderRadius.circular(20),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(
FontAwesomeIcons.listUl,
color: white.withOpacity(.8),
size: 20,
),
Text(
'List View',
style: getRegular(color: white.withOpacity(.8)),
)
],
),
),
],
),
)
],
),