Testing flutter-pi on NXP i.MX 8M Nano

[ondrej1024]

I am running flutter-pi on an NXP i.MX8M Nano with GPU Vivante GC7000UL.

While most screens of the app look perfect, there is a problem with a screen that uses background color. This is how it appears on the i.MX8M system:

And this is how it should appear:

Flutter starts with these messages:

[flutter-pi] WARNING: display has non-square pixels. Non-square-pixels are not supported by flutter.
==============Locale==============
Flutter locale:
  default: en_US
  locales: en_US en.UTF-8 en.UTF-8 en.UTF-8 en_US en en.UTF-8
===================================
===================================
display mode:
  resolution: 800 x 480
  refresh rate: 68Hz
  physical size: 219mm x 219mm
  flutter device pixel ratio: 0.961307
===================================

Then there are some errors regarding the GLES11 API:

[     1] Failed GLES11 API GetProcAddress: glAlphaFuncxOES !
[     2] Failed GLES11 API GetProcAddress: glBindFramebufferOES !
[     3] Failed GLES11 API GetProcAddress: glBindRenderbufferOES !
[     4] Failed GLES11 API GetProcAddress: glBlendFuncSeparateOES !
[     5] Failed GLES11 API GetProcAddress: glBlendEquationOES !
[     6] Failed GLES11 API GetProcAddress: glBlendEquationSeparateOES !
[     7] Failed GLES11 API GetProcAddress: glCheckFramebufferStatusOES !
[     8] Failed GLES11 API GetProcAddress: glClearColorxOES !
[     9] Failed GLES11 API GetProcAddress: glClearDepthxOES !
[    10] Failed GLES11 API GetProcAddress: glClipPlanexOES !
[    11] Failed GLES11 API GetProcAddress: glClipPlanexIMG !
[    12] Failed GLES11 API GetProcAddress: glColor4xOES !
[    13] Failed GLES11 API GetProcAddress: glCurrentPaletteMatrixOES !
[    14] Failed GLES11 API GetProcAddress: glDeleteFramebuffersOES !
[    15] Failed GLES11 API GetProcAddress: glDeleteRenderbuffersOES !
[    16] Failed GLES11 API GetProcAddress: glDepthRangexOES !
[    17] Failed GLES11 API GetProcAddress: glDrawTexiOES !
[    18] Failed GLES11 API GetProcAddress: glDrawTexivOES !
[    19] Failed GLES11 API GetProcAddress: glDrawTexsOES !
[    20] Failed GLES11 API GetProcAddress: glDrawTexsvOES !
[    21] Failed GLES11 API GetProcAddress: glDrawTexxOES !
[    22] Failed GLES11 API GetProcAddress: glDrawTexxvOES !
[    23] Failed GLES11 API GetProcAddress: glEGLImageTargetRenderbufferStorageOES !
[    24] Failed GLES11 API GetProcAddress: glEGLImageTargetTexture2DOES !
[    25] Failed GLES11 API GetProcAddress: glFogxOES !
[    26] Failed GLES11 API GetProcAddress: glFogxvOES !
[    27] Failed GLES11 API GetProcAddress: glFramebufferRenderbufferOES !
[    28] Failed GLES11 API GetProcAddress: glFramebufferTexture2DOES !
[    29] Failed GLES11 API GetProcAddress: glFrustumxOES !
[    30] Failed GLES11 API GetProcAddress: glGenerateMipmapOES !
[    31] Failed GLES11 API GetProcAddress: glGenFramebuffersOES !
[    32] Failed GLES11 API GetProcAddress: glGenRenderbuffersOES !
[    33] Failed GLES11 API GetProcAddress: glGetClipPlanexOES !
[    34] Failed GLES11 API GetProcAddress: glGetFixedvOES !
[    35] Failed GLES11 API GetProcAddress: glGetFramebufferAttachmentParameterivOES !
[    36] Failed GLES11 API GetProcAddress: glGetLightxvOES !
[    37] Failed GLES11 API GetProcAddress: glGetMaterialxvOES !
[    38] Failed GLES11 API GetProcAddress: glGetRenderbufferParameterivOES !
[    39] Failed GLES11 API GetProcAddress: glGetTexEnvxvOES !
[    40] Failed GLES11 API GetProcAddress: glGetTexGenivOES !
[    41] Failed GLES11 API GetProcAddress: glGetTexGenxvOES !
[    42] Failed GLES11 API GetProcAddress: glGetTexParameterxvOES !
[    43] Failed GLES11 API GetProcAddress: glIsFramebufferOES !
[    44] Failed GLES11 API GetProcAddress: glIsRenderbufferOES !
[    45] Failed GLES11 API GetProcAddress: glLightModelxOES !
[    46] Failed GLES11 API GetProcAddress: glLightModelxvOES !
[    47] Failed GLES11 API GetProcAddress: glLightxOES !
[    48] Failed GLES11 API GetProcAddress: glLightxvOES !
[    49] Failed GLES11 API GetProcAddress: glLineWidthxOES !
[    50] Failed GLES11 API GetProcAddress: glLoadMatrixxOES !
[    51] Failed GLES11 API GetProcAddress: glLoadPaletteFromModelViewMatrixOES !
[    52] Failed GLES11 API GetProcAddress: glMaterialxOES !
[    53] Failed GLES11 API GetProcAddress: glMaterialxvOES !
[    54] Failed GLES11 API GetProcAddress: glMatrixIndexPointerOES !
[    55] Failed GLES11 API GetProcAddress: glMultMatrixxOES !
[    56] Failed GLES11 API GetProcAddress: glMultiDrawArraysEXT !
[    57] Failed GLES11 API GetProcAddress: glMultiDrawElementsEXT !
[    58] Failed GLES11 API GetProcAddress: glMultiTexCoord4xOES !
[    59] Failed GLES11 API GetProcAddress: glNormal3xOES !
[    60] Failed GLES11 API GetProcAddress: glOrthoxOES !
[    61] Failed GLES11 API GetProcAddress: glPointParameterxOES !
[    62] Failed GLES11 API GetProcAddress: glPointParameterxvOES !
[    63] Failed GLES11 API GetProcAddress: glPointSizexOES !
[    64] Failed GLES11 API GetProcAddress: glPolygonOffsetxOES !
[    65] Failed GLES11 API GetProcAddress: glQueryMatrixxOES !
[    66] Failed GLES11 API GetProcAddress: glRenderbufferStorageOES !
[    67] Failed GLES11 API GetProcAddress: glRotatexOES !
[    68] Failed GLES11 API GetProcAddress: glSampleCoveragexOES !
[    69] Failed GLES11 API GetProcAddress: glScalexOES !
[    70] Failed GLES11 API GetProcAddress: glTexDirectInvalidateVIV !
[    71] Failed GLES11 API GetProcAddress: glTexDirectVIV !
[    72] Failed GLES11 API GetProcAddress: glTexDirectVIVMap !
[    73] Failed GLES11 API GetProcAddress: glTexDirectMapVIV !
[    74] Failed GLES11 API GetProcAddress: glTexDirectTiledMapVIV !
[    75] Failed GLES11 API GetProcAddress: glTexEnvxOES !
[    76] Failed GLES11 API GetProcAddress: glTexEnvxvOES !
[    77] Failed GLES11 API GetProcAddress: glTexGeniOES !
[    78] Failed GLES11 API GetProcAddress: glTexGenivOES !
[    79] Failed GLES11 API GetProcAddress: glTexGenxOES !
[    80] Failed GLES11 API GetProcAddress: glTexGenxvOES !
[    81] Failed GLES11 API GetProcAddress: glTexParameterxOES !
[    82] Failed GLES11 API GetProcAddress: glTexParameterxvOES !
[    83] Failed GLES11 API GetProcAddress: glTranslatexOES !
[    84] Failed GLES11 API GetProcAddress: glWeightPointerOES !
[    85] Failed GLES11 API GetProcAddress: glBindBufferARB !
[    86] Failed GLES11 API GetProcAddress: glBufferDataARB !
[    87] Failed GLES11 API GetProcAddress: glBufferSubDataARB !
[    88] Failed GLES11 API GetProcAddress: glDeleteBuffersARB !
[    89] Failed GLES11 API GetProcAddress: glGenBuffersARB !
[    90] Failed GLES11 API GetProcAddress: glGetBufferParameterivARB !
[    91] Failed GLES11 API GetProcAddress: glClearDepthfOES !
[    92] Failed GLES11 API GetProcAddress: glClipPlanefOES !
[    93] Failed GLES11 API GetProcAddress: glClipPlanefIMG !
[    94] Failed GLES11 API GetProcAddress: glDepthRangefOES !
[    95] Failed GLES11 API GetProcAddress: glDrawTexfOES !
[    96] Failed GLES11 API GetProcAddress: glDrawTexfvOES !
[    97] Failed GLES11 API GetProcAddress: glFrustumfOES !
[    98] Failed GLES11 API GetProcAddress: glGetClipPlanefOES !
[    99] Failed GLES11 API GetProcAddress: glGetTexGenfvOES !
[   100] Failed GLES11 API GetProcAddress: glOrthofOES !
[   101] Failed GLES11 API GetProcAddress: glTexGenfOES !
[   102] Failed GLES11 API GetProcAddress: glTexGenfvOES !
[   103] Failed GLES11 API GetProcAddress: glMapBufferOES !
[   104] Failed GLES11 API GetProcAddress: glUnmapBufferOES !
[   105] Failed GLES11 API GetProcAddress: glGetBufferPointervOES !
[   106] Failed ES Common GLES11 API GetProcAddress: glMapBufferOES !

And at the end we get some additional information:

EGL information:
  version: 1.5
  vendor: "Vivante Corporation"
  client extensions: "EGL_EXT_client_extensions EGL_EXT_platform_base EGL_KHR_platform_wayland EGL_EXT_platform_wayland EGL_KHR_platform_gbm"
  display extensions: "EGL_KHR_fence_sync EGL_KHR_reusable_sync EGL_KHR_wait_sync EGL_KHR_image EGL_KHR_image_base EGL_KHR_image_pixmap EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_EXT_image_dma_buf_import EGL_EXT_image_dma_buf_import_modifiers EGL_KHR_lock_surface EGL_KHR_create_context EGL_KHR_no_config_context EGL_KHR_surfaceless_context EGL_KHR_get_all_proc_addresses EGL_EXT_create_context_robustness EGL_EXT_protected_surface EGL_EXT_protected_content EGL_EXT_buffer_age EGL_ANDROID_native_fence_sync EGL_WL_bind_wayland_display EGL_WL_create_wayland_buffer_from_image EGL_KHR_partial_update EGL_EXT_swap_buffers_with_damage EGL_KHR_swap_buffers_with_damage"
===================================
OpenGL ES information:
  version: "OpenGL ES 3.1 V6.4.0.p2.234062"
  shading language version: "OpenGL ES GLSL ES 3.10"
  vendor: "Vivante Corporation"
  renderer: "Vivante GC7000UL"
  extensions: "GL_OES_vertex_type_10_10_10_2 GL_OES_vertex_half_float GL_OES_element_index_uint GL_OES_mapbuffer GL_OES_vertex_array_object GL_OES_compressed_ETC1_RGB8_texture GL_OES_compressed_paletted_texture GL_OES_texture_npot GL_OES_rgb8_rgba8 GL_OES_depth_texture GL_OES_depth_texture_cube_map GL_OES_depth24 GL_OES_depth32 GL_OES_packed_depth_stencil GL_OES_fbo_render_mipmap GL_OES_get_program_binary GL_OES_fragment_precision_high GL_OES_standard_derivatives GL_OES_EGL_image GL_OES_EGL_sync GL_OES_texture_stencil8 GL_OES_shader_image_atomic GL_OES_texture_storage_multisample_2d_array GL_OES_required_internalformat GL_OES_surfaceless_context GL_OES_draw_buffers_indexed GL_OES_texture_border_clamp GL_OES_texture_buffer GL_OES_texture_cube_map_array GL_OES_draw_elements_base_vertex GL_OES_texture_half_float GL_OES_texture_float GL_KHR_blend_equation_advanced GL_KHR_debug GL_KHR_robustness GL_KHR_robust_buffer_access_behavior GL_EXT_texture_type_2_10_10_10_REV GL_EXT_texture_compression_dxt1 GL_EXT_texture_format_BGRA8888 GL_EXT_texture_compression_s3tc GL_EXT_read_format_bgra GL_EXT_multi_draw_arrays GL_EXT_frag_depth GL_EXT_discard_framebuffer GL_EXT_blend_minmax GL_EXT_multisampled_render_to_texture GL_EXT_color_buffer_half_float GL_EXT_color_buffer_float GL_EXT_robustness GL_EXT_texture_sRGB_decode GL_EXT_draw_buffers_indexed GL_EXT_texture_border_clamp GL_EXT_texture_buffer GL_EXT_texture_cube_map_array GL_EXT_multi_draw_indirect GL_EXT_draw_elements_base_vertex GL_EXT_texture_rg GL_EXT_protected_textures GL_EXT_sRGB GL_VIV_direct_texture "
===================================

So is it possible that the GLES11 API errors cause the problems with the background color? Any idea how this could be resolved?

Thanks a lot

[ardera]

not sure the failed proc resolves are problematic, if flutter doesn't complain about it it should be fine
can you send me the source code of the widget?

Do you have similar widgets on other screens (for example similar cards like that, with the same gradient), that look fine? If you add this widget to other screens of the app, does it look fine? Or will it not render correctly too?

[ondrej1024]

can you send me the source code of the widget?

Here you go:
gridzones.dart.zip

[ondrej1024]

Do you have similar widgets on other screens

Sometimes the same widget on the same page looks like this:

[ondrej1024]

Another widget looks like this:

But should look like this (as on RPi):

[marco-1988]

Hi.
I add some additional comment about this issue.

First of all, the application runs perfectly both with flutter-pi and pure flutter on a raspberry pi with a 64-bit processor.
Now we are testing it on this board, where the application starts but with these problems described by Ondrej.

It seems to me that the problem may be these errors that are reported:

[compositor] GPU does not support reflecting the screen in Y-direction.
  This is required for rendering into hardware overlay planes though.
  Any UI that is drawn in overlay planes will look upside down.
[compositor] GPU does not supported the desired HW plane order.
  Some UI layers may be invisible.

Also the squares I have now managed to show them correctly by making a change to the Continaer, basically by changing the Border radius in the decoration.

The problem persists in the arc, which is accomplished with a library called Syncfusion, using the SfRadialGauge component.

As I repeat, however, on Raspberry PI this code ran without problems.

Do you have any idea about the nature of the problem?

On this Variscite board with Vivante GPU we have installed the Debian recovery card optimized for this processor.

Thank you

[ardera]

It seems to me that the problem may be these errors that are reported:

[compositor] GPU does not support reflecting the screen in Y-direction.
  This is required for rendering into hardware overlay planes though.
  Any UI that is drawn in overlay planes will look upside down.
[compositor] GPU does not supported the desired HW plane order.
  Some UI layers may be invisible.

These happen on various boards, probably unrelated to the issue.

Also the squares I have now managed to show them correctly by making a change to the Continaer, basically by changing the Border radius in the decoration.

Do you have any idea about the nature of the problem?

That really sounds like it's a driver or flutter bug, other than that I have no idea I'm afraid.