In my case, I have a Stack containing Icon and Card
I want the icon to appear in the right corner in case LTR and in the left corner in case RTL
I have the following code:
Stack(
children: <Widget>[
Card(
color: Colors.white,
elevation: 4,
margin: EdgeInsets.only(top: 8, right: 8, left: 8),
child: Container(
height: 100,
width: double.infinity,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('text 1'),
Text('text 2'),
Text('text 3'),
],
),
),
),
),
Positioned(
top: 10,
left: 10,
child: Icon(
Icons.ac_unit,
size: 50,
),
)
],
);
The result in RTL mode is :
The result in LTR mode is :
How can I fix this
try this
Positioned.directional(textDirection:Directionality.of(context) ,
top: 10,
end: 10,
child: Icon(
Icons.ac_unit,
size: 50,
),
)
UPDATE
Put the icon inside a Container with maxWidth and set the alignment like below
alignment: isRTL? Alignment.centerLeft: Alignment.centerRight;
set the alignment property of Stack like this.
when the Language is changed to RTL just call
setState((){
isRTL = true;
})
in a stateful widget.
vice versa if you want to change it to LTR
Related
I am using Flutter 2.8, as many package dont yet have support for latest flutter version.
I am using stack instead of appBar. and I want to get the look as of below picture.
I dont want to use stack in the whole page, i think it will cause performance issues. Also, If i use stack only in lieu of appBar, I can copy paste this code to make that home button on top-left corner, for another app.
here is my full code of this page:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return SafeArea(
child : Scaffold(
//todo: 1. copy code from getx4 cool ui app
//todo: 1. make it as he made it
body: Column(
children: [
Expanded(
flex: 1,
child: Container(
color: Color(0xFFc5e5f3),
child: Stack(
children: [
Positioned(
top: 10,
left: 5,
child: IconButton(
onPressed: () {},
icon: Icon(Icons.home),
)),
],
),
),
),
Expanded(
flex: 10,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
children: [
Expanded(child: Text('ShopX', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold) ,)),
Padding(
padding: const EdgeInsets.only(right: 8) ,
child: Icon(Icons.format_list_bulleted ),
),
Icon(Icons.grid_view_outlined ),
],
),
),
),
],
),
),
);
}
}
You need to use Align widget with a property like alignment: FractionalOffset.topCenter . Please see the sample code below:
Stack(
fit: StackFit.expand,
children: <Widget>[
Column(
children: [
Container(
padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
color: Colors.black,
child: Image(image: AssetImage('assets/image.png'), width: MediaQuery.of(context).size.width, height: 50,)),
Expanded(
flex: 1,
child: Align(
alignment: FractionalOffset.topCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Padding(
padding: const EdgeInsets.fromLTRB(35, 12, 0, 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Image(image: AssetImage('assets/image.png'), width: 120, alignment: Alignment.bottomLeft,),
Image(image: AssetImage('assets/image.png'), width: 100, alignment: Alignment.bottomLeft,),
Image(image: AssetImage('assets/image.png'), width: 100, height: 40, alignment: Alignment.bottomLeft,),
],
),
),),),
),
],
),
],
),
This sample code adds images 4 images on top center of the screen.
1 image on the top of the screen
3 images below the top image
Moreover, you can directly put your Stack widget into the body of Scaffold.
Use crossAxisAlignment: CrossAxisAlignment.start, on Row. Default is center.
Expanded(
flex: 10,
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start, //this
children: [
Expanded(
child: Text(
'ShopX',
style:
TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
)),
I want to create this widget. The pseudocode I tried is just like this:
Column
Container (My Widget)
Column
Image
Stack
Message Text
Positioned
Status Text
Constraints:
Status must look like it stays inside the text widget. But it shouldn't be on it.
Text and image sizes are not fixed !!!
Problem: Stack inside column without size is not working. So status text appears under the text widget as centered.
return MessageBallon(
directory: message.direction,
childElement: Column(
children: [
message.hasMedia
? Container(
padding: EdgeInsets.only(bottom: height * .05),
child: CustomMedia(
src: message.media,
),
)
: const SizedBox(),
Stack(
children: [
Container(
padding: const EdgeInsets.only(
bottom: 13,
top: 18,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Container(
constraints: BoxConstraints(maxWidth: width * .53),
child: Text(
message.content,
style: TextStyles.normalTextBlack,
),
),
],
),
),
Positioned(
bottom: 0,
right: 0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(right: 10),
child: Text(
message.messageDate,
style: TextStyles.detailText,
),
),
message.direction == SmsDirection.incoming
? Align(
alignment: Alignment.centerRight,
child: messageStatus,
)
: const SizedBox(),
],
),
)
],
)
],
),
);
Just use Scaffold with FloatingActionButton for your status.
Rest Image and Text can be inside a column.
You can achieve something like the below only with these widgets.
I'm trying to implement a "Change my profile picture" icon like how it appears in the profile page in Whatsapp, where a clickable camera icon hovers on the bottom right of the image.
This is the code I used inside a stateful widget:
Row(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 120,
child: Image(
image: AssetImage('affogato.png'),
),
),
Positioned(
top: 70,
left: 90,
child: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: () {},
),
),
],
),
],
),
Strangely, the Icon seems to take the constraints of the Image container. So when I set the width as 120 and try to push the Icon button to the bottom right edge of the Image, it gets cut off by the Image constraints. How do the constraints of the Container affect the FloatingActionButton even though they're siblings inside the Stack not parent-child widgets? And how can I fix this so that the Icon can float over the edge of the image?
You can probably make use of height property of Positioned widget and adjust other dimensions (left, bottom, right, top) so that the button isn't cut-off at bottom right edge and is displayed properly. Working sample code below:
return Scaffold(
body: Center(
child: Row(
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 120,
child: Image(
image: AssetImage('assets/Icon-512.png'),
),
),
Positioned(
bottom: 0,
right: 0,
left: 78,
height: 35,
child: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: () {},
),
),
],
),
],
),
)
// This trailing comma makes auto-formatting nicer for build methods.
);
You might need to adjust dimensions per your need, but this way it doesn't cut-off the button.
Hope this answers your question.
Here's how I did it. I removed the Positioned widget completely and used Padding instead. It seemed to solve the problem. I also wrapped the image in a CircleAvatar to complete the Whatsapp style.
Row(
children: <Widget>[
Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: CircleAvatar(
radius: 70,
backgroundColor: Colors.greenAccent,
child: Container(
height: 150,
width: 150,
child: ClipOval(
child: Image(
image: AssetImage('lib/rainy.png'),
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 105, top: 80),
child: Container(
width: 50,
height: 50,
child: FloatingActionButton(
backgroundColor: Colors.green,
child: Icon(Icons.camera_alt),
onPressed: () async {},
),
),
),
],
),
],
),
I'm trying to put a text inside a card and make the card a bit flexible whenever there is a long text it goes to the next line automatically and the card gets langer
Widget ServiceCard (BuildContext context,double price){
return Container(
height: 100,
margin: EdgeInsets.only(top: 12,right: 8,left: 8),
width: MediaQuery.of(context).size.width,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16)
),
color: Colors.white,
elevation: 8,
child: Stack(
children: <Widget>[
Positioned(
top: 8,
left: 8,
child: Text("\$$price"),
),
Positioned(
right: 8,
top: 8,
child: Container(
// height: 70,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Container(
alignment: Alignment.topRight,
child: Text("غسيل شعر",style: TextStyle(fontSize: 16),)
),
Opacity(
opacity:0.7,
child: Text(
"يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل"
)
),
],
),
),
)
],
),
),
);
}
with this code im having the text goes over the card and not going to the next line and even the card is in a constent heghit not wrapped
To make Text wrap on overflow, ideally it has to be sized to full width and maxLines property must be set to null.
However, I can see that you have encountered an "edge-case" - all your text is placed in a Stack widget, which does not fit its children in width by default.
To solve this, change your Positioned(...) widget to Positioned.fill.
e.g.
Positioned.fill(
right: 8,
top: 8,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch, // You might want to use this, too - this stretches all children in width by default
children: <Widget>[
Container(
alignment: Alignment.topRight,
child: Text("غسيل شعر", style: TextStyle(fontSize: 16))
),
Opacity(
opacity: 0.7,
child: Text(
"يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل يتم تصفيف الشعر وغسيل",
textDirection: TextDirection.rtl, // I assume this would be helpful too, if your language reads from right to left.
)
),
],
),
),
)
Let me know if this helped.
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)),
)
],
),
),
],
),
)
],
),