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 have the following layout:
Row ->
Column
Padding ->
Column ->
Row ->// this one is only taking as much space as it needs
Text
Image
Text
Row
I need the row in the second column to take the whole width of the column it is wrapped in.
No matter how much I look for the answer wrapping different widgets into Flexible and Expanded doesn't help.
here is the code:
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
Column(
children: [
CircleAvatar(
radius: 25,
child: Image(
image: getCategoryImage(task.type),
),
)
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(task.title, style: Theme.of(context).textTheme.headlineMedium,),
const Image(
width: 20, image: AssetImage("assets/icons/task/tickbox.png"))
],
),
Text(generateBirdList(task.assignedBirds), style: Theme.of(context).textTheme.titleSmall,),
Row(
children: [
],
)
],
),
),
],
),
),
Container(
color: Colors.amber,
padding: const EdgeInsets.all(10.0),
child: Row(
children: [
Container(
color: Colors.blueAccent,
child: CircleAvatar(
radius: 25,
child: Image.network(
"https://st.depositphotos.com/1909187/2297/i/950/depositphotos_22971972-stock-photo-blank-white-male-head-front.jpg",
),
),
),
Expanded(
child: Container(
color: Colors.green,
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"task.title",
style: Theme.of(context).textTheme.headlineMedium,
),
Image.network(
"https://st.depositphotos.com/1909187/2297/i/950/depositphotos_22971972-stock-photo-blank-white-male-head-front.jpg",
width: 20,
)
],
),
Text(
"Bla bla bla text",
style: Theme.of(context).textTheme.titleSmall,
),
Row(
children: [],
)
],
),
),
),
],
),
),
How to make a rectangles in this order at flutter ?
Look here
Column(
children: [
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.green,
),
),
Expanded(
child: Container(
color: Colors.red,
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.yellow,
),
),
Expanded(
child: Container(
color: Colors.purple,
),
),
],
),
),
],
);
The correct approach is to wrap a container and two rows in a column.
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
color: Colors.blue,
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.red
),
),
Expanded(
child: Container(
color: Colors.green
),
),
],
),
),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: Colors.yellow
),
),
Expanded(
child: Container(
color: Colors.orange
),
),
],
),
),
],
)
It can be something like this:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text('Top Rectangle'),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(child: Text('Row 1 - Col 1'),),
Expanded(child: Text('Row 1 - Col 2'),),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(child: Text('Row 2 - Col 1'),),
Expanded(child: Text('Row 2 - Col 2'),),
],
)
],
),
Or this:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Text('Top Rectangle'),
),
Container(
height: 400,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text('Row 1 - Col 1'),
),
Expanded(
child: Text('Row 1 - Col 2'),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: Text('Row 2 - Col 1'),
),
Expanded(
child: Text('Row 2 - Col 2'),
),
],
)
],
),
),
],
),
It's not a good idea to have a bunch of Expanded widgets in a parent widget, you should have Containers or similar widgets and give them fixed or dynamically calculated heights, then you can have an Expanded which gets all remaining space
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.