PopupMenuButton not showing in Flutter - flutter

I don't know what it's wrong with my code, PopupMenuButton it's not working,
I have run the flutter update, yet, it seems not to be working.
Below is my code
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:oga_bliss/screen/add_prop_page.dart';
import '../widget/notice_me.dart';
import '../widget/property_app_bar.dart';
import '../widget/property_tile_widget.dart';
enum SampleItem { itemOne, itemTwo, itemThree }
class ProductPropertyPage extends StatefulWidget {
const ProductPropertyPage({Key? key}) : super(key: key);
#override
State<ProductPropertyPage> createState() => _ProductPropertyPageState();
}
class _ProductPropertyPageState extends State<ProductPropertyPage> {
final GlobalKey _menuKey = GlobalKey();
SampleItem? selectedMenu;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
const PropertyAppBar(title: 'Property'),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
NoticeMe(
title: 'Oops!',
desc: 'Your bank account is not yet verify!',
icon: Icons.warning,
icon_color: Colors.red,
border_color: Colors.red,
btnTitle: 'Verify Now',
btnColor: Colors.blue,
onTap: () {},
),
PropertyTileWidget(
props_image_name:
'https://ogabliss.com/project_dir/property/45164d94bc96f243362af5468841cd44.jpg',
props_name: 'Newly Built 3 Bedroom flat',
props_desc:
'this newly built bedroom flat its covered with the latest and later type of euqipment that will keep your day going well',
props_price: '90000000000000',
props_type: 'Buy',
props_bedroom: '100',
props_bathroom: '290',
props_toilet: '100',
onTap: () {
_popUpBUtton();
},
),
PropertyTileWidget(
props_image_name:
'https://ogabliss.com/project_dir/property/45164d94bc96f243362af5468841cd44.jpg',
props_name: 'Newly Built 3 Bedroom flat',
props_desc:
'this newly built bedroom flat its covered with the latest and later type of euqipment that will keep your day going well',
props_price: '90000000000000',
props_type: 'Rent',
props_bedroom: '100',
props_bathroom: '290',
props_toilet: '100',
onTap: () {
_popUpBUtton();
},
),
],
),
),
)
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Get.to(
() => AddPropertyPage(),
transition: Transition.upToDown,
);
},
child: const Icon(Icons.add),
),
);
}
Widget _popUpBUtton() => PopupMenuButton<String>(
enabled: true,
itemBuilder: (context) {
return [
const PopupMenuItem(
child: Text('Submit'),
value: "One",
),
const PopupMenuItem(
child: Text('Edit'),
value: "Two",
),
const PopupMenuItem(
child: Text('Delete'),
value: "Three",
),
];
},
);
}

You can't open any widget by tapping another widget ... instead of trying this
#override
Widget build(BuildContext context) {
return Column(
children: [
_popUpBUtton(),
]); }
Widget _popUpBUtton() => PopupMenuButton<String>(
child: PropertyTileWidget(
props_image_name:
'https://ogabliss.com/project_dir/property/45164d94bc96f243362af5468841cd44.jpg',
props_name: 'Newly Built 3 Bedroom flat',
props_desc:
'this newly built bedroom flat its covered with the latest and later type of euqipment that will keep your day going well',
props_price: '90000000000000',
props_type: 'Buy',
props_bedroom: '100',
props_bathroom: '290',
props_toilet: '100',
),
itemBuilder: (context) {
return [
const PopupMenuItem(
value: "One",
child: Text('Submit'),
),
const PopupMenuItem(
value: "Two",
child: Text('Edit'),
),
const PopupMenuItem(
value: "Three",
child: Text('Delete'),
),
];
},
);
}

Related

Combining Providers Riverpod

i'm trying to learn Riverpod and i use this example below to combine two providers, but the value of the dropDownButton never change and stay as the first value of the first dropDownItem , i changed the ConsumerWidget to ConsumerStatefulWidget also and nothing change, if there any help please.
final cityProvider = StateProvider<String>((ref) => 'Country one');
final weatherProvider = StateProvider((ref) {
final city = ref.watch(cityProvider);
return city == 'Country one'
? '25'
: city == 'Country two'
? '30'
: '50';
});
class ExampleSeven extends StatelessWidget {
const ExampleSeven({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Combining Providers with Firebase'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const SecondScreen(),
));
},
child: const Text('Go to next Page')),
),
);
}
}
class SecondScreen extends ConsumerWidget {
const SecondScreen({super.key});
#override
Widget build(BuildContext context, ref) {
String? city = ref.watch(cityProvider);
final weather = ref.watch(weatherProvider);
return Scaffold(
appBar: AppBar(
title: const Text('Combining Providers Second Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButton(
value: city,
items: const [
DropdownMenuItem(
value: 'Country one',
child: Text('Country one'),
),
DropdownMenuItem(
value: 'Country two',
child: Text('Country two'),
),
DropdownMenuItem(
value: 'Country three',
child: Text('Country three'),
),
],
onChanged: (value) {
city = value;
},
),
Text(
weather,
style: const TextStyle(fontSize: 40),
),
],
),
));
}
}
may i need to change the first Class or need to use listen instead of read ?
You're not updating the value of the provider correctly. Change you onChanged method to
onChanged: (value) {
ref.read(cityProvider.notifier).state = value!;
},

Display Widget onPressed button Flutter

My goal is to display certain widgets based on clicks in a menu.
What I need when I click a title, is to shows a certain widget.
Here is the full code:
class SideMenu extends StatelessWidget {
const SideMenu({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
child: SingleChildScrollView(
// it enables scrolling
child: Column(
children: [
DrawerHeader(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
height: defaultPadding * 3,
),
Image.asset(
"assets/logo/logo_icon.png",
scale: 5,
),
SizedBox(
height: defaultPadding,
),
Text("Récolt"),
],
)),
DrawerListTile(
title: "Tableau de bord",
svgSrc: "assets/icons/menu_dashbord.svg",
press: () {},
),
DrawerListTile(
title: "Utilisateurs",
svgSrc: "assets/icons/menu_profile.svg",
press: () {},
),
DrawerListTile(
title: "Collaborateurs",
svgSrc: "assets/icons/menu_doc.svg",
press: () {},
),
DrawerListTile(
title: "Producteurs",
svgSrc: "assets/icons/menu_store.svg",
press: () {},
),
DrawerListTile(
title: "Paramètres",
svgSrc: "assets/icons/menu_setting.svg",
press: () {},
),
],
),
),
);
}
}
I've got a extern page for display my widget like this :
SizedBox(height: defaultPadding),
ListUserEntreprise(),
SizedBox(height: defaultPadding),
ListUserCollab(),
I don't know how to do it, I tried with using a boolean in onPressed but it didn't work, I don't know really how to declare it and use it with an external page. Can someone help me, please?
use StatefulWidget and try with a boolean with the onPressed, setState() to update UI
Example:
import 'package:flutter/material.dart';
class SideMenu extends StatefulWidget {
const SideMenu({
Key? key,
}) : super(key: key);
#override
State<SideMenu> createState() => _SideMenuState();
}
class _SideMenuState extends State<SideMenu> {
bool _isShow = false;
#override
Widget build(BuildContext context) {
return Drawer(
child: SingleChildScrollView(
// it enables scrolling
child: Column(
children: [
DrawerListTile(
title: "Tableau de bord",
svgSrc: "assets/icons/menu_dashbord.svg",
press: () {
setState(() {
_isShow = !_isShow;
});
},
),
Visibility(
visible: _isShow,
child: Container(
child: Text('Tableau de bord'),
))
],
),
),
);
}
}

Flutter: how to use DropDownButton?

i'm trying to build a DropdownButton widget of multiple elements, but I'm miserably failing even if I read multiple tutorials on the Internet.
How can I go about creating a simple DropdownButton of 4 elements ?
Thanks for your time
Here's what I tried:
import 'package:flutter/material.dart';
class ForgotPassScreen extends StatefulWidget {
#override
_ForgotPassScreenState createState() => _ForgotPassScreenState();
}
class _ForgotPassScreenState extends State<ForgotPassScreen> {
int _value = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dropdown Button"),
),
body: Container(
padding: EdgeInsets.all(20.0),
child: DropdownButton(
value: _value,
items: [
DropdownMenuItem(
child: Text("Item 0"),
value: 0,
),
DropdownMenuItem(
child: Text("First Item"),
value: 1,
),
DropdownMenuItem(
child: Text("Second Item"),
value: 2,
),
DropdownMenuItem(
child: Text("Third Item"),
value: 3,
),
DropdownMenuItem(
child: Text("Fourth Item"),
value: 4,
)
],
onChanged: (value) {
setState(() {
_value = value;
});
}),
));
}
}
So this code has basically 3 parts to it. First is the object which stores the icon and the title. The second is the list of these objects, you can have as many as you want. And third is the button itself which constructs the boxes
OBJECT
class Choice {
const Choice({this.title, this.icon});
final String title;
final IconData icon;
}
LIST
List<Choice> choices = <Choice>[
const Choice(title: 'Profile', icon: Icons.account_circle),
const Choice(title:"Log in", icon: Icons.exit_to_app),
]
POPUP BUTTON
PopupMenuButton<Choice>(
color:Colors.white,
onSelected: onItemMenuPress,
itemBuilder: (BuildContext context) {
return choices.map((Choice choice) {
return PopupMenuItem<Choice>(
value: choice,
child: Row(
children: <Widget>[
Icon(
choice.icon,
color:Colors.black
),
Container(
width: 10.0,
),
Text(
choice.title,
style: TextStyle(),
),
],
));
}).toList();
},
)
This is the best way to create the button as you can modify it without having to change every single piece of code

How to show bottomnavigation bar in all pages in flutter

I am creating an app which has bottomnavigation bar.In that bottomnavigation bar it has 5 items names namely profile,aboutus,home,notifications and cart. Each item names has its own page. Now question is i add a button in homepage and if i click on the button it goes to the new page but it doesn't show the bottomnavigation bar.How do i show the bottomnavigation bar in the new page and also the selected current index. Below is the dart code
Mainpage.dart
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
int _currentIndex = 0;
final tabs = [
Profile(),
AboutUs(),
Home(),
Notifications(),
CartPage(),
];
#override
void initState() {
super.initState();
_currentIndex = 2;
}
#override
Widget build(BuildContext context) {
return Consumer<Cart>(
builder: (context, cart, child) {
return PlatformScaffold(
body: tabs[_currentIndex],
bottomNavBar: PlatformNavBar(
android: (_) => MaterialNavBarData(
type: BottomNavigationBarType.fixed,
),
ios: (_) => CupertinoTabBarData(),
currentIndex: _currentIndex,
itemChanged: (index) => setState(
() {
_currentIndex = index;
},
),
items: [
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.person),
android: (_) => Icon(Icons.person),
),
title: Text('Profile'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.info),
android: (_) => Icon(Icons.info),
),
title: Text('About Us'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.home),
android: (_) => Icon(Icons.home),
),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => new Image.asset(
"assets/notification.png",
height: 21.0,
color: Colors.grey[600],
),
android: (_) => Icon(Icons.notifications),
),
title: Text(
'Notifications',
style: TextStyle(fontSize: 12.0),
),
),
BottomNavigationBarItem(
icon: PlatformWidget(
ios: (_) => Icon(CupertinoIcons.shopping_cart),
android: (_) => Stack(
children: <Widget>[
Icon(Icons.shopping_cart),
cart.count == 0 ? new Container(height: 0, width: 0,)
: new Positioned(
right: 0,
child: new Container(
padding: EdgeInsets.all(1),
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(6),
),
constraints: BoxConstraints(
minWidth: 12,
minHeight: 12,
),
child: new Text(
'${cart.count}',
style: new TextStyle(
color: Colors.white,
fontSize: 8,
),
textAlign: TextAlign.center,
),
),
)
],
),
),
title: Text('Cart'),
),
],
),
);
},
);
}
}
Homepage.dart
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
onPressed: (){
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => NewPage()));
},
child: Text('New Page'),
),
),
);
}
}
Newpage.dart
class NewPage extends StatefulWidget {
#override
_NewPageState createState() => _NewPageState();
}
class _NewPageState extends State<NewPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
),
);
}
}
I use this method to add a widget which is common to all pages:
MaterialApp(
title: 'Flutter Demo',
initialRoute:"/home",
routes: [
...
],
builder: (context, child) {
return Stack(
children: [
child!,
Overlay(
initialEntries: [
OverlayEntry(
builder: (context) {
return YourCustomWidget(); *//This widget now appears on all pages*
},
),
],
),
],
);
},
);
You can have a Scaffold as a parent of all these pages, and have a BottomNavigationBar on the Scaffold, and a PageView as the body of the Scaffold:
Scaffold(
body: PageView(
controller: MyController(),
children: [
MyPage1(),
MyPage2(),
//...
],
onPageChanged: myOnPageChanged,
),
bottomNavigationBar: MyNavBar(),
)

How to use onTap or onPressed in PopupMenuItem

How can we implement use of onTap or onPressed in PopupMenuItem
Here is my code:
actions: <Widget>[
PopupMenuButton(
icon: Icon(Icons.settings),
itemBuilder: (context) => [
PopupMenuItem(
child: Text("Settings"),
),
PopupMenuItem(
child: Text("Flutter.io"),
),
PopupMenuItem(
child: Text("Google.com"),
),
],
),
]
I want to navigate to SettingPage() on tapping or clicking Settings PopupMenuItem.
I am getting this error even after following a solution mentioned below and even after importing dart:js
Error: Not found: 'dart:js'
import 'dart:js';
Here are my dependencies:
import 'package:bfdi_app/Profile/editProfile.dart';
import 'package:bfdi_app/models/user.dart';
import 'package:bfdi_app/services/collection.dart';
import 'package:bfdi_app/settings.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'dart:js';
Just add this to your PopupMenuButton:
onSelected: (result) {
if (result == 0) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SettingPage()),
);
}
},
And change your setting button to:
PopupMenuItem(
child: Text("Settings"),
value: 0,
),
There is a property called onSelected, you should use it, it handles onTap event.
PopupMenuButton(
icon: Icon(Icons.settings),
onSelected: (newValue) { // add this property
setState(() {
_value = newValue; // it gives the value which is selected
});
},
itemBuilder: (context) => [
PopupMenuItem(
child: Text("Settings"),
value: 0,
),
PopupMenuItem(
child: Text("Flutter.io"),
value: 1,
),
PopupMenuItem(
child: Text("Google.com"),
value: 2,
),
],
)
I faced similar issues while navigating the screen using pop up menu button and I solve the issues by putting this method inside the onTap callback of PopupMenuItem:
onTap: (){
WidgetsBinding.instance!.addPostFrameCallback((_) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return ScreenName();
},
),
);
});
}
There is now an onTap() for PopupMenuItem.
PopupMenuButton(
itemBuilder: (context) => [
PopupMenuItem(
child: Text("tap me"),
onTap: () => print("TAP"),
)
],
),
-Edited based on comment-
That's it :
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var items = [{'name':'Settings','value':0}, {'name':'Flutter.io','value':1}, {'name':'Google.com',,'value':2}];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: PopupMenuButton(
onSelected: (x) {
if(x==0){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SettingPage()), );}
},
icon: Icon(Icons.settings),
itemBuilder: (context) => items
.map<PopupMenuItem>((element) => PopupMenuItem(
child: Text(element['name]),
value: element['value'],
))
.toList()),
));
}
}
Callable value.
PopupMenuButton(
icon: Icon(Icons.settings),
onSelected: (value) {
value();
},
itemBuilder: (context) => [
PopupMenuItem(
child: Text('Settings'),
value: () {
debugPrint('open Settings');
},
),
PopupMenuItem(
child: Text('Flutter.io'),
value: () {
debugPrint('goto Flutter.io');
},
),
],
)
Use inheritance when showing popup with showMenu(...)
class PopupItem<T> extends PopupMenuItem<T> {
final Function() onTap;
PopupItem({this.onTap, Widget child, Key key})
: super(child: child, key: key);
#override
_PopupItemState<T> createState() => _PopupItemState<T>();
}
class _PopupItemState<T> extends PopupMenuItemState<T, PopupItem<T>> {
#override
void handleTap() {
widget.onTap?.call();
super.handleTap();
}
}
Usage:
Widget _itemDelete() => PopupItem(
onTap: () {
// Handle tap here
},
child: Text(...)
);
onTap: (){
WidgetsBinding.instance!.addPostFrameCallback((_) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context)=>Page())):
},
),
);
});
}
PopupMenuButton (
padding: EdgeInsets.zero,
icon:const Icon(Icons.keyboard_arrow_down_outlined,color: Color.fromRGBO(34, 178, 232, 1)),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15.0))
),
onSelected: (x){
if (x=="Edit User") {
Get.to(EditUserPage());
}
else if(x=="Login History"){
Get.to(EditUserPage());
}
else if(x=="Change Password"){
Get.to(EditUserPage());
}
else if(x=="Deactivate User"){
Get.to(EditUserPage());
}
},
itemBuilder: (BuildContext context) => <PopupMenuEntry >[
PopupMenuItem (
onTap: (){},
value:"Edit User",
child: Row(
children: [
svgWedget(url:"assets/svg/edit.svg"),
SizedBox(width: 10,),
Text("Edit User"),
],
),
),
PopupMenuItem (
onTap: ( )async{},
value:"Login History",
child: Row(
children: [
svgWedget(url:"assets/svg/calendar.svg"),
SizedBox(width: 10,),
Text("Login History"),
],
),
),
PopupMenuItem (
onTap: ()async{},
value:"Change Password",
child: Row(
children: [
SvgPicture.asset("assets/svg/lock.svg",color: Color.fromRGBO(195, 172, 255, 1),),
SizedBox(width: 10,),
Text("Change Password"),
],
),
),
PopupMenuItem (
onTap: ()async{},
value:"Deactivate User",
child: Row(
children: [
svgWedget(url:"assets/svg/trash.svg"),
SizedBox(width: 10,),
Text("Deactivate User"),
],
),
),
]
),