Applying Cross-Platform Techniques

Icons and rendering

The Flutter engine ensures that the UI looks and behaves consistently across different platforms. This is achieved through Flutter’s use of its own rendering engine, which allows Flutter apps to maintain a unified appearance and behavior, regardless of whether they’re running on Android, iOS, web browsers, or desktop platforms. Although it runs quite well with default settings, we need to do some edits of our own to optimize it.

The web folder

The web folder in a Flutter project is used for web-specific resources and configurations. It’s meant for targeting and building the Flutter app to run on web browsers. We can include web-specific HTML, CSS, and JavaScript files in this folder.

When it comes to rendering Flutter apps for the web, there are two primary rendering engines:

• HTML/CSS renderer

• CanvasKit renderer

Let’s discuss the differences between these two renderers.

HTML/CSS Renderer

The HTML/CSS Renderer is the default rendering engine used when we build and deploy a Flutter app for the web. It leverages existing web technologies—like HTML, CSS, and JavaScript—to render the Flutter UI. Here are some key points about this renderer:

• DOM-based rendering: In this mode, Flutter widgets are translated into HTML elements, and CSS styles are applied to achieve the desired visual appearance. The Document Object Model (DOM) represents the UI structure.

• Browser integration: Since rendering is based on web technologies, Flutter’s HTML/CSS Renderer integrates seamlessly with web browsers and takes advantage of browser capabilities for layout and styling.

• Accessibility and SEO: Since the Flutter web content is rendered using standard HTML/CSS, it’s accessible by screen readers and is indexable by search engines, improving accessibility and SEO.

• Performance considerations: While the HTML/CSS Renderer offers good compatibility and accessibility, it might not be as performant as the CanvasKit renderer in scenarios with complex animations or graphical effects.

CanvasKit renderer

The CanvasKit renderer is an alternative rendering engine introduced to improve performance and graphical capabilities for Flutter web apps. It’s built on top of the Skia graphics library, also used for rendering on mobile platforms. Here are the key points about this renderer:

• Skia graphics: Skia is a highly performant 2D graphics library that’s capable of hardware-accelerated rendering. The CanvasKit renderer uses Skia to render Flutter UI components directly onto a 2D canvas.

• Performance boost: The CanvasKit renderer is designed to provide better performance for complex animations and graphical effects by leveraging Skia’s efficient rendering capabilities.

• WebAssembly: The CanvasKit renderer can be used in conjunction with WebAssembly to improve the performance of rendering operations further. WebAssembly allows running code at near-native speed within web browsers.

• Graphics-intensive apps: If our Flutter web app involves a lot of graphics, animations, or custom graphical effects, the CanvasKit renderer might be a better choice for achieving smooth and responsive visuals.

The index.html file

This file likely serves as the entry point for our web version of the app. We need to make sure any assets, fonts, or resources referenced in this HTML file are correctly linked and loaded. This will be achieved by modifying the index.html file as follows: