I have this following image
,
i am trying to show the icon at end of the image with stack but this what i am getting
Code i tried
Stack(
children: [
Expanded(
flex: 0,
child: Image.network(
Urls.ImageUrl+vendorModel.cover_photo,
height: 80,
fit: BoxFit.fitWidth,
),
//radius: 52.5,
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Icon(Icons.favorite,color: Colors.red,),
],
),
],
),
You don't need to use Expanded widget
try this:
Row(
children: [
IntrinsicHeight(
child: Stack(
alignment: Alignment.bottomRight,
children: [
Image.network(
Urls.ImageUrl+vendorModel.cover_photo,
height: 80,
fit: BoxFit.fitWidth,
),
Icon(
Icons.favorite,
color: Colors.red
),
],
),
),
SizedBox(width: 8,),
Column(children: [
Text('text1'),
Text('text2'),
Text('text3'),
Text('text4')
],mainAxisSize: MainAxisSize.min,)
],
)
Related
I want to have a Row inside of Expanded. Inside that Row I want multiple Containers (so again I need a Row) and inside every Container I want to have multiple children, again I need a Row widget. All of that needs to be responsive. With the following code the widget overflows:
Widget getCard(BuildContext context) {
return Card(
child: Column(children: [
Row(
children: [
Expanded(flex: 1, child: _plateNumberWidget()),
Expanded(
flex: 3,
child: Container(
color: Colors.amber,
child: Text("2"),
),
),
Expanded(
flex: 8,
child: Row(
children: [
Container(
color: Colors.grey,
child: Row(
children: [Text("Test1"), Text("Test2")],
),
),
Container(
color: Colors.green,
child: Row(
children: [
Text("Test3"),
Text(
"Test44444444444444444444",
overflow: TextOverflow.ellipsis,
)
],
),
),
],
))
],
),
Row(
children: [],
),
Row(
children: [],
),
Row(
children: [],
)
]),
);
}
If i use Flexible, the overflow is fixed. But it doesn't position the widgets as i want (the green container should be right after the "Test2" text -> the grey container should take only the space it needs as in the first case.
Expanded(
flex: 8,
child: Row(
children: [
Flexible(
child: Container(
color: Colors.grey,
child: Row(
children: [Text("Test1"), Text("Test2")],
),
),
),
Flexible(
child: Container(
color: Colors.green,
child: Row(
children: [
Flexible(child: Text("Test3")),
Flexible(
child: Text(
"Test444444444444444444444444",
overflow: TextOverflow.ellipsis,
),
)
],
),
),
),
],
))
Try this code
Expanded(
flex: 8,
child: Row(
children: [
Container(
color: Colors.grey,
child: Row(
children: [Text("Test1"), Text("Test2")],
),
),
Flexible(
child: Container(
color: Colors.green,
child: Row(
children: [
Text("Test3"),
Flexible(
fit: FlexFit.tight,
child: Text(
"Test44444444444dsfasdfasd4444444444444",
overflow: TextOverflow.ellipsis,
),
)
],
),
),
),
],
))
I'm trying to make a card with some elements.
However it is hard to locate elements in right place with multiple rows and columns.
I tried with mainAxisAlignment, crossAxisAlignment, SizedBox, Expanded and so on.
Especially using Expanded make my widget disappear unlike my expectation.
How can I locate element to right place?
What I did
What I want
child: Container(
padding: EdgeInsets.all(10),
child: Column(
children:[
Text('1'),
Container(
child: Row(
children:[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 70,
height: 70,
color: Color(0xffD9D9D9),
),
),
Column(
children:[
Row(
children:[
Text('2'),
Text('3'),
Text('4'),
],
),
Row(
children:[
Text('5'),
Text('6')
]
),
Row(
children:[
Text('7'),
Text('8'),
Text('9'),
Text('10'),
],
),
],
),
],
),
),
],
),
),
Here you go, this should be work as you wanted. i've tried to run it and yep it work
Container(
padding: const EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text('1'),
Row(
children: [
Flexible(
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Container(
width: 70,
height: 70,
color: const Color(0xffD9D9D9),
),
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "2"),
PaddingText(text: "3")
],
),
Row(
children: [
PaddingText(text: "4"),
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "5"),
PaddingText(text: "6")
],
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
PaddingText(text: "7"),
PaddingText(text: "8")
],
),
Row(
children: [
PaddingText(text: "9"),
PaddingText(text: "10")
],
),
],
),
],
),
),
],
),
],
),
),
and dont forget to add this to your project
class PaddingText extends StatelessWidget {
PaddingText({Key? key, required this.text}) : super(key: key);
String text;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: Text(text),
);
}
}
This must work
Container(
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children:[
Text('1'),
Container(
child: Row(
children:[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Container(
width: 70,
height: 70,
color: Color(0xffD9D9D9),
),
),
Expanded(
child: Column(
children:[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:[
Expanded(
child: Row(
children: [
Text('2'),
Text('3'),
],
),
),
Expanded(child: Row(
children: [
Text('4')
],
)),
],
),
Row(
children:[
Text('5'),
Text('6')
]
),
Row(
children:[
Expanded(child: Row(
children: [
Text('7'),
Text('8'),
],
)),
Expanded(child: Row(
children: [
Text('9'),
Text('10'),
],
))
],
),
],
),
),
],
),
),
],
),
)
I want to add the report question text on the right side I tried the position widget but it doesn't work what I do?
I try to achieve-
code-
Positioned(
right: 0,
child: Row(
children: [
Icon(Icons.report, color: Color(0xff0E5487),),
TextButton(onPressed: () => {}, child: Text("Report Question",
style: cstmTextStyle(fs: 18, fc:Color(0xff0E5487) ),)),
],
),),
My advice is to use a Column with Spacer widget instead of a Stack.
I made an example of you:
Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
children: [
Container(
color: Colors.green,
width: 160,
height: 160,
),
const Spacer(),
Container(
color: Colors.green,
width: 160,
height: 160,
)
],
),
const SizedBox(height: 8,),
Row(
mainAxisSize: MainAxisSize.max,
children: const [
Spacer(),
Placeholder(fallbackWidth: 32, fallbackHeight: 32,),
SizedBox(width: 8,),
Text('Report Question')
],
)
],
),
Wrap Your Row With Alignment
Align(alignment: Alignment.topRight,
child: const Row(
),
),
I have 3 Columns i want to make non scrollable screen using those columns
first 2 columns have only one one images last column have a row in which there are four icons
i want to put last column which have a row icons at the bottom of the screen for every size of screen i want same
now how its look like
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [barColor, Colors.white])),
child: ListView(
physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Image.asset(
'assets/images/istv.png',
fit: BoxFit.cover,
),
],
),
InkWell(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset(
'assets/images/live.png',
fit: BoxFit.cover,
),
],
),
onTap: (){
_launchInApp(_launchUrl);
},
),
Column(
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Expanded(
child: InkWell(
child :Container(
child: Image.asset(''
'assets/images/fb.png',
height: 200,
fit: BoxFit.cover,
) ,
),
onTap: (){
openfb();
},
),
),
Expanded(
child: InkWell(
child :Container(
child: Image.asset(''
'assets/images/insta.png',
height: 200,
fit: BoxFit.cover,
) ,
),
onTap: (){
openinsta();
},
),
),
Expanded(
child: InkWell(
child :Container(
child: Image.asset(''
'assets/images/yt.png',
height: 200,
fit: BoxFit.cover,
) ,
),
onTap: (){
openyt();
},
),
),
Expanded(
child: InkWell(
child :Container(
child: Image.asset(''
'assets/images/share.png',
height: 200,
fit: BoxFit.cover,
) ,
),
onTap: () {Share.share('check out my website https://example.com');}
),
)
],
),
),
],
),
],
),
)
)
If I understood your question, which was not easy, I believe this is what you want to do:
class UI62962286 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
child: Icon(Icons.accessibility),
height: 10,
),
Container(
child: Icon(Icons.account_balance),
height: 10,
),
],
)
),
Container(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Icon(Icons.account_balance_wallet),
Icon(Icons.adb),
Icon(Icons.account_box),
Icon(Icons.ac_unit),
],
),
),
],
);
}
}
It looks like this:
Try this in the Widget:
body: Center(
child: Column(
children: <Widget>[
Text(
'Start Row',
),
Expanded(child:
Center(child:Text('Middle Row')),
),
Text('End Row'),
],
),
),
Where you see the text you want to insert a Row. Expand takes all the space in the middle no matter how big your screen. You can cascade that design idea.
This is my code.
Card(
child: Row(
children: [
Container(
color: Colors.red,
child: Icon(Icons.home)
,),
Column(
children: [
Text('aliazad'),
Text('aliazad'),
Text('aliazad'),
Text('aliazad'),
],
),
],
),
);
I want to make the height of the container equal to the height of the card.
You have to wrap your Row with a Container and give it a height like this:
Card(
child: Container(
height: 80,
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.red,
child: Icon(Icons.home),
),
Column(
children: [
Text('aliazad'),
Text('aliazad'),
Text('aliazad'),
Text('aliazad'),
],
),
],
),
),
),