Search code examples
flutterflutter-designflutter-container

vertical divider is not displaying on my emulator in flutter


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 Thanksenter image description here


Solution

  • 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.