vertical divider is not displaying on my emulator in flutter

Question

I have tried using the widget verticaldivider() in flutter, The code seems to work fine but i the divider is not visible on my app. where i want it to be. I want the divider to be between two images. The images are moved a little bit when i alter with the verticaldivider code but meaning it is present there but it cannot be seen why is that???

Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            const SizedBox(width: 10),
            GestureDetector(
              onTap: () {
                // Handle Google login
              },
              child: Image.asset(
                'assets/images/google.png', // Replace with your Google icon asset path
                width: 50,
                height: 50,
              ),
            ),
            const VerticalDivider(
              color: Colors.grey,
              width: 20,
              thickness: 1, // Increase thickness
              indent: 20,
              endIndent: 0,
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 10),
              color: Colors.grey.withOpacity(0.4),
              width: 3,
            ),
            GestureDetector(
              onTap: () {
                // Handle Facebook login
              },
              child: Image.asset(
                'assets/images/facebook.png', // Replace with your Facebook icon asset path
                width: 50,
                height: 50,
              ),
            ),
            const SizedBox(width: 10),
          ],
        ),

I even tried using a container trying to make my own divider but it was still not working. If you know what is going on here please help Thanks

Answer 1

I think you need to use IntrinsicHeight. Wrap your Row with it:

IntrinsicHeight(
  child: Row(
    // ...
  ),
),

Your current Divider has a height of 0 and I guess you want it to match the height of the Row. IntrinsicHeight gives the Divider a way to know the height of the Row and allows it to match it.

Answer 2

Try this code it is working fine.

    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        const SizedBox(width: 10),
        GestureDetector(
          onTap: () {
            // Handle Google login
          },
          child: Image.network(
            'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/2008px-Google_%22G%22_Logo.svg.png', // Replace with your Google icon asset path
            width: 50,
            height: 50,
          ),
        ),
        const VerticalDivider(
          color: Colors.grey,
          width: 20,
          thickness: 1, // Increase thickness
          indent: 20,
          endIndent: 0,
        ),
        GestureDetector(
          onTap: () {
            // Handle Facebook login
          },
          child: Image.network(
            'https://upload.wikimedia.org/wikipedia/en/thumb/0/04/Facebook_f_logo_%282021%29.svg/800px-Facebook_f_logo_%282021%29.svg.png', // Replace with your Facebook icon asset path
            width: 50,
            height: 50,
          ),
        ),
        const SizedBox(width: 10),
      ],
    );