Flutter strange behaviour of stack item on android

Question

I have a simple Stack with where I want to show the camera on the bottom right corner. On my iPhone everything just works fine and shows on bottom right corner. On my android simulator its always on top left corner. First up im wondering why we have such a difference here, second: How can I also get it working on bottom right on android? I Already tried alignment, fittedbox, and positioned which is actually getting ignored for android. this is the code:

...
if (state is ConferenceLoaded) {
              return Stack(
                children: <Widget>[
                  _buildParticipants(context),
                  Positioned(
                      bottom: 60,
                      child: IconButton(
                        color: Colors.red,
                        icon: Icon(
                          Icons.call_end_sharp,
                          color: Colors.white,
                        ),
                        onPressed: () async {
                          context.read<ConferenceCubit>().disconnect();
                          Navigator.of(context).pop();
                        },
                      ))
                ],
              );
            }

Widget _buildParticipants(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final children = <Widget>[];
    _buildOverlayLayout(context, size, children);
    return Stack(children: children);
  }

  void _buildOverlayLayout(
      BuildContext context, Size size, List<Widget> children) {
    final conferenceRoom = context.read<ConferenceCubit>();
    final participants = conferenceRoom.participants;

    children.add(
          Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          width: MediaQuery.of(context).size.width * 1,
          height: MediaQuery.of(context).size.height *1,
          color: Colors.blue,
          child: participants.length > 1 ? participants.firstWhere((element) => element.local == false) : Text('Waiting for partner'),
        ),
         Container(
            alignment: Alignment.bottomRight,
            
            width: MediaQuery.of(context).size.width * 1,
          height: MediaQuery.of(context).size.height *1,
            
              padding: const EdgeInsets.all(8.0),
              child: Container(
              alignment: Alignment.bottomRight,
                width: 100,
                height: 150,
                child: participants.firstWhere((element) => element.local == true)),
            ),
      ],
    ),);

result on ios:

result on android:

EDIT:

If I simply change my child: participants.firstWhere((element) => element.local == true)), to a red container I also have it on the bottom right corner. But I don't see the layout issue in my ParticipantWidget actually which looks like this:

class ParticipantWidget extends StatelessWidget {
  final Widget child;
  final String? id;
  final bool? local;

  const ParticipantWidget({
    required this.child,
    required this.id,
    required this.local
  });

  @override
  Widget build(BuildContext context) {
    return child;
  }
}

Answer 1

Okay I stumbled over the reason why it is not working and I want to share it with you, because people could save a lot time reading my problem case here.

For the above example I'm using a pubdev library called twilio_video. Behind the scene the library is using the android web and platform view which is causing the problem here. There are more librarys affected resulting in the exact same behaviour. For example flutter mapbox_gl and simply all who are using the android platform view.

Here you can read more about the problem and stay tuned until there is a fix out there.

https://github.com/flutter/flutter/issues/103630

As quick and dirty solution you can simply revert back your flutter version to 2.10.5 and everything just works fine on android.