Fixing game crashes on web

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
  - Adding MemoryCache class
+ - Fixing games crashes on Web
 
 ## 0.23.0
  - Add Joystick Component

lib/components/text_box_component.dart

@@ -15,7 +15,7 @@ class TextBoxConfig {
   final double timePerChar;
   final double dismissDelay;
 
-  const TextBoxConfig({
+  TextBoxConfig({
     this.maxWidth = 200.0,
     this.margin = 8.0,
     this.timePerChar = 0.0,
@@ -46,11 +46,12 @@ class TextBoxComponent extends PositionComponent with Resizable {
 
   TextBoxConfig get boxConfig => _boxConfig;
 
-  TextBoxComponent(String text,
+  TextBoxComponent(String text, {
-      {TextConfig config = const TextConfig(),
+    TextConfig config,
-      TextBoxConfig boxConfig = const TextBoxConfig()}) {
+    TextBoxConfig boxConfig,
-    _boxConfig = boxConfig;
+  }) {
-    _config = config;
+    _boxConfig = boxConfig ?? TextBoxConfig();
+    _config = config ?? TextConfig();
     _text = text;
     _lines = [];
     text.split(' ').forEach((word) {

lib/components/text_component.dart

@@ -27,8 +27,8 @@ class TextComponent extends PositionComponent {
     _updateBox();
   }
 
-  TextComponent(this._text, {TextConfig config = const TextConfig()}) {
+  TextComponent(this._text, {TextConfig config }) {
-    _config = config;
+    _config = config ?? TextConfig();
     _updateBox();
   }
 

lib/text_config.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart' as material;
 
 import 'position.dart';
 import 'anchor.dart';
+import 'memory_cache.dart';
 
 /// A Text Config contains all typographical information required to render texts; i.e., font size and color, family, etc.
 ///
@@ -52,10 +53,12 @@ class TextConfig {
   /// For proper fonts of languages like Hebrew or Arabic, replace this with [TextDirection.rtl].
   final TextDirection textDirection;
 
+  final MemoryCache _textPainterCache = MemoryCache<String, material.TextPainter>();
+
   /// Creates a constant [TextConfig] with sensible defaults.
   ///
   /// Every parameter can be specified.
-  const TextConfig({
+  TextConfig({
     this.fontSize = 24.0,
     this.color = const Color(0xFF000000),
     this.fontFamily = 'Arial',
@@ -93,22 +96,26 @@ class TextConfig {
   /// However, you probably want to use the [render] method witch already renders for you considering the anchor.
   /// That way, you don't need to perform the math for yourself.
   material.TextPainter toTextPainter(String text) {
-    final material.TextStyle style = material.TextStyle(
+    if (!_textPainterCache.containsKey(text)) {
-      color: color,
+      final material.TextStyle style = material.TextStyle(
-      fontSize: fontSize,
+          color: color,
-      fontFamily: fontFamily,
+          fontSize: fontSize,
-    );
+          fontFamily: fontFamily,
-    final material.TextSpan span = material.TextSpan(
+      );
-      style: style,
+      final material.TextSpan span = material.TextSpan(
-      text: text,
+          style: style,
-    );
+          text: text,
-    final material.TextPainter tp = material.TextPainter(
+      );
-      text: span,
+      final material.TextPainter tp = material.TextPainter(
-      textAlign: textAlign,
+          text: span,
-      textDirection: textDirection,
+          textAlign: textAlign,
-    );
+          textDirection: textDirection,
-    tp.layout();
+      );
-    return tp;
+      tp.layout();
+
+      _textPainterCache.setValue(text, tp);
+    }
+    return _textPainterCache.getValue(text);
   }
 
   /// Creates a new [TextConfig] changing only the [fontSize].