Question 78112 in Flutter Question posted in
The official Flutter documentation can be found here.

how to adjust the width from a show menu widget? – Flutter

This is the issue:

Website:

enter image description here

Mobile:

enter image description here

As you can see, the web app doesn’t have the same width as the mobile app, how can I adjust the width from the web app to be accurate from the same show menu design as the mobile app?

This is mi code

responsive.dart

import 'package:flutter/material.dart';

class ResponsiveWeb extends StatelessWidget {
  final Widget child;
  const ResponsiveWeb({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConstrainedBox(
        constraints:  BoxConstraints(maxWidth: 600,),
              child: child,

      ),
    );
    
  }
}

appbar.dart


@override
  Widget build(BuildContext context) {
    return ResponsiveWeb(
      child: SafeArea(
        child: Scaffold(
            appBar: AppBar(
              backgroundColor: Color.fromARGB(255, 255, 202, 55),
              title: ResponsiveWeb(
                child: Row(
                  textDirection: TextDirection.ltr,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Container(
                      padding: const EdgeInsets.only(left: 8, right: 0),
                      child: Row(
                        children: [
                          const Icon(
                            FontAwesomeIcons.checkDouble,
                            size: 24,
                            color: const Color(0xff3B3B3B),
                          ),
                          Text.rich(
                            TextSpan(
                              text: ' pomo',
                              style: GoogleFonts.nunito(
                                  fontSize: 24,
                                  color: const Color(0xff3B3B3B),
                                  fontWeight: FontWeight.w700),
                              children: <TextSpan>[
                                TextSpan(
                                  text: 'work',
                                  style: GoogleFonts.nunito(
                                      fontSize: 24,
                                      color: const Color(0xff3B3B3B),
                                      decoration: TextDecoration.underline,
                                      decorationThickness: 3,
                                      fontWeight: FontWeight.w700),
                                ),
                                TextSpan(
                                  text: 'o.com',
                                  style: GoogleFonts.nunito(
                                      fontSize: 24,
                                      color: const Color(0xff3B3B3B),
                                      fontWeight: FontWeight.w700),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      padding: const EdgeInsets.only(left: 8, right: 0),
                      child: Row(
                        children: [
                          Tooltip(
                            message: 'Settings',
                            child: Semantics(
                              label: 'Pomodoro timer settings',
                              enabled: true,
                              readOnly: true,
                              child: IconButton(
                                icon: const Icon(
                                  Icons.settings_outlined,
                                  color: Color(0xff3B3B3B),
                                  size: 24,
                                  semanticLabel: 'Pomodoro timer Settings',
                                ),
                                onPressed: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) =>
                                            SettingsUIPomodoro()),
                                  );
                                },
                              ),
                            ),
                          ),
                          Tooltip(
                            message: 'Profile',
                            child: Semantics(
                              label: 'Pomodoro timer Profile',
                              enabled: true,
                              readOnly: true,
                              child: IconButton(
                                icon: const Icon(
                                  Icons.account_circle_outlined,
                                  color: Color(0xff3B3B3B),
                                  size: 24,
                                  semanticLabel: 'Pomodoro timer Profile',
                                ),
                                onPressed: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => Profile()),
                                  );
                                },
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                  ],
                ),
          
           
              ),
              actions: [
          IconButton(
            onPressed: () {
              showMenu(
                  context: context,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  position: const RelativeRect.fromLTRB(1, 80, 0, 0),
                  items: [
                    PopupMenuItem(
                      child: ResponsiveWeb(
                        child: ListTile(
                          title: Text(
                            'Analytics',
                            style: GoogleFonts.nunito(
                              color: const Color(0xff3B3B3B),
                              fontSize: 16.0,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          trailing: Icon(
                            Icons.show_chart_outlined,
                            color: Color(0xff3B3B3B),
                            size: 20,
                            semanticLabel: 'Pomodoro timer Analytics',
                          ),
                          contentPadding: EdgeInsets.zero,
                          onTap: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => Text('Analytics')),
                            );
                          },
                        ),
                      ),
                    ),
                    PopupMenuItem(
                      child: ListTile(
                        title: Text(
                          'Daily goals',
                          style: GoogleFonts.nunito(
                            color: const Color(0xff3B3B3B),
                            fontSize: 16.0,
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        trailing: Icon(
                          Icons.military_tech_outlined,
                          color: Color(0xff3B3B3B),
                          size: 20,
                          semanticLabel: 'Pomodoro timer Daily goals',
                        ),
                        contentPadding: EdgeInsets.zero,
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => Text('Daily goals')),
                          );
                        },
                      ),
                    ),
                  ]);
            },
            icon: Tooltip(
              message: 'More',
              child: Semantics(
                label: 'Pomodoro timer More',
                enabled: true,
                readOnly: true,
                child: const Icon(
                  Icons.more_vert_outlined,
                  color: Color(0xff3B3B3B),
                  size: 24,
                  semanticLabel: 'Pomodoro timer More',
                ),
              ),
            ),
          ),
        ],

I tried to wrap the show menu widget inside the responsive web widget, but it throws me an error, how can I fix the width from the web app and looks like the mobile app width?

Thanks for any help you can provide

Tags:

2

Answers


  1. 0

    In responsive.dart you set the maxWidth property to max 600. That is why the is showing not full screen. Hope that helps.

    Login or Signup to reply.
  2. 0

    You can use GestureDetector to get global position, and then use it on showMenu‘s position. create a variable on top(inside build for statelesswidget but for stateful on state class). and then

    GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTapDown: (details) {
    tapOffset = details.globalPosition;
    print(tapOffset);
  },
  child: IconButton(
    onPressed: () {
      showMenu(
          position: RelativeRect.fromLTRB(
            tapOffset!.dx - 150, // assuming popUp width, can be controll by bottom `constraints` providing same width on min and max
            64,
            tapOffset?.dx ?? 0,
            0,
          ),
          constraints: BoxConstraints(
            maxWidth: 600,
          ),
          context: context,
          shape: RoundedRectangleBorder(

    A better solution will be calculating renderBox size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search