CODEWITHSUNDEEP
imageflutterdartmobileflutter-layout
holycamolie
holycamolie

Reputation: 309

What is causing this disparity of image width/coverage between platforms on Flutter?

I am working on a Tinder-esque card system in my current project, and I got it to start looking nice on my local android device. However, when I run in on the iOS simulator, the image within the Card widget ends up not filling the view, even though its width is set to the MediaQuery width as you can see in the code below.

Does anyone know a solution to this, or is this just a cross platform problem I have to deal with?

IMAGES: Android view iOS view

CODE:

class TinderCard extends StatelessWidget {

  final User user;

  const TinderCard({@required this.user});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30)//BorderRadius.vertical(top: Radius.circular(30))
        ),
        elevation: 5,
        child: curvedClipRect(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Image(image: NetworkImage(user.profileUrl), width: MediaQuery.of(context).size.width, alignment: Alignment.center,),
              Padding(
                padding: const EdgeInsets.only(left: 10, bottom: 7, right: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("${user.firstName} ${user.lastName}", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),),

                    Text("Height: ${user.height} in."),
                    Text(user.location),
                  ]
                ),
              ),
              Row(
                children: <Widget>[
                  IconButton(icon: Icon(Icons.close), onPressed: () {}),
                  Spacer(),
                  IconButton(icon: Icon(Icons.check), onPressed: () {}),
                ],
              )
            ]
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Views: 37

Answers (1)

encubos
encubos

Reputation: 3273

I think is just a difference in the device screen ratio (width height proportions)

Your android device screen is different from your iOS device screen.

The card and image widgets are keeping the proportions in both devices.

Verify the screen width and height in both of your emulators .

Looks good to me. No cross-platform issue.

Upvotes: 2

Related Questions