flutterrenderingflutterflow

flutter white space between each line in alert dialog


Alert dialog is rendering differently on different phones, spacing between lines is really far apart on some, making the full text not visible. In this example, one screenshot is from an iphone 11 (where the spacing is too far apart) and the other is from an iphone 12 mini (where all the text fits in the alert box).

iphone 11 bad rendering:

iphone 11 bad rendering

iphone 12 mini good rendering:

iphone 12 mini good rendering

I was hoping to see the same rendering regardless of phone, but it appears to be a common problem when I ask friends to test. I'm using flutterflow but am open to suggestions of using code if there's a simple way for me to edit it.


Solution

  • You didn't give any code, so I'm not sure it will help you, but I'll give some code snippets that you can try.

    One reason I guess for inconsistent rendering could be the default text styles that vary across devices. (They are different in screen size, resolution, and fonts.)

    You can define custom text styles for the content of your AlertDialog to ensure more consistent rendering.

    AlertDialog(
      title: Text(''),
      content: Text(
        'You should specify this text styles',
        style: TextStyle(
          height: 1.5, 
          fontSize: 16.0, 
        ),
      ),
      ...
    );