How can I can make such toast dialog in flutter? (create service, create venue)
Interactive example:
https://files.fm/f/dw6qvmznc
You can use PopupMenuButton
PopupMenuButton<String>(
icon: const Icon(Icons.add_circle_outline_outlined),
color: Colors.grey, // background color
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: "create service",
onTap: () {},
child: const Center(
child: Text(
'create service',
),
),
),
PopupMenuItem<String>(
value: "create venue",
child: const Center(
child: Text(
'create venue',
),
),
onTap: () {},
),
],
)
Here's a neat package that takes care of that with different styles as well.
StarMenu(
onStateChanged: (state) {
print('State changed: $state');
},
params: StarMenuParameters(
shape: MenuShape.linear,
linearShapeParams: LinearShapeParams(
angle: 270,
space: 30,
alignment: LinearAlignment.center),
onItemTapped: (index, controller) {
// don't close if the item tapped is not the ListView
if (index != 1) controller.closeMenu();
}),
// lazyItemsLoad let you build menu entries at runtime
lazyItems: () async {
return [
Container(
color: Color.fromARGB(255, Random().nextInt(255),
Random().nextInt(255), Random().nextInt(255)),
width: 60,
height: 40,
),
Container(
width: 150, // CHANGE WIDTH
height: 200, // CHANGE HEIGHT
child: Card(
elevation: 6,
margin: EdgeInsets.all(6),
child: Column(
children: [
// ADD YOUR ACTIONS HERE
]
),
),
),
),
];
},
child: FloatingActionButton( // THIS WILL BE YOUR BUTTON YOU WANT TO SHOW THE MENU FROM
onPressed: () {
print('FloatingActionButton Menu1 tapped');
},
child: Icon(Icons.looks_one),
),
),
You can simple Dialog of CupertinoDailog...
onPress:(){
showCupertinoDialog(context: context,
builder: (context) {
return CupertinoAlertDialog(
content: Column(
children: [
Text("Option 1"),
Text("Option 1"),
Text("Option 1"),
],
),
);})
}
Related
I am a beginner with flutter, I had just started a few days ago. I want to go from one page to another page . But when I use the navigator it shows an error.
I've tried to solve it using some answers to similar problems on stack overflow, but I can't solve it. Also, I am not able to understand those properly.
These are some of them:
Undefined name 'context'
_buildDrawer() {
return ClipPath(
clipper: OvalRightBorderClipper(),
child: Drawer(
child: Container(
padding: const EdgeInsets.only(left: 16.0, right: 40),
decoration: BoxDecoration(
color: primary, boxShadow: [BoxShadow(color: Colors.black45)]),
width: 300,
child: SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerRight,
child: IconButton(
icon: Icon(
Icons.power_settings_new,
color: active,
),
onPressed: () {},
),
),
Container(
height: 90,
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient:
LinearGradient(colors: [Colors.pink, Colors.red])),
child: CircleAvatar(
radius: 40,
backgroundImage: NetworkImage(profile),
),
),
SizedBox(height: 5.0),
Text(
"Mohd Amin bin Yaakob",
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
Text(
"Pegawai",
style: TextStyle(color: active, fontSize: 16.0),
),
SizedBox(height: 30.0),
_buildRow(Icons.home, "Home", () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) {
return HomePageWidgetPage();
},
),
);
}),
_buildDivider(),
_buildRow(Icons.home, "Home", () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) {
return HomePageWidgetPage();
},
),
);
}),
_buildDivider(),
_buildRow(Icons.home, "Home", () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) {
return HomePageWidgetPage();
},
),
);
}),
_buildDivider(),
_buildRow(Icons.home, "Home", () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) {
return HomePageWidgetPage();
},
),
);
}),
_buildDivider(),
_buildRow(Icons.home, "Home", () {
Navigator.push(context,
MaterialPageRoute(
builder: (context) {
return HomePageWidgetPage();
},
),
);
}),
_buildDivider(),
],
),
),
),
),
),
);
}
Divider _buildDivider() {
return Divider(
color: active,
);
}
Widget _buildRow(IconData icon, String title, VoidCallback onTap) {
final TextStyle tStyle = TextStyle(color: active, fontSize: 16.0);
return InkWell(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
children: [
Icon(
icon,
color: active,
),
SizedBox(width: 10.0),
Text(
title,
style: tStyle,
),
],
),
),
onTap: onTap,
);
}
}
Undefined name 'context' in flutter navigation
You can pass the context like
_buildDrawer(BuildContext context){
And the place you call this method
_buildDrawer(context)
I have this menu on the floating button , but I could not align it correctly,
I want it to show directly above the floating button, this is how it looks in red box:
I want the pop up menu to be like this in red box , I tried to change offset number but did not work it just moves left and right
please help me find a solution I'm really struggling, I provided the code below please check it out
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: myPopMenu(context),
backgroundColor: Colors.white,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNav(
onChange: (a) {
Navigator.of(context).pushAndRemoveUntil(
MaterialPageRoute(
builder: (c) => AppPage(initialPage: a,)),
(route) => false);
},
),
);
}
Widget myPopMenu(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(
cardColor: Colors.white60,
),
child: PopupMenuButton(
offset: const Offset(-90, 100),
icon: Image.asset('assets/logo.png', fit: BoxFit.cover, height: 40),
onCanceled: () {
setState(() {
isClicked = false;
});
},
onSelected: (value) {
setState(() {
isClicked = false;
});
print('pop up clicked');
if (value == 0) {
alertRate();
} else if (value == 1){
alertServices();
}else if (value == 2) {
alertAdditonalInfo();
}else if (value == 3){
alertReport();
}
},
itemBuilder: (context) {
setState(() {
isClicked = true;
});
return [
PopupMenuItem(
child: Center(
child: Text(
'Rate & Review',
style: TextStyle(color: Colors.black),
),
),
value: 0,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Edit Available Services',
style: TextStyle(color: Colors.black),
),
),
value: 1,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Edit Social Accounts',
style: TextStyle(color: Colors.black),
),
),
value: 2,
),
PopupMenuItem(
height: 4,
child: Container(
height: 2,
color: Colors.black,
),
),
PopupMenuItem(
child: Center(
child: Text(
'Report an Issue',
style: TextStyle(color: Colors.black),
),
),
value: 3,
),
];
}),
);
}
You can use stack and positioned widget to place it at specific height above bottom nav bar like this
class Sample extends StatelessWidget {
const Sample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
Positioned(
bottom: 30,
child: Container(
color: Colors.grey,
width: 50,
height: 30,
child: Text('Hello'),
),
)
],
,
);
}
}
I am trying to dynamically add a card in a row in my app after pressing a button.
I tried different things but nothing seems to work properly, right now I reached this point:
cardList = [];
setState(() {
cardList.add(new DynamicCard());
});
}
This is the method that I call to add a new card and it is called in the following alertDialog:
return Alert(
context: context,
title: "Add activity",
content: Column(
children: <Widget>[
DropdownButton(
hint: Text('Select your activity'),
icon: Icon(Icons.arrow_drop_down),
value: selectedActivity,
onChanged: (value){
setState(() {
value = selectedActivity;
print(value);
});
},
//value: selectedActivity,
items: activityList.map((value) {
return DropdownMenuItem(
value: value,
child: Text(value));
}).toList()
),
TextField(
decoration: InputDecoration(
labelText: 'Where',
),
),
],
),
buttons: [
DialogButton(
onPressed: () {
addCard();
Navigator.pop(context);
},
child: Text(
"Add Activity",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
]).show();
This is the card I'd like to add after pressing on the button:
import 'package:flutter/material.dart';
import 'package:wildnature/widgets/sizeConfig.dart';
class DynamicCard extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SizedBox(
height: 250,
width: 350,
child: Card(
elevation: 6,
clipBehavior: Clip.antiAlias,
child: Column(
children: [
ListTile(
title: Text('Last Activity:'),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'Test123',
style:
TextStyle(fontSize: 5 * SizeConfig.blockSizeHorizontal),
)),
Container(
width: 200,
height: 160,
child: Image.asset('assets/camping.png', fit: BoxFit.fill),
)
],
),
),
);
}
}
Also, how can I render this widget in the exact place I want it to be?
Solution:
Created a new variable:
bool addWidget = false;
created a new widget:
Widget createActivityCard(String activy, String activityDesc){
return SizedBox(
height: 250,
width: 350,
child: Card(
elevation: 6,
clipBehavior: Clip.antiAlias,
child: Column(
children: [
ListTile(
title: Text(activy),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
activityDesc,
style:
TextStyle(fontSize: 5 * SizeConfig.blockSizeHorizontal),
)),
Container(
width: 200,
height: 160,
child: Image.asset('assets/camping.png', fit: BoxFit.fill),
)
],
),
),
);
}
Set the value of addWidget to 'true' when pressing on a button
Added a simple if statement where the condition is addWidget:
if(addWidget)
Container(
child: createActivityCard('Added by user', 'WE DID IT'))
```
I have made an alert dialog where user can update their profile details. In that with image container there is icon button widget. What I want is that when user clicks icon button, pop up menu will display with add/remove image option. Here is my code for alert dialog:
showDialog<void>(
builder: (BuildContext context) {
return AlertDialog(
title: Text('Update details'),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
content: StatefulBuilder(
builder: (context, setState) { return Container(
width: 400,
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Stack(
alignment: Alignment.center,
children: [
Container(
width: 100.0,
height: 100.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.darken),
image: data != null ? MemoryImage(data) : AssetImage("web/icons/contactsDefaultImage.png")
)
)
),
IconButton(icon: Icon(Icons.edit), onPressed: () async {
//display option here
_showPopupMenu();
})
]),
Container(
child: TextFormField(
decoration: InputDecoration(
labelText: 'name'
),
),
),
TextFormField(
decoration: InputDecoration(
labelText: 'email'
),
),
],
),
),
);},
),
actions: <Widget>[
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
),
FlatButton(child: Text('Save'),
onPressed: () {
// save
},
)
],
);
},
);
I tried to user showMenu for that. But as the position has to be hard-coded I don't was to use it.
what I tried:
void _showPopupMenu() async {
await showMenu(
context: context,
position: RelativeRect.fromLTRB(100, 100, 100, 100),
items: [
PopupMenuItem(
child: Text("add"),
),
PopupMenuItem(
child: Text("remove"),
),
],
elevation: 8.0,
);
}
Now, what i want to know is how can i display it where the icon-button is tapped (without hard-coding the value). And is there another way to do it .i.e without using showMenu.
You can write a method like this and call it on your icon button's onPressed
showPopupMenu(){
showMenu<String>(
context: context,
position: RelativeRect.fromLTRB(25.0, 25.0, 0.0, 0.0), //position where you want to show the menu on screen
items: [
PopupMenuItem<String>(
child: const Text('menu option 1'), value: '1'),
PopupMenuItem<String>(
child: const Text('menu option 2'), value: '2'),
PopupMenuItem<String>(
child: const Text('menu option 3'), value: '3'),
],
elevation: 8.0,
)
.then<void>((String itemSelected) {
if (itemSelected == null) return;
if(itemSelected == "1"){
//code here
}else if(itemSelected == "2"){
//code here
}else{
//code here
}
});
}
Edit: (to show menu at the position where user tapped)
We can have a method like so -
void showPopUpMenuAtTap(BuildContext context, TapDownDetails details) {
showMenu(
context: context,
position: RelativeRect.fromLTRB(
details.globalPosition.dx,
details.globalPosition.dy,
details.globalPosition.dx,
details.globalPosition.dy,
),
// other code as above
);
}
and use it with GestureDetector like so -
GestureDetector(
child: const Icon(Icons.menu),
onTapDown: (details) => showPopUpMenuAtPosition(context, details),
);
Solution if you wish to re-use your button and not a Gesture detector:
Create a key and assign your button the key. Then:
TextButton(
key: _accKey,
text: "Account",
onPressed: () {
final RenderBox renderBox =
_accKey.currentContext?.findRenderObject() as RenderBox;
final Size size = renderBox.size;
final Offset offset = renderBox.localToGlobal(Offset.zero);
showMenu(
context: context,
position: RelativeRect.fromLTRB(
offset.dx,
offset.dy + size.height,
offset.dx + size.width,
offset.dy + size.height),
items: [
PopupMenuItem<String>(
child: const Text('menu option 1'), value: '1'),
PopupMenuItem<String>(
child: const Text('menu option 2'), value: '2'),
PopupMenuItem<String>(
child: const Text('menu option 3'), value: '3'),
]);
}),
what you are looking to is showdialog and alertdialog.
Void<String> testdialog(BuildContext context) {
return showDialog(
barrierDismissible: false,
context: context,
builder: (context) {
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
title: ....
There are a lot of options you can choose:
You can use:
Banner
Card
Dialog
PopupMenuButton
Or even BottomSheet
I hope it will help
Hi so I'm trying to show alertDialog when you press the close icon on the card but if I tap the "Close" button, it didn't show the alertDialog for delete confirmation, on the other hand when I tap the "check" Icon on, it successfully show a snackbar.
here's my code for the page:
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'Schedule.dart';
class HomeView extends StatefulWidget {
HomeViewState createState() => HomeViewState();
}
class HomeViewState extends State<HomeView> {
final List<Schedule> scheduleList = [
Schedule("Hotel 1", DateTime.now(), DateTime.now(), "Germany"),
Schedule("Hotel 2", DateTime.now(), DateTime.now(), "France")
];
final Icon actionIcon = Icon(Icons.plus_one);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: actionIcon,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UnscheduledField()),
);
},
)
],
),
body: Container(
child: ListView.builder(
itemCount: scheduleList.length,
itemBuilder: (context, int index) => buildCard(context, index)),
));
}
}
Widget buildCard(BuildContext context, int index) {
final List<Schedule> scheduleList = [
Schedule("Hotel 1", DateTime.now(), DateTime.now(), "Germany"),
Schedule("Hotel 2", DateTime.now(), DateTime.now(), "France")
];
final schedule = scheduleList[index];
return Container(
child: GestureDetector(
onTap: () {
showBottomSheet(
context: context,
builder: (context) => Container(
height: 550,
color: Colors.lightBlue,
));
},
child: Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 4),
child: Row(
children: <Widget>[
Text(schedule.companyName,
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold)),
Spacer(),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 4, bottom: 4),
child: Row(
children: <Widget>[Text(schedule.location)],
),
),
Padding(
padding: const EdgeInsets.only(top: 4.0, bottom: 4),
child: Row(
children: <Widget>[
Text('check in at:'),
Text(
"${DateFormat('HH:mm').format(schedule.startTime).toString()}"),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 4.0, bottom: 4),
child: Row(children: <Widget>[
Text('check out at:'),
Text(
"${DateFormat('HH:mm').format(schedule.endTime).toString()}"),
]),
),
Row(
children: <Widget>[
Expanded(
child: SizedBox(
height: 40,
child: ListTile(
trailing: IconButton(
onPressed: () {
alert(context);
},
icon: Icon(
Icons.close,
),
color: Colors.red,
),
),
),
),
Expanded(
child: SizedBox(
height: 40,
child: ListTile(
trailing: IconButton(
onPressed: () {
final snackbar = SnackBar(
content: Text('Successfully added'),
duration: Duration(seconds: 2),
);
Scaffold.of(context).showSnackBar(snackbar);
},
icon: Icon(
Icons.check,
),
color: Colors.lightGreen[300],
),
),
),
),
],
),
]))),
));
}
void alert(BuildContext context) {
var alertDialog = AlertDialog(
title: Text("Confirmation"),
content: Text("Are you sure you want to delete this?"),
actions: <Widget>[
FlatButton(
child: Text("No"),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text("Yes"),
onPressed: () {
Navigator.of(context).pop();
})
],
);
showDialog(
context: context,
builder: (BuildContext context) {
return alertDialog;
});
}
Any help would be appreciated! thanks
your code is perfect but you have to define alert dialog before you call it,
So define Alert Dialog before you call it in OnPress method of button and Pass it to alert method
class HomeView extends StatefulWidget {
HomeViewState createState() => HomeViewState();
}
class HomeViewState extends State<HomeView> {
final List<Schedule> scheduleList = [
Schedule("Hotel 1", DateTime.now(), DateTime.now(), "Germany"),
Schedule("Hotel 2", DateTime.now(), DateTime.now(), "France")
];
final Icon actionIcon = Icon(Icons.plus_one);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Dashboard"),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: actionIcon,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => UnscheduledField()),
);
},
)
],
),
body: buildCard(context, 0),
body: Container(
child: ListView.builder(
itemCount: scheduleList.length,
itemBuilder: (context, int index) => buildCard(context, index)),
)
);
}
}
Widget buildCard(BuildContext context, int index) {
final List<Schedule> scheduleList = [
Schedule("Hotel 1", DateTime.now(), DateTime.now(), "Germany"),
Schedule("Hotel 2", DateTime.now(), DateTime.now(), "France")
];
final schedule = scheduleList[index];
return Container(
child: GestureDetector(
onTap: () {
showBottomSheet(
context: context,
builder: (context) => Container(
height: 550,
color: Colors.lightBlue,
));
},
child: Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8, bottom: 4),
child: Row(
children: <Widget>[
Text(schedule.companyName,
style: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold)),
Spacer(),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 4, bottom: 4),
child: Row(
children: <Widget>[Text(schedule.location)],
),
),
Padding(
padding: const EdgeInsets.only(top: 4.0, bottom: 4),
child: Row(
children: <Widget>[
Text('check in at:'),
Text(
"${DateFormat('HH:mm').format(schedule.startTime).toString()}"),
],
),
),
Padding(
padding: const EdgeInsets.only(top: 4.0, bottom: 4),
child: Row(children: <Widget>[
Text('check out at:'),
Text(
"${DateFormat('HH:mm').format(schedule.endTime).toString()}"),
]),
),
Row(
children: <Widget>[
Expanded(
child: SizedBox(
height: 40,
child: ListTile(
trailing: IconButton(
onPressed: () {
var alertDialog = AlertDialog(
title: Text("Confirmation"),
content:
Text("Are you sure you want to delete this?"),
actions: <Widget>[
FlatButton(
child: Text("No"),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text("Yes"),
onPressed: () {
Navigator.of(context).pop();
})
],
);
alert(context, alertDialog);
},
icon: Icon(
Icons.close,
),
color: Colors.red,
),
title: Text("hello"),
),
),
),
Expanded(
child: SizedBox(
height: 40,
child: ListTile(
trailing: IconButton(
onPressed: () {
final snackbar = SnackBar(
content: Text('Successfully added'),
duration: Duration(seconds: 2),
);
Scaffold.of(context).showSnackBar(snackbar);
},
icon: Icon(
Icons.check,
),
color: Colors.lightGreen[300],
),
),
),
),
],
),
]))),
));
}
void alert(BuildContext context, AlertDialog alertDialog) {
showDialog(
context: context,
builder: (BuildContext context) {
return alertDialog;
});
}