I am having trouble issues aligning my icon buttons to the middle of the card. As you can see in the picture, the icon buttons are on top attached to the top of the card.
How do I make it meet at the half size of the card? Any suggestions? (I want the buttons to be located at the middle of the card)
Tried: I tried putting padding or wrap my Row widget with a center, but it doesn't work.
child: new Container(
height: 150.0,
width: MediaQuery.of(context).size.width,
child: new Card(
color: Colors.white,
elevation: 8.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.sticky_note_2),
iconSize: 35,
color: Colors.lightBlue),
Text(
"Notes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
children: [
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => QuizRoute()),
);
},
icon: Icon(Icons.quiz),
iconSize: 35,
),
Text(
"Quizzes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
children: [
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EbooksRoute()),
);
},
icon: Icon(Icons.auto_stories),
iconSize: 35,
),
Text(
"Ebooks",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
]),
),
),
),
],
),
Try below code and set mainAxisAlignment: MainAxisAlignment.center,
to every Column
widget. Refer layout
and Align
Container(
height: 150.0,
width: MediaQuery.of(context).size.width,
child: Card(
color: Colors.white,
elevation: 8.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.sticky_note_2),
iconSize: 35,
color: Colors.lightBlue),
Text(
"Notes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.quiz),
iconSize: 35,
),
Text(
"Quizzes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: Icon(Icons.auto_stories),
iconSize: 35,
),
Text(
"Ebooks",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
],
),
),
),
You are using center alignment in the row
but not inside the column
. Now column
is taking the height of entire row but the children of the column
is not aligned center
.
Try adding mainAxisAlignment: MainAxisAlignment.center
in each of your column
Row
mainAxisAlignment:MainAxisAlignment.center
|_Column
|_Column
|_Column
Row
mainAxisAlignment:MainAxisAlignment.center
|_Column
mainAxisAlignment:MainAxisAlignment.center 👈 Add these to every column
|_Column
mainAxisAlignment:MainAxisAlignment.center
|_Column
mainAxisAlignment:MainAxisAlignment.center
For the complete code refer: @Ravindra's answer
Replace your "Row" widget with the following code, this will solve your issue.
Solution : Give your Column center alignment
mainAxisAlignment: MainAxisAlignment.center
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {},
icon: const Icon(Icons.sticky_note_2),
iconSize: 35,
color: Colors.lightBlue),
const Text(
"Notes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => QuizRoute()),
// );
},
icon: const Icon(Icons.quiz),
iconSize: 35,
),
const Text(
"Quizzes",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
onPressed: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) => EbooksRoute()),
// );
},
icon: const Icon(Icons.auto_stories),
iconSize: 35,
),
const Text(
"Ebooks",
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
),
],
),
]),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.