This is the issue:
Website:
Mobile:
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
CodePudding user response：
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.
CodePudding user response：
In responsive.dart you set the maxWidth property to max 600. That is why the is showing not full screen. Hope that helps.