Reputation: 183
I am writing a flutter app that suppose to have a row with icon and text but for some reason I can't put the text in the same line as the icon vertically wise. What I mean is that I want to have an icon, than in the same line a text but the text is a little bit higher than the icon. Someone know how can I fix it?. (I need to have the row because I want to put more things in the line).
my code:
Column(
children: [
Container(
height: size.height * .04,
color: NotificationColor,
child: Row(
children: [
Wrap(
spacing: size.width * .040,
children: [
const Icon(CupertinoIcons.bell),
Text(
"Notification", // this is the text that is higher then the icon
style: TextStyle(
fontSize: size.width * .035,
),
),
],
),
],
),
),
SizedBox(height: size.height * .01),
Container(),
SizedBox(height: size.height * .01),
Container(),
],
),
Upvotes: 2
Views: 3916
Reputation: 124
Have you tried using the following property of the Row?
CrossAxisAlignment.center
This should vertically align all children of the Row.
Let me know if it works!
Try the code below, it shoud work fine.
Column(
children: [
Container(
height: MediaQuery.of(context).size.height * .04,
color: Colors.red,
child: Row(
children: [
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: MediaQuery.of(context).size.width * .040,
children: [
const Icon(CupertinoIcons.bell),
Text(
"Notification", // now the text is vertically aligned with the icon
style: TextStyle(
fontSize: MediaQuery.of(context).size.width * .035,
),
),
],
),
],
),
),
SizedBox(height: MediaQuery.of(context).size.height * .01),
Container(),
SizedBox(height: MediaQuery.of(context).size.height * .01),
Container(),
],
),
Upvotes: 6