Flutter-Make button size same

I want to make the buttons' size the same width using expanded widget.as shown here I want to give some spaces between buttons and make all buttons' sizes the same. I've found some solutions to my question but all of them used the same code as mine. They use expanded widget and make them the same size.

Scaffold(
      body: Container(
        decoration: kBoxDecoration,
        child: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReusableCard(
                      label: 'Kiliseler', 
                      onTap: (() {
                        
                      })
                    ),
                  ),
                  Expanded(
                    child: ReusableCard(
                      label: 'Tüm Detaylı Yapılar', 
                      onTap: (() {
                        
                      })
                    ),
                  ),
                  Expanded(
                    child: ReusableCard(
                      label: 'Cami, Medrese ve Mescit', 
                      onTap: (() {
                        
                      })
                    ),
                  ),
                  Expanded(
                    child: ReusableCard(
                      label: 'Sosyal ve Kültürel Tesisler', 
                      onTap: (() {
                        
                      })
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: ReusableCard(
                      label: 'Selatin Camiler', 
                      onTap: (() {
                        
                      })
                    ),
                  ),
                  Expanded(
                    child: ReusableCard(
                      label: 'Tarihi Çarşılar', 
                      onTap: (() {
          开发者_开发问答              
                      })
                    ),
                  ),
                  Expanded(
                    child: ReusableCard(
                      label: 'Dikilitaşlar', 
                      onTap: (() {
                        
                      })
                    ),
                  ),
                  Expanded(
                    child: ReusableCard(
                      label: 'FSM\'nin Kadırgaları Karadan Yürütme Senaryosu', 
                      onTap: (() {
                        
                      })
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: ReusableCard(
                label: 'Galata Surları', 
                onTap: (() {
                  
                })
              ),
            ),
            IconButton(
              onPressed: (() {
                Navigator.pop(context);
              }), 
              icon: Icon(
                Icons.arrow_circle_left_rounded,
                color: Colors.black,
              ),
              iconSize: 75.0,
            ),
          ],
        ),
      ),
    );

class ReusableCard extends StatelessWidget {
  
  final String label;
  final VoidCallback? onTap;
  ReusableCard({required this.label, this.onTap});
  
  

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blueGrey[600],
      ),
      onPressed: onTap,
      child: Text(
        label,
        style: TextStyle(
          color: Colors.white,
          fontSize: 25.0,
        ),
        textAlign: TextAlign.center,
      ),
    );
  }
}

Tried to make butons' size same but i couldnt make it.

You have to reduce your text size. You can try this by updating your ReuseableCard code with this

  class ReusableCard extends StatelessWidget {
  final String label;
  final VoidCallback? onTap;
  ReusableCard({required this.label, this.onTap});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.blueGrey[600],
        ),
        onPressed: onTap,
        child: FittedBox(
          fit: BoxFit.scaleDown,
          child: Text(
            label,
            style: TextStyle(
              color: Colors.white,
              fontSize: 25.0,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

There are 3 things you could do here

1 . Reduce the font size which will not allow text to move to the second line.

2 . Increase the height of the buttons like this :

class ReusableCard extends StatelessWidget {
  final String label;
  final VoidCallback onTap;
  ReusableCard({required this.label, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 200, // Increase or decrease the height of the button
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.blueGrey[600],
        ),
        onPressed: onTap,
        child: Text(
          label,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 25.0,
          ),
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

Output of this code :

3 . Add TextOverflow to the text widget like this (If you want know more about TextOverflow effect watch this tutorial : https://www.youtube.com/watch?v=3VvxU4EL51M) :

Text(
        label,
        maxLines: 1,
        overflow: TextOverflow.ellipsis, // TextOverflow.fade // TextOverflow.clip
        style: const TextStyle(
          color: Colors.white,
          fontSize: 25.0,
        ),
        textAlign: TextAlign.center,
      )

Output of this code :