is there a way to align icon with text - flutter

Question

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,
),
],
),
),

Answer 1

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 :

Answer 2

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,
),
],
),
);
}
}

Answer 3

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: