I want to add spaceBetween property to a Row with Flutter. I want to keep my first container width null to resize itself.
Here is my code :
Container(
width: null, // I want to keep the width null to resize itself
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.fromLTRB(20, 20, 20, kIsWeb ? 20 : 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: secondaryBackground,
),
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, // this doesn't work
children: [
Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: textColor.withOpacity(.1),
),
child: Text("First Item",
style: const TextStyle(
fontSize: 15,
color: textColor,
fontWeight: FontWeight.w600)),
),
Container(
padding: const EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
color: textColor.withOpacity(.1),
),
child: Column(
children: [
Text("Second Item",
style: const TextStyle(
fontSize: 15,
color: textColor,
fontWeight: FontWeight.w600)),
],
),
),
],
), [...]
The result I have
The result I want
Put the expanded widget between both the widgets in Row.
Related
In flutter how to set a text widget under a sized box in a container as below? I tried but didn't get what I wanted. Thanks in advance!
[1]: https://i.stack.imgur.com/fLRje.jpg,
[2]: https://i.stack.imgur.com/dfMa8.jpg
[What I want][1]
[What I get][2]
Row(
children: [
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffb2b2b2),
),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: SizedBox(
width: 70.0,
height: 70.0,
child: Card(
color: Color(0xffe31da8),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.notifications,
size: 40, color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
)),
Padding(
padding: const EdgeInsets.only(left: 30, top: 30),
child: Row(
children: [
const Text('Language',
style: TextStyle(
fontSize: 17,
letterSpacing: 0.5,
fontWeight: FontWeight.bold,
color: Color(0xff5f2dea),
decorationStyle: TextDecorationStyle.wavy)),
],
),
),
),
],
),
To add multiple widget vertically you have to use Column. Row is used to multiple widget in one line (Horizontally). 1. Remove unnecessary use of Row from your code. Use padding, margin or alignment parameters to give proper spacing or alignment. Here is updated code:
Container(
decoration: BoxDecoration(
border: Border.all(
color: Color(0xffb2b2b2),
),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: SizedBox(
width: 120.0,
height: 120.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Card(
color: Color(0xffe31da8),
child: IconButton(
onPressed: () {},
icon: Icon(Icons.notifications,
size: 40, color: Colors.white),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
),
Padding(
padding: const EdgeInsets.only(top: 30),
child: const Text('Language',
style: TextStyle(
fontSize: 14,
letterSpacing: 0.5,
fontWeight: FontWeight.bold,
color: Color(0xff5f2dea),
decorationStyle: TextDecorationStyle.wavy)),
),
],
)),
),
I want the single selected radio button widget and text widget in the same row. It won't work even if I try to wrap it with the row. I want it like the image below.I want this, But I got this. Thanks in advance!
Column(
children: [
RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5)),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
Container(
decoration: BoxDecoration(
color: Color(0xffbebdbd),
border: Border.all(color: Color(0xffbebdbd)),
borderRadius: BorderRadius.circular(5)),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text("العربية",
style: TextStyle(
fontSize: 17,
color: Color(0xff000000),
fontWeight: FontWeight.bold)))),
],
),
You have to use Row widget and wrap each child in it with Expanded, because RadioListTile want to take the width of its parent, and Row wait its children to render, so it can know its own width.
By using Expanded the Row know that it must take all the possible with, and it's children can fit correctly in it.
try this update i hope it will fix the issue
Container(
width: MediaQuery.of(context).size.width,
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width / 2,
height: 50,
child: RadioListTile(
title: Padding(
padding: const EdgeInsets.only(left: 50),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
///use your image
Text(
" English",
style: TextStyle(
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
],
),
),
value: "English",
groupValue: "english",
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
),
onChanged: (value) {
setState(() {});
},
tileColor: Color(0xff28e8df),
),
),
Container(
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xffbebdbd),
border: Border.all(color: Color(0xffbebdbd)),
borderRadius: BorderRadius.circular(5),
),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text(
"العربية",
style: TextStyle(
fontSize: 17,
color: Color(0xff000000),
fontWeight: FontWeight.bold,
),
),
),
),
],
),
),
I have a horizontal ListView with three Containers, I want to center the content/children of the Rows within the Containers. I have tried MainAxisAlignment.center but it does not seem to work for me.
This is the code, the mainAxisAlignment has been commented although I have tried using it to no avail.
Container(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
width: 134.0,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
color: Color(0xFFFF7700),
),
child: Row(
// mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
urlImage,
height: 45.0,
width: 45.0,
),
const SizedBox(width: 4.0),
Flexible(
child: Text(
title,
style: const TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
),
],
));
First, both children of the column should be wrapped inside Expanded. Then, check textAlign property of Text and set it to center
home: Scaffold(
body: Builder(builder: (context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
width: 134.0,
child: Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.green)),
child: Row(
// mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: const Text('smth'),
)),
const SizedBox(width: 4.0),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red)),
child: const Text(
'title',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Colors.black,
),
textAlign: TextAlign.center,
),
),
),
],
),
));
}),
));
RESULT
I wrapped them with border colors so you can see the difference. When both are wrapped with Expanded, they take the same space and now you can center the text.
When I use center in a text used in Wrap widget as shown in the code below:
Wrap(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 6.0),
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(27),
border: Border.all(
color: Colors.grey.withOpacity(0.60)),
),
padding: EdgeInsets.fromLTRB(9,6,9,6),
child: Center(<--placing this center widget makes the child expand to full width
child: Text(
'NTU',
style: TextStyle(
color: Colors.white.withOpacity(0.87),
fontSize: 16.5,
),
),
),
),
)
]),
the container expands to the full width as shown below:
What I want is:
But placing a center widget in the child of the Wrap widget seems to make it expand to the full width. Any suggestion on how to make it shrink to the child's width even when the center widget is used? Thank you.
Set widthFactor of Center widget to set its width to the child's width multiplied by this factor.
return Wrap(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 6.0),
child: Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(27),
border: Border.all(
color: Colors.grey.withOpacity(0.60)),
),
padding: const EdgeInsets.fromLTRB(9,6,9,6),
child: Center(
widthFactor: 1.5,
child: Text(
'NTU',
style: TextStyle(
color: Colors.white.withOpacity(0.87),
fontSize: 16.5,
),
),
),
),
)
]),
Try giving width to your container,
Wrap(
children: [
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 100,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(27),
border: Border.all(color: Colors.grey.withOpacity(0.60)),
),
padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
child: Center(
child: Text(
'NTU',
style: TextStyle(
color: Colors.black.withOpacity(0.87),
fontSize: 16.5,
),
),
),
),
)
],
),
try this code:
Wrap(
children: [
Row(
children: [
Flexible(
child: SizedBox(width: MediaQuery.of(context).size.width),
),
Container(
width: 100,
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.circular(27),
border: Border.all(color: Colors.grey.withOpacity(0.60)),
),
padding: EdgeInsets.fromLTRB(9, 6, 9, 6),
child: Center(
child: Text(
'NTU',
style: TextStyle(
color: Colors.black.withOpacity(0.87),
fontSize: 16.5,
),
),
),
),
Flexible(
child: SizedBox(width: MediaQuery.of(context).size.width),
),
],
),
],
),
I'm building my first flutter app and I'm faced with a problem I'm trying to create a container that will allow you to choose several cities. I cannot align the text and the icon
child: Container(
padding: EdgeInsets.only(top: 16),
margin: EdgeInsets.all(50),
height: 40,
width: 700,
decoration: BoxDecoration(
border: Border.all(width: 0.5, color: Colors.brown),
borderRadius: BorderRadius.circular(50)),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(
child: Text(
'SÉLECTIONNEZ UNE VILLE',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold),
),
),
SizedBox(
width: 10,
),
Icon(
Icons.keyboard_arrow_down,
size: 30,
),
],
),
),
You need to use MainAxisAlignment and Expanded Property inside Row
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
margin: EdgeInsets.all(50),
height: 40,
width: 700,
decoration: BoxDecoration(
border: Border.all(width: 0.5, color: Colors.brown),
borderRadius: BorderRadius.circular(50)),
child: Padding(
padding: EdgeInsets.only(left: 10, right: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text('SÉLECTIONNEZ UNE VILLE',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold)),
),
Icon(Icons.keyboard_arrow_down,size: 30),
],
),
),
),
);
}
Output :
Your top padding was messing the alignment.Try the following:
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(width: 0.5, color: Colors.brown),
borderRadius: BorderRadius.circular(50)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'SÉLECTIONNEZ UNE VILLE',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold,
),
),
const SizedBox(width: 10),
Icon(
Icons.keyboard_arrow_down,
size: 30,
),
],
),
);
}
}
You can use the crossAxisAlignment and mainAxisAlignment property of the Row widgets to determine how the children of the Row widget will be placed.
To center the Text and Icon vertically in the Row widget, set crossAxisAlignment: CrossAxisAlignment.center.
To center the Text and Icon horizontally in the Row widget, set mainAxisAlignment: MainAxisAlignment.center.
I added a demo code using your widget tree as an example, I also removed the top padding you gave the Container as it was putting the items downwards.
Container(
margin: EdgeInsets.all(50),
height: 40,
width: 700,
decoration: BoxDecoration(
border: Border.all(width: 0.5, color: Colors.brown),
borderRadius: BorderRadius.circular(50)),
child: Row(
// set the crossaxisalignment so the [items] in the will be vertically centered
crossAxisAlignment: CrossAxisAlignment.center,
// set the crossaxisalignment so the [items] will be horizontally centered
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'SÉLECTIONNEZ UNE VILLE',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 10,
),
Icon(
Icons.keyboard_arrow_down,
size: 30,
),
],
),
),
OUTPUT: