I have an animation that I want to be partially visible.
Basically the end of the screen should cut the animation in half. So the animation is overflowing but that's intended. How do I remove the overflowed message then ?
return ClipRect(
child: Container(
width: MediaQuery.of(context).size.width - 32,
child: Padding(
padding: const EdgeInsets.fromLTRB(spacingM, spacingM, 0, spacingM),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextInfo(
location: location, dateFormatter: dateFormatter, date: date),
Transform.translate(
offset: Offset(30, 0),
child: WeatherAnimation(),
),
],
),
),
),
);
Try using wrapping what is overflowing with a FittedBox. This will clip out what is overflowing.
In this scenario, I believe you should wrap the Padding widget or perhaps the Row widget with FittedBox which would allow the FittedBox to take shape of its parent and clip the children to fit.
Instead of ClipRect, you can use Stack with fit as StackFit.expand.
return Stack(
fit: StackFit.expand,
children: [
Container(
width: MediaQuery.of(context).size.width - 32,
child: Padding(
padding: const EdgeInsets.fromLTRB(spacingM, spacingM, 0, spacingM),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextInfo(
location: location, dateFormatter: dateFormatter, date: date),
Transform.translate(
offset: Offset(30, 0),
child: WeatherAnimation(),
),
],
),
),
),
]
);
let me know, if this work.
Related
The thing I want to reach is something like this:
These are the main constraints I want to reach:
"text"-s being centered above the lower "button"-s and "thing2" being able to go in between "texts"-s when the screen is short enough.
I want the "button"-s to always be the same height/width (this is easily done by something like SizedBox) and the same distance from the top/bottom .
I want the "thing1" to be x height at max and scale with screen downwards if needed (either by making its texts smaller or making it scrollable, I haven't yet decided, this isn't the main problem).
I want "thing2" to always scale with screen.
When the screen is big enough, I want "thing1" and "thing2" to share the space between them evenly, and each being in the center of its own space.
Right now my layout is the following:
Column: MainAxisAlignment.SpaceBetween, height fixed
Container: height fixed
Row: MainAxisAlignment.SpaceBetween
Button
Button
Container: height fixed
thing1
Container: height calculated based on screen height and other Containers' height
thing2
Container: height fixed
Row: MainAxisAlignment.SpaceBetween
Button
Button
This is of course not all, I tried to include all relevant information about my layout without giving too much information pointlessly.
How would one go about adding the "text"-s above the "button"-s? (I tried Stack, but then I dont't know how to make them appear above the "button"-s while at the same time making "thing2" be above them too.
I managed achieve the things with this code (where MyBox is a simple widget with a colored container with width and height):
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
const double buttonHeight = 35;
const double buttonWidth = 100;
const double textHeight = 40;
const double textWidth = 30;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: [
Align(
alignment: Alignment.topLeft,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.red),
),
),
Align(
alignment: Alignment.topRight,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.yellow),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: textWidth,
height: textHeight,
child: MyBox(Colors.green),
),
),
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.cyan),
),
],
),
),
Align(
alignment: Alignment.bottomRight,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: textWidth,
height: textHeight,
child: MyBox(Colors.indigo),
),
),
SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.blue),
),
],
),
),
Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
width: buttonWidth,
height: buttonHeight,
child: MyBox(Colors.orange),
),
),
Positioned(
left: 0,
top: 0,
right: 0,
bottom: buttonHeight,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Flexible(
fit: FlexFit.loose,
child: MyBox(Colors.purple),
),
Flexible(
fit: FlexFit.loose,
child: MyBox(Colors.brown),
),
],
),
),
],
),
);
}
}
TLDR: I used a Stack widget to hold my other widgets, and Align widget to align (duh) my widgets in the Stack.
I used a Column to center my texts above my lower buttons. "mainAxisAlignment: MainAxisAlignment.end" was important so this column is at the bottom and not at the topside.
Finally I wrapped the Stack in a Padding.
I want to achieve this
This is my code
Row(
children: [
Expanded(
flex: 1,
child: Text(
"somethinig here..."),
),
Expanded(
child: ClipRect(
child: Wrap(
children: [
SvgPicture.asset(
"assets/3958830.svg",
width: autoHeight(550),
allowDrawingOutsideViewBox: true,
fit: BoxFit.fitHeight,
),
],
),
),
),
],
),
Result:
You can see how the image is clipped, I just want to clip all sides except the left side.
You can wrap the image widget with an Align widget to easily position the image inside the clipper. The widthFactor and heightFactor properties are used to decide the size of the clipper and alignment is used to decide the position of the `clipper
A Nice Example to use the Align Widget with ClipRect will be
ClipRect(
child: Container(
child: Align(
alignment: Alignment.centerLeft,
widthFactor: 0.6,
heightFactor: 1.0,
child: Image.network(
'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
),
),
),
);
To Know More about the Clippers see This Article
Just wrap your Text widget with Center.
And SvgPicture with Align. (I realize this later.)
Row(
children: [
Expanded(
flex: 1,
child: Center(child: Text("somethinig here...")),
),
Expanded(
child: ClipRect(
child: Wrap(
children: [
Align(
alignment: Alignment.centerRight,
child: SvgPicture.asset(
"assets/3958830.svg",
width: autoHeight(550),
allowDrawingOutsideViewBox: true,
fit: BoxFit.fitHeight,
)),
],
),
),
),
],
)
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 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.
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)),
)
],
),
),
],
),
)
],
),