Question 225593 in Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

3

Answers


  1. 0

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

    enter image description here

    Login or Signup to reply.
  2. 0

    did you see any changes after changing color of divider?

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search