[Impeller] Emoji rendering is broken in the 3.13.3 vs the lower 3.10.6 #134292
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Steps to reproduce
Upgrade from 3.10.6 to 3.13.3
It reproduces on ios devices, tried on my Iphone X and a Iphone 14 Pro max emulator.
Appears to be working fine on Android and Mac Os
Expected results
The grids of emojis should scroll with no problem, fluidly, and show all the elements.
Actual results
The grids of emojis scroll a bit, then the view gets white (skips some elements), and then scrolls some more. some "ImpellerValidationBreak" errors are logged when the view gets white.
Code sample
Code sample
var peopleEmojis = [
"😀", "😬", "😁", "😂", "😃", "😄", "😅", "😆", "😇", "😉", "😊", "🙂", "🙃", "☺️", "😋", "😌", "😍", "😘", "😗", "😙",
"😚", "😜", "😝", "😛", "🤑", "🤓", "😎", "🤗", "😏", "😶", "😐", "😑", "😒", "🙄", "🤔", "😳", "😞", "😟", "😠", "😡",
"😔", "😕", "🙁", "😣", "😖", "😫", "😩", "😤", "😮", "😱", "😨", "😰", "😯", "😦", "😧", "😢", "😥", "😪", "😓",
"😭", "😵", "😲", "🤐", "😷", "🤒", "🤕", "😴", "💤", "💩", "😈", "👿", "👹", "👺", "👻", "💀", "☠️", "👽", "👾", "🤖",
"😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾", "🙌", "👏", "👍", "👎", "👊", "✊", "👋", "👈", "👉", "👆", "👇",
"👌", "☝️", "✌️", "✋", "🖐", "👐", "💪", "🙏", "🖖", "🤘", "🖕", "✍️", "💅", "👄", "👅", "👂", "👃", "👁", "👀", "🗣",
"👤", "👥", "👶", "👦", "👧", "👨", "👩", "👱", "👴", "👵", "👲", "👳", "👮", "👷", "💂", "🎅", "👸", "👰", "👼", "🙇",
"💁", "🙅", "🙆", "🙋", "🙎", "🙍", "💇", "💆", "💃", "👯", "🚶", "🏃", "👫", "👭", "👬", "💑", "👩❤️👩", "👨❤️👨", "💏", "👩❤️💋👩",
"👨❤️💋👨", "👪", "👨👩👧", "👨👩👧👦", "👨👩👦👦", "👨👩👧👧", "👩👩👦", "👩👩👧", "👩👩👧👦", "👩👩👦👦", "👩👩👧👧", "👨👨👦", "👨👨👧", "👨👨👧👦", "👨👨👦👦", "👨👨👧👧", "👚", "👕", "👖", "👔",
"👗", "👙", "👘", "💄", "💋", "👣", "👠", "👡", "👢", "👞", "👟", "👒", "🎩", "🎓", "👑", "⛑", "🎒", "👝", "👛", "👜",
"💼", "👓", "🕶", "💍", "🌂"
];
var natureEmojis = [
"🐶", "🐱", "🐭", "🐹", "🐰", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷", "🐽", "🐸", "🐙", "🐵", "🙈", "🙉", "🙊", "🐒",
"🐔", "🐧", "🐦", "🐤", "🐣", "🐥", "🐺", "🐗", "🐴", "🦄", "🐝", "🐛", "🐌", "🐞", "🐜", "🕷", "🦂", "🦀", "🐍", "🐢",
"🐠", "🐟", "🐡", "🐬", "🐳", "🐋", "🐊", "🐆", "🐅", "🐃", "🐂", "🐄", "🐪", "🐫", "🐘", "🐐", "🐏", "🐑", "🐎", "🐖",
"🐀", "🐁", "🐓", "🦃", "🕊", "🐕", "🐩", "🐈", "🐇", "🐿", "🐾", "🐉", "🐲", "🌵", "🎄", "🌲", "🌳", "🌴", "🌱", "🌿",
"☘", "🍀", "🎍", "🎋", "🍃", "🍂", "🍁", "🌾", "🌺", "🌻", "🌹", "🌷", "🌼", "🌸", "💐", "🍄", "🌰", "🎃", "🐚", "🕸",
"🌎", "🌍", "🌏", "🌕", "🌖", "🌗", "🌘", "🌑", "🌒", "🌓", "🌔", "🌚", "🌝", "🌛", "🌜", "🌞", "🌙", "⭐️", "🌟", "💫",
"✨", "☄️", "☀️", "🌤", "⛅️", "🌥", "🌦", "☁️", "🌧", "⛈", "🌩", "⚡️", "🔥", "💥", "❄️", "🌨", "☃️", "⛄️", "🌬", "💨",
"🌪", "🌫", "☂️", "☔️", "💧", "💦", "🌊"
];
var foodsEmojis = [
"🍏", "🍎", "🍐", "🍊", "🍋", "🍌", "🍉", "🍇", "🍓", "🍈", "🍒", "🍑", "🍍", "🍅", "🍆", "🌶", "🌽", "🍠", "🍯", "🍞",
"🧀", "🍗", "🍖", "🍤", "🍳", "🍔", "🍟", "🌭", "🍕", "🍝", "🌮", "🌯", "🍜", "🍲", "🍥", "🍣", "🍱", "🍛", "🍙", "🍚",
"🍘", "🍢", "🍡", "🍧", "🍨", "🍦", "🍰", "🎂", "🍮", "🍬", "🍭", "🍫", "🍿", "🍩", "🍪", "🍺", "🍻", "🍷", "🍸", "🍹",
"🍾", "🍶", "🍵", "☕️", "🍼", "🍴", "🍽"
];
var activityEmojis = [
"⚽️", "🏀", "🏈", "⚾️", "🎾", "🏐", "🏉", "🎱", "🏓", "🏸", "🏒", "🏑", "🏏", "🏹", "⛳️", "🎣", "⛸", "🎿", "⛷", "🏂",
"🏄", "🏊", "🚣", "🏇", "🚴", "🚵", "🛀", "🕴", "🎗", "🎽", "🏅", "🎖", "🏆", "🏵", "🎯", "🎫", "🎟", "🎭", "🎨", "🎪",
"🎬", "🎤", "🎧", "🎼", "🎹", "🎷", "🎺", "🎸", "🎻", "🎮", "🎰", "🎲", "🎳"
];
var placesEmojis = [
"🚗", "🚕", "🚙", "🚌", "🚎", "🏎", "🚓", "🚑", "🚒", "🚐", "🚚", "🚛", "🚜", "🏍", "🚲", "🚨", "🚔", "🚍", "🚘", "🚖",
"🚡", "🚠", "🚟", "🚃", "🚋", "🚝", "🚄", "🚅", "🚈", "🚞", "🚂", "🚆", "🚇", "🚊", "🚉", "🚁", "🛩", "✈️", "🛫", "🛬",
"⛵️", "🛥", "🚤", "⛴", "🛳", "🚀", "🛰", "💺", "⚓️", "🚧", "⛽️", "🚏", "🚦", "🚥", "🗺", "🚢", "🎡", "🎢", "🎠", "🏗",
"🌁", "🗼", "🏭", "⛲️", "🎑", "⛰", "🏔", "🗻", "🌋", "🗾", "🏕", "⛺️", "🏞", "🛣", "🛤", "🌅", "🌄", "🏜", "🏖", "🏝",
"🌇", "🌆", "🏙", "🌃", "🌉", "🌌", "🌠", "🎇", "🎆", "🌈", "🏘", "🏰", "🏯", "🏟", "🗽", "🏠", "🏡", "🏚", "🏢", "🏬",
"🏣", "🏤", "🏥", "🏦", "🏨", "🏪", "🏫", "🏩", "💒", "🏛", "⛪️", "🕌", "🕍", "🕋", "⛩"
];
var objectsEmojis = [
"⌚️", "📱", "📲", "💻", "⌨️", "🖥", "🖨", "🖱", "🖲", "🕹", "🗜", "💽", "💾", "💿", "📀", "📼", "📷", "📸", "📹", "🎥",
"📽", "🎞", "📞", "☎️", "📟", "📠", "📺", "📻", "🎙", "🎚", "🎛", "⏱", "⏲", "⏰", "🕰", "⏳", "⌛️", "📡", "🔋", "🔌",
"💡", "🔦", "🕯", "🗑", "🛢", "💸", "💵", "💴", "💶", "💷", "💰", "💳", "💎", "⚖", "🔧", "🔨", "⚒", "🛠", "⛏", "🔩",
"⚙", "⛓", "🔫", "💣", "🔪", "🗡", "⚔", "🛡", "🚬", "⚰", "⚱", "🏺", "🔮", "📿", "💈", "⚗", "🔭", "🔬", "🕳", "💊",
"💉", "🌡", "🚽", "🚿", "🛁", "🛎", "🔑", "🗝", "🚪", "🛋", "🛌", "🛏", "🖼", "⛱", "🗿", "🛍", "🎁", "🎈", "🎏", "🎀",
"🎊", "🎉", "🎐", "🏮", "🎎", "✉️", "📩", "📨", "📧", "💌", "📥", "📤", "📦", "🏷", "🔖", "📪", "📫", "📬", "📭", "📮",
"📯", "📜", "📃", "📄", "📑", "📊", "📈", "📉", "🗒", "🗓", "📆", "📅", "📇", "🗃", "🗳", "🗄", "📋", "📁", "📂", "🗂",
"🗞", "📰", "📓", "📔", "📒", "📕", "📗", "📘", "📙", "📚", "📖", "🔗", "📎", "🖇", "📐", "📏", "✂️", "📌", "📍", "🚩",
"🎌", "🏴", "🏁", "🖌", "🖍", "🖊", "🖋", "✒️", "📝", "✏️", "🔏", "🔐", "🔒", "🔓", "🔍", "🔎"
];
var symbolsEmojis = [
"❤️", "💛", "💚", "💙", "💜", "💔", "❣️", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "☮️", "✝️", "☪️", "🕉", "☸️",
"✡️", "🔯", "🕎", "☯️", "☦️", "🛐", "⛎", "♈️", "♉️", "♊️", "♋️", "♌️", "♍️", "♎️", "♏️", "♐️", "♑️", "♒️", "♓️", "🆔",
"⚛", "🈳", "🈹", "☢️", "☣️", "📴", "📳", "🈶", "🈚️", "🈸", "🈺", "🈷️", "✴️", "🆚", "🉑", "💮", "🉐", "㊙️", "㊗️", "🈴",
"🈵", "🈲", "🅰️", "🅱️", "🆎", "🆑", "🅾️", "🆘", "⛔️", "📛", "🚫", "❌", "⭕️", "💢", "♨️", "🚷", "🚯", "🚳", "🚱", "🔞",
"📵", "❗️", "❕", "❓", "❔", "‼️", "⁉️", "💯", "🔅", "🔆", "🔱", "⚜", "〽️", "⚠️", "🚸", "🔰", "♻️", "🈯️", "💹", "❇️",
"✳️", "❎", "✅", "🌐", "Ⓜ️", "💠", "🌀", "➿", "🏧", "🈂️", "🛂", "🛃", "🛄", "🛅", "♿️", "🚭", "🚾", "🅿️", "🚰", "🚹",
"🚺", "🚼", "🚻", "🚮", "🎦", "📶", "🈁", "🔤", "🔡", "🔠", "🔣", "ℹ️", "🆖", "🆗", "🆙", "🆒", "🆕", "🆓", "0️⃣", "1️⃣",
"2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣", "🔟", "🔢", "#️⃣", "*️⃣", "▶️", "⏸", "⏯", "⏹", "⏺", "⏭", "⏮", "⏩",
"⏪", "⏫", "⏬", "◀️", "🔼", "🔽", "➡️", "⬅️", "⬆️", "⬇️", "↗️", "↘️", "↙️", "↖️", "↕️", "↔️", "↪️", "↩️", "⤴️", "⤵️",
"🔀", "🔁", "🔂", "🔄", "🔃", "🎵", "🎶", "〰️", "➰", "✔️", "➕", "➖", "➗", "✖️", "💲", "💱", "™️", "©️", "®️", "🔚",
"🔙", "🔛", "🔝", "🔜", "☑️", "🔘", "⚪️", "⚫️", "🔴", "🔵", "🔺", "🔻", "🔸", "🔹", "🔶", "🔷", "🔳", "🔲", "▪️", "▫️",
"◾️", "◽️", "◼️", "◻️", "⬛️", "⬜️", "🔇", "🔈", "🔉", "🔊", "🔕", "🔔", "📣", "📢", "👁🗨", "💬", "💭", "🗯", "🃏", "🀄️",
"🎴", "♠️", "♣️", "♥️", "♦️", "🕐", "🕑", "🕒", "🕓", "🕔", "🕕", "🕖", "🕗", "🕘", "🕙", "🕚", "🕛", "🕜", "🕝", "🕞",
"🕟", "🕠", "🕡", "🕢", "🕣", "🕤", "🕥", "🕦", "🕧"
];
above is the full list of emojis---------------------
const SliverPadding(
padding: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 00),
sliver: SliverToBoxAdapter(
child: Center(
child: Text(
"People",
style:
TextStyle(fontSize: 17, color: CupertinoColors.secondaryLabel),
)),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 10),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Center(
child: MyEmoticon(
horizontalPadding: 0,
emoticon: peopleEmojis[index],
size: 35),
);
},
childCount: peopleEmojis.length,
),
),
),
const SliverPadding(
padding: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 10),
sliver: SliverToBoxAdapter(
child: Center(
child: Text(
"Nature",
style:
TextStyle(fontSize: 17, color: CupertinoColors.secondaryLabel),
)),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 10),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Center(
child: MyEmoticon(
horizontalPadding: 0,
emoticon: natureEmojis[index],
size: 35),
);
},
childCount: natureEmojis.length,
),
),
),
const SliverPadding(
padding: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 10),
sliver: SliverToBoxAdapter(
child: Center(
child: Text(
"Foods",
style:
TextStyle(fontSize: 17, color: CupertinoColors.secondaryLabel),
)),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 10),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Center(
child: MyEmoticon(
horizontalPadding: 0,
emoticon: foodsEmojis[index],
size: 35),
);
},
childCount: foodsEmojis.length,
),
),
),
const SliverPadding(
padding: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 10),
sliver: SliverToBoxAdapter(
child: Center(
child: Text(
"Activity",
style:
TextStyle(fontSize: 17, color: CupertinoColors.secondaryLabel),
)),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 10),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Center(
child: MyEmoticon(
horizontalPadding: 0,
emoticon: activityEmojis[index],
size: 35),
);
},
childCount: activityEmojis.length,
),
),
),
const SliverPadding(
padding: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 10),
sliver: SliverToBoxAdapter(
child: Center(
child: Text(
"Places",
style:
TextStyle(fontSize: 17, color: CupertinoColors.secondaryLabel),
)),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 10),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Center(
child: MyEmoticon(
horizontalPadding: 0,
emoticon: placesEmojis[index],
size: 35),
);
},
childCount: placesEmojis.length,
),
),
),
const SliverPadding(
padding: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 10),
sliver: SliverToBoxAdapter(
child: Center(
child: Text(
"Objects",
style:
TextStyle(fontSize: 17, color: CupertinoColors.secondaryLabel),
)),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 10),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Center(
child: MyEmoticon(
horizontalPadding: 0,
emoticon: objectsEmojis[index],
size: 35),
);
},
childCount: objectsEmojis.length,
),
),
),
const SliverPadding(
padding: EdgeInsets.only(left: 10, right: 10, top: 20, bottom: 10),
sliver: SliverToBoxAdapter(
child: Center(
child: Text(
"Symbols",
style:
TextStyle(fontSize: 17, color: CupertinoColors.secondaryLabel),
)),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 10),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 6,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Center(
child: MyEmoticon(
horizontalPadding: 0,
emoticon: symbolsEmojis[index],
size: 35),
);
},
childCount: symbolsEmojis.length,
),
),
),
those are the implemented grids ------------------
import 'dart:io';
import 'package:flutter/material.dart';
class MyEmoticon extends StatelessWidget {
const MyEmoticon({Key? key, this.horizontalPadding = 0, required this.emoticon, required this.size}) : super(key: key);
final String emoticon;
final double horizontalPadding;
final double size;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: horizontalPadding),
child: Center(
child: Text(emoticon, style: TextStyle(fontSize: size, fontFamily: Platform.isIOS || Platform.isMacOS ? "AppleFont" : "NotoColorEmoji"), textScaleFactor: 1.0,
),
),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
Logs
Logs
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Failed to render entity.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not create valid atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Cannot render glyphs without prepared atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Failed to render entity.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not create valid atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Cannot render glyphs without prepared atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Failed to render entity.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not create valid atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Cannot render glyphs without prepared atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Failed to render entity.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Could not create valid atlas.
[VERBOSE-2:validation.cc(49)] Break on 'ImpellerValidationBreak' to inspect point of failure: Cannot render glyphs without prepared atlas.Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.3, on macOS 13.4.1 22F82 darwin-arm64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.2)
[✓] Connected device (5 available)
[✓] Network resources