Skintone overlay position incorrect when using with go_router ShellRoute

[crizant]

Minimal code snippet:

import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

final router = GoRouter(
  routes: [
    ShellRoute(
      builder: (BuildContext context, GoRouterState state, Widget child) {
        return Row(
          children: [
            const SizedBox(
              width: 300.0,
            ),
            Expanded(
              child: child,
            ),
          ],
        );
      },
      routes: [
        GoRoute(
          path: '/',
          builder: (BuildContext context, state) {
            return const MyHomePage();
          },
        ),
      ],
    ),
  ],
);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      routerConfig: router,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            TextField(
              controller: _controller,
            ),
            SizedBox(
              height: 300,
              child: EmojiPicker(
                textEditingController: _controller,
                config: const Config(
                  columns: 12,
                  initCategory: Category.SMILEYS,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

[Fintasys]

@crizant Thanks for the bug report. I can reproduce the issue and it is caused by calculating the position over the overlay from the global coordinates. I tried quickly to fix it, but seems it requires more time. 🙏

Edit: first I assumed it's not because of ShellRoute just because of the space on the left. But seems it's only happening with ShellRoute. Not sure was could cause this 🤔

[Fintasys]

@crizant I tried to address your issue, but it's not as trivial as I thought. As result I added a new parameter to the Config. Would be great if you could give it a try on your project.

  emoji_picker_flutter:
    git:
      url: https://github.com/Fintasys/emoji_picker_flutter.git
      ref: fix-for-shellRoute-issue

and then Config

config: Config(
   ...
   customSkinColorOverlayHorizontalOffset: 0.0,
   ...
)   

[crizant]

I ended up creating my own emoji picker, I'm afraid that I will not be able to help test your fix. 😵‍💫