Font icons don't show up

[jpnurmi]

I've built and deployed the Flutter counter template app. When running the app with flutter-pi, the button icon doesn't render (should look like a ➕):

Remarks:

• All dependencies mentioned in the README have been installed, including fontconfig
• According to strace, MaterialIcons-Regular.otf is not accessed at all
• Same result with MaterialIcons.add replaced by CupertinoIcons.add

For reference:

deployed structure

material_app/
├── app.so
└── flutter_assets
    ├── AssetManifest.json
    ├── FontManifest.json
    ├── fonts
    │   └── MaterialIcons-Regular.otf
    ├── isolate_snapshot_data
    ├── kernel_blob.bin
    ├── NOTICES
    ├── packages
    │   └── cupertino_icons
    │       └── assets
    │           └── CupertinoIcons.ttf
    └── vm_snapshot_data

5 directories, 9 files

flutter-pi output

pi@raspberrypi:~ $ flutter-pi --release material_app
[flutter-pi] WARNING: display didn't provide valid physical dimensions.
             The device-pixel ratio will default to 1.0, which may not be the fitting device-pixel ratio for your display.
===================================
display mode:
  resolution: 1024 x 600
  refresh rate: 60Hz
  physical size: 0mm x 0mm
  flutter device pixel ratio: 1.000000
===================================
EGL information:
  version: 1.4
  vendor: "Mesa Project"
  client extensions: "EGL_EXT_device_base EGL_EXT_device_enumeration EGL_EXT_device_query EGL_EXT_platform_base EGL_KHR_client_get_all_proc_addresses EGL_EXT_client_extensions EGL_KHR_debug EGL_EXT_platform_wayland EGL_EXT_platform_x11 EGL_MESA_platform_gbm EGL_MESA_platform_surfaceless EGL_EXT_platform_device"
  display extensions: "EGL_ANDROID_blob_cache EGL_EXT_buffer_age EGL_EXT_image_dma_buf_import EGL_EXT_image_dma_buf_import_modifiers EGL_KHR_cl_event2 EGL_KHR_config_attribs EGL_KHR_create_context EGL_KHR_create_context_no_error EGL_KHR_fence_sync EGL_KHR_get_all_proc_addresses EGL_KHR_gl_colorspace EGL_KHR_gl_renderbuffer_image EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_3D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_image EGL_KHR_image_base EGL_KHR_image_pixmap EGL_KHR_no_config_context EGL_KHR_reusable_sync EGL_KHR_surfaceless_context EGL_EXT_pixel_format_float EGL_KHR_wait_sync EGL_MESA_configless_context EGL_MESA_drm_image EGL_MESA_image_dma_buf_export EGL_MESA_query_driver EGL_WL_bind_wayland_display "
===================================
OpenGL ES information:
  version: "OpenGL ES 3.1 Mesa 19.3.2"
  shading language version: "OpenGL ES GLSL ES 3.10"
  vendor: "Broadcom"
  renderer: "V3D 4.2"
  extensions: "GL_EXT_blend_minmax GL_EXT_multi_draw_arrays GL_EXT_texture_format_BGRA8888 GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth24 GL_OES_element_index_uint GL_OES_fbo_render_mipmap GL_OES_mapbuffer GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_stencil8 GL_OES_texture_3D GL_OES_texture_float GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_half_float GL_EXT_texture_sRGB_decode GL_OES_EGL_image GL_OES_depth_texture GL_OES_packed_depth_stencil GL_EXT_texture_type_2_10_10_10_REV GL_OES_get_program_binary GL_APPLE_texture_max_level GL_EXT_discard_framebuffer GL_EXT_read_format_bgra GL_EXT_frag_depth GL_NV_fbo_color_attachments GL_OES_EGL_image_external GL_OES_EGL_sync GL_OES_vertex_array_object GL_EXT_occlusion_query_boolean GL_EXT_texture_rg GL_EXT_unpack_subimage GL_NV_draw_buffers GL_NV_read_buffer GL_NV_read_depth GL_NV_read_depth_stencil GL_NV_read_stencil GL_EXT_draw_buffers GL_EXT_map_buffer_range GL_KHR_debug GL_KHR_texture_compression_astc_ldr GL_OES_depth_texture_cube_map GL_OES_required_internalformat GL_OES_surfaceless_context GL_EXT_color_buffer_float GL_EXT_sRGB_write_control GL_EXT_separate_shader_objects GL_EXT_shader_implicit_conversions GL_EXT_shader_integer_mix GL_EXT_base_instance GL_EXT_compressed_ETC1_RGB8_sub_texture GL_EXT_draw_elements_base_vertex GL_EXT_primitive_bounding_box GL_EXT_shader_io_blocks GL_EXT_texture_border_clamp GL_EXT_texture_norm16 GL_KHR_context_flush_control GL_NV_image_formats GL_OES_draw_elements_base_vertex GL_OES_primitive_bounding_box GL_OES_shader_io_blocks GL_OES_texture_border_clamp GL_OES_texture_stencil8 GL_OES_texture_storage_multisample_2d_array GL_EXT_buffer_storage GL_EXT_float_blend GL_KHR_no_error GL_KHR_texture_compression_astc_sliced_3d GL_OES_EGL_image_external_essl3 GL_OES_shader_image_atomic GL_MESA_shader_integer_functions GL_KHR_parallel_shader_compile GL_MESA_framebuffer_flip_y GL_EXT_texture_query_lod "
===================================
Error finding variable in buffer: find_var_offset_in_string: Invalid argument
Error finding variable in buffer: find_var_offset_in_string: Invalid argument
Error finding variable in buffer: find_var_offset_in_string: Invalid argument
Error finding variable in buffer: find_var_offset_in_string: Invalid argument

[ardera]

Does it work on another platform? Fonts / Assets are handled by flutter internally AFAIK

[jpnurmi]

Sure, if I run the same app on any other platform, the icon shows up fine. For desktop Linux I have to switch to the dev or master channel, though, but then I can also see MaterialIcons-Regular.otf being accessed in strace output.

[jpnurmi]

There we go, spotted this:

[pid   804] openat(20, "FontManifest.json", O_RDONLY|O_LARGEFILE) = -1 ENOENT (No such file or directory)

Must be something wrong with the current working directory or the deployment structure?

[ardera]

Oh, it's actually just an issue with your bundle.

When you deploy the app to Pi, you need copy the /build/app.so into the /build/flutter_assets directory and then deploy the /build/flutter_assets directory.

So your directory structure should look like this:

material_app/
├── app.so
├── AssetManifest.json
├── FontManifest.json
├── fonts
│   └── MaterialIcons-Regular.otf
├── isolate_snapshot_data
├── kernel_blob.bin
├── NOTICES
├── packages
│   └── cupertino_icons
│       └── assets
│           └── CupertinoIcons.ttf
└── vm_snapshot_data

5 directories, 9 files

I'm surprised the app even launched considering the only file that was in the right place was the app.so.

[jpnurmi]

Ah, thanks! 👍 => #111