Issue
I am using ElevatedButton.icon in GridView.count and the label of buttons appears vertically on the right side of the button. I need the label of the button to be on the bottom. Here is my code:
body: Scrollbar(
isAlwaysShown: true,
child: GridView.count(
primary: false,
padding: const EdgeInsets.all(30),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
ElevatedButton.icon(
onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context) => const MyProfilePage()),);},
icon: Image.asset('assets/images/cat1.jpg', width: 120, height: 120,),
label: const Text('profile'),
),
ElevatedButton.icon(
onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context) => const ToDoList1()),);},
icon: Image.asset('assets/images/fatty.jpg', width: 120, height: 120,),
label: const Text('todo'),
),
ElevatedButton.icon(
onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context) => const ChatPage()),);},
icon: Image.asset('assets/images/lovely.jpg', width: 120, height: 120,),
label: const Text('chat'),
),
ElevatedButton.icon(
onPressed: () {
Navigator.push(context,MaterialPageRoute(builder: (context) => const SettingsPage()),);},
icon: Image.asset('assets/images/peach.jpg', width: 120, height: 120),
label: const Text('settings'),
),
],
),
)[enter image description here][1]
Solution
The ElevatedButton's icon constructor is intended to be used for a smaller icon placed to the left of the button label, so you can't use it in this scenario. Try the standard constructor with a column for its child instead, e.g:
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const ChatPage()),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/images/lovely.jpg',
width: 120,
height: 120,
),
const Text('chat'),
],
),
),
Answered By - Chris Wickens
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.