Flutter: How to align text in the bottom of ElevatedButton.icon?-CodePudding

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]

CodePudding user response：

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

CodePudding user response：

The icon and label of the ElevatedButton.icon are arranged in a row.

Creating your own custom Button should help solve your issue:

class CustomElevatedButton extends StatelessWidget {
  final String buttonName;
  final String imagePath;
  const CustomElevatedButton({
    Key? key, required this.buttonName, required this.imagePath,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.push(context,MaterialPageRoute(builder: (context) => const MyProfilePage()),);},
      child:  Material(
        elevation: 5,
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children:  [
              Image.asset(imagePath, width: 120, height: 120,),
              Text(buttonName),
            ],
          ),
          width: 100.0,
          height: 100.0,
          decoration: const BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.all(Radius.circular(8))),
        ),
      ),
    );
  }
}