Problem in rendering of some icons associate with genders and skin tones.

[habit-rewards]

1. Some icons rendered with gender symbol.

   

2. Some skin tone icons have colour blocks below the icons

   

3. Frown face as also in other issues.

   

Run on FlutterFlow as Custom Action

// Automatic FlutterFlow imports
import '/backend/schema/structs/index.dart';
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/actions/index.dart'; // Imports other custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom action code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:flutter/foundation.dart' as foundation;

Future<String> emojiPicker(BuildContext context) async {
  // Add your function code here!

  Emoji emoji = await showModalBottomSheet(
    context: context,
    builder: (BuildContext subcontext) {
      return SizedBox(
        height: 400,
        child: EmojiPicker(
          onEmojiSelected: (category, emoji) {
            Navigator.pop(subcontext, emoji);
          },
          // textEditingController: textEditingController, // pass here the same [TextEditingController] that is connected to your input field, usually a [TextFormField]
          config: Config(
            columns: 7,
            emojiSizeMax: 32 *
                (foundation.defaultTargetPlatform == TargetPlatform.iOS
                    ? 1.30
                    : 1.0), // Issue: https://github.com/flutter/flutter/issues/28894
            verticalSpacing: 0,
            horizontalSpacing: 0,
            gridPadding: EdgeInsets.zero,
            initCategory: Category.RECENT,
            bgColor: Color(0xFFF2F2F2),
            indicatorColor: Colors.green,
            iconColor: Colors.grey,
            iconColorSelected: Colors.green,
            backspaceColor: Colors.green,
            skinToneDialogBgColor: Colors.white,
            skinToneIndicatorColor: Colors.grey,
            enableSkinTones: true,
            recentTabBehavior: RecentTabBehavior.RECENT,
            recentsLimit: 28,
            noRecents: const Text(
              'No Recents',
              style: TextStyle(fontSize: 20, color: Colors.black26),
              textAlign: TextAlign.center,
            ), // Needs to be const Widget
            loadingIndicator:
                const SizedBox.shrink(), // Needs to be const Widget
            tabIndicatorAnimDuration: kTabScrollDuration,
            categoryIcons: const CategoryIcons(),
            buttonMode: ButtonMode.MATERIAL,
          ),
        ),
      );
    },
  );

  return emoji.emoji;
}

[Fintasys]

What version of EmojiPicker were you using?

Some icons rendered with gender symbol.

Some skin tone icons have colour blocks below the icons

What device and android version did you test it on?

Frown face as also in other issues.

Will be fixed with Flutter 3.17 (See this issue #171 for more details)

[habit-rewards]

emoji_picker_flutter: ^1.6.3

The testing is rendered on FlutterFlow. I cannot see the version of the device. I am using Mac with M1 chip FlutterFlow v4.0 released January 15, 2024 Flutter version is 3.13.7

[Fintasys]

@habit-rewards I think the issue lays then in FlutterFlow and the device version they use. If you want to avoid those issues you can check the custom font example (preferred checkout version 2.0 branch), that should fix the issue even on older devices. Or you wait until the release of Flutter 3.17 which will hopefully solve all those issues at once.