Cannot align custom popup widget to right side of screen

[phranklins]

I have the custom popup appearing from an icon in the app bar in Flutterflow. I can move it more to the left, but no matter what is entered as dx in the custom widget code, the custom popup doesn't move closer to the right side of the screen. There seems to be an invisible padding or something preventing it from moving more. I can see a slight shadow when hovering over the space I want to remove via the offset.

[thruthesky]

Hi, @phranklins Can you provide more details?

The screenshot of whole screen and the code you made in UI builder.

Thank you.

[phranklins]

Yes. I followed your instructions, but instead of "ChatRoomMenu", my widget was named "SecondaryMenu". The code I used in the widget was updated based off of what you shared in your screenshot with the following:

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

import '../../components/secondary_menu_icon_widget.dart';
import '../../components/secondary_menu_popup_widget.dart';
import 'package:fireflow/fireflow.dart';

class SecondaryMenu extends StatefulWidget {
  const SecondaryMenu({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

  @override
  _SecondaryMenuState createState() => _SecondaryMenuState();
}

class _SecondaryMenuState extends State<SecondaryMenu> {
  @override
  Widget build(BuildContext context) {
    return CustomPopup(
      dx: 30,
      dy: 38,
      child: SecondaryMenuIconWidget(),
      popup: SecondaryMenuPopupWidget(),
    );
  }
}

When testing, the menu works, but I can't get the widget (which shows Settings and Log Out) to be fully right aligned (see screenshot with full width).

If I change the dx to any negative values, it does move as expected closer to the left and similarly, any changes to dy does move it farther down the screen. However any positive dx values don't seem to impact the location. If I increase the width of my widget or the size of canvas, the issue still exists as well. From what I can tell, there is some sort of padding when I hover over the empty space between my popup window and the right side, which you can slightly see in the screenshot.

[thruthesky]

Hi, @phranklins As I tested, and it works as expected.
I cannot see any problem.
Can you give me more details?
I need the code on the SecondaryMenuXxxWidget ? And where do you want to place your popup from the child widget?

[phranklins]

I want it flush with the right hand side of the screen similar to how the kabob/vertical ellipsis works in the Chrome Browser window.

This is the code for the SecondaryMenuIconWidget

Container(
  decoration: BoxDecoration(),
  child: Align(
    alignment: AlignmentDirectional(0, 0),
    child: FaIcon(
      FontAwesomeIcons.ellipsisV,
      color: FlutterFlowTheme.of(context).primaryText,
      size: 24,
    ),
  ),
)

And the code for SecondaryMenuPopupWidget is:

Container(
  width: 180,
  decoration: BoxDecoration(
    color: FlutterFlowTheme.of(context).secondaryBackground,
  ),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.end,
    children: [
      InkWell(
        onTap: () async {
          context.pushNamed('Settings');
        },
        child: ListTile(
          leading: FaIcon(
            FontAwesomeIcons.cog,
            color: FlutterFlowTheme.of(context).primaryText,
          ),
          title: Text(
            FFLocalizations.of(context).getText(
              'zfl79pgo' /* Settings */,
            ),
            style: FlutterFlowTheme.of(context).bodyText1,
          ),
          tileColor: Color(0xFFF5F5F5),
          dense: false,
        ),
      ),
      InkWell(
        onTap: () async {
          GoRouter.of(context).prepareAuthEvent();
          await signOut();
          context.goNamedAuth('Login', mounted);
        },
        child: ListTile(
          leading: Icon(
            Icons.exit_to_app_rounded,
            color: FlutterFlowTheme.of(context).primaryText,
          ),
          title: Text(
            FFLocalizations.of(context).getText(
              'ko6io0is' /* Log Out */,
            ),
            style: FlutterFlowTheme.of(context).bodyText1,
          ),
          tileColor: Color(0xFFF5F5F5),
          dense: false,
        ),
      ),
    ],
  ),
)

If it's helpful, the widget code in Flutterflow looks like this for the entire Appbar:

AppBar(
  backgroundColor: FlutterFlowTheme.of(context).secondaryBackground,
  iconTheme: IconThemeData(color: FlutterFlowTheme.of(context).primaryText),
  automaticallyImplyLeading: true,
  title: Text(
    chartProfilesRecord!.profileName!,
    style: FlutterFlowTheme.of(context).title1,
  ),
  actions: [
    Container(
      width: 40,
      height: 40,
      child: custom_widgets.SecondaryMenu(
        width: 40,
        height: 40,
      ),
    ),
  ],
  bottom: PreferredSize(
    preferredSize: Size.fromHeight(50),
    child: Container(
      width: double.infinity,
      decoration: BoxDecoration(
        color: FlutterFlowTheme.of(context).secondaryBackground,
      ),
      child: Align(
        alignment: AlignmentDirectional(0, 0),
        child: Padding(
          padding: EdgeInsetsDirectional.fromSTEB(16, 8, 16, 8),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Switch(
                value: switchValue ??= false,
                onChanged: (newValue) async {
                  setState(() => switchValue = newValue!);
                },
              ),
              Text(
                FFLocalizations.of(context).getText(
                  'ein729tz' /* Show Inactive */,
                ),
                style: FlutterFlowTheme.of(context).bodyText1.override(
                      fontFamily: 'Poppins',
                      color: FlutterFlowTheme.of(context).secondaryText,
                    ),
              ),
            ],
          ),
        ),
      ),
    ),
  ),
  centerTitle: false,
  elevation: 0,
)

[thruthesky]

Hi, @phranklins I was able to do something like this. What do you think?

I put dx: 0, dy: 32.

[thruthesky]

I see this now on web version.

[thruthesky]

Hi, @phranklins

I was able to fix. I believe you put the widget of the popup component. Can you make it as inf?

Don't the the widget manually. Just put it as inf.

Can you confirm it? so I can close this issue.

[phranklins]

Yes! that resolved the issue. I should have mentioned this was in web, but I did just notice that the supported platforms for your package don't include web. That was my miss since Flutterflow only supports packages with Web support. Thank you for all the help and digging into it!

[thruthesky]

Well, it supports web also :)
Have a good day.