I want to show a AlertDialog in Flutter when I click on the FloatingActionButton. Therefore I have put the AlertDialog Widget in a separate Class. But when I click the Floating button, nothing happens. I import the file with the AlertDialog so this one should work. But what else do I miss?
As far as I understand, as soon as I create an instance of this class, the AlertButton shows up on the display.
The FloatingButton looks like this:
...
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
DisplayDesc(desc: 'Test description', grade: 'A++');
},
elevation: 10.0,
label: const Text('Show Description'),
icon: const Icon(Icons.description),
backgroundColor: Colors.blue[900],
foregroundColor: Colors.white,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
...
and the class with the AlertDialog looks like this:
import 'package:flutter/material.dart';
class DisplayDesc extends StatelessWidget {
//const DisplayDesc({Key? key}) : super(key: key);
final String desc;
final String grade;
DisplayDesc ({ required this.desc, required this.grade });
#override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(desc),
content: Text(grade),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'OK'),
child: const Text('OK'),
),
],
);
}
}
What do I miss?
Thanks
Chris
Change your FloatingActionButton's onPressed like so
onPressed: () => showDialog(
context: context,
builder: (context) => DisplayDesc(desc: 'Test description', grade: 'A++')
),
Related
The play button should toggle to a pause button when I press it. It is currently not doing that. I'm changing the state of the task isRecording attribute and it's printing to show that it is changing each time I press the button, but the selectedIcon is not showing. It's just showing the original icon.
class TestScreen extends StatefulWidget {
const TestScreen({super.key});
#override
State<TestScreen> createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
Task task = Task(name: 'Test Task', order: 0, isRecording: false);
#override
Widget build(BuildContext context) {
print(task.isRecording);
return Scaffold(
appBar: AppBar(
title: const Text('Test Screen'),
),
body: Center(
child: IconButton(
icon: const Icon(Icons.play_arrow),
isSelected: task.isRecording,
selectedIcon: const Icon(Icons.pause),
onPressed: () {
setState(() {
task.isRecording = !task.isRecording;
});
},
),
),
);
}
}
The selectedIcon feature is only available for Material3.
This property is only used if [ThemeData.useMaterial3] is true.
Solution:
Wrap the IconButton in a Theme and set inside the data the useMaterial3 to true.
return Scaffold(
appBar: AppBar(
title: const Text("Test Screen"),
),
body: Center(
child: Theme(
data: ThemeData(useMaterial3: true),
child: IconButton(
icon: Icon(Icons.play_arrow),
isSelected: !task.isRecording,
selectedIcon: Icon(Icons.pause),
onPressed: () {
setState(() {
task.isRecording = !task.isRecording;
});
},
),
),
),
);
Your IconButton should look like this
IconButton(
icon: task.isRecording ? Icon(Icons.play_arrow) : Icon(Icons.pause),
isSelected: task.isRecording,
selectedIcon: const Icon(Icons.pause),
onPressed: () {
setState(() {
task.isRecording = !task.isRecording;
});
},
),
The catch is that you have to change the icon every time you are setting the state.
Hope this helps!
I have been following the yt video on creating the navigation map button but I don't understand what did I do wrong on RaisedButton line (I put in stars infront and at the back)
import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
import 'package:avenique/pages/PlanningPaymentScreen.dart';
class RootApp extends StatelessWidget {
RootApp({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: () {
print("menu pressed");
},
icon: Icon(Icons.menu)),
title: Text("PlanningPage"),
actions: <Widget>[
IconButton(
onPressed: () {
print("search pressed");
},
icon: Icon(Icons.search)),
],
),
body: Center(
** child:RaisedButton( **
child: Text(
'Next Screen',
style: TextStyle(
color: Color.fromARGB(255, 255, 255, 255),
),
),
Color: Color.fromARGB(255, 0, 0, 0),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PlanningPaymentScreen()),
);
}),
),
);
}
}
I expected the code to run smoothly. Thankyou for the help!
Since RaisedButton is deprecated. try using " ElevatedButton " and you will find a function inside then you can push.
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
}
Below is the screenshot of the current situation/problem. I have a dialog that has a blurred background. I want to show a snackbar when the user clicks the "copy referral link" button. However, since I put a blurred background on the dialog, snackbar also remains behind the background.
What I want is to display the snackbar without blurring it when the user clicks the button. How can I achieve this result? The background should be blurred always but I just need to show the snackbar on top of that blurriness when the user clicks the button.
Here's the image url that shows the current problem
you can bring up the dialog by creating a custom one, like my code below
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isShow = false;
void _incrementCounter() {
setState(() {
isShow = !isShow;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Stack(
children: [
ConstrainedBox(
constraints: const BoxConstraints.expand(),
child: const FlutterLogo(),
),
isShow
? GestureDetector(
onTap: _incrementCounter,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.black38,
alignment: Alignment.center,
child: GestureDetector(
onTap: () {},
child: AlertDialog(
content: const Text("dsd"),
actions: [
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text('Awesome Snackbar!'),
action: SnackBarAction(
label: 'Action',
onPressed: () {
// Code to execute.
},
),
),
);
},
child: const Text("Show Snackbar"),
)
],
),
),
),
)
: const SizedBox()
],
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.notifications),
),
);
}
}
screenshot : https://i.stack.imgur.com/inX4I.png
I can't display the image due to lack of reputation points
ive basically got an rflutter alert that looks like this
Alert(
context: context,
title: "GAME OVER",
desc: "Youve got $correct/13, try again?",
buttons: [
DialogButton(
child: Text(
"COOL",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => restart(),
width: 120,
)
],
).show();
but when i click on the area outside of the alert, it closes the alert. how do i make it such that the alert wont close when clicked outside?
i tried using "barrierDismissible" but got an error. perhaps is it even possible to make the alert not close when using the rflutter_alert package?
thank you
(i just started learning flutter and the class used rflutter_alert thats why im using it, is there a "best" way to present alerts?)
add barrierDismissible: false in showdialog default is true
showDialog<String>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) => AlertDialog(
title: const Text('AlertDialog Title'),
content: const Text('AlertDialog description'),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'OK'),
child: const Text('OK'),
),
],
),
);
SampleCode
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: MyStatelessWidget(),
),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return TextButton(
onPressed: () => showDialog<String>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) => AlertDialog(
title: const Text('AlertDialog Title'),
content: const Text('AlertDialog description'),
actions: <Widget>[
TextButton(
onPressed: () => Navigator.pop(context, 'Cancel'),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, 'OK'),
child: const Text('OK'),
),
],
),
),
child: const Text('Show Dialog'),
);
}
}
Add this line to your code.
style: AlertStyle(isOverlayTapDismiss: false),
Full code then :
Alert(
context: context,
style: AlertStyle(isOverlayTapDismiss: false),
title: "GAME OVER",
desc: "Youve got $correct/13, try again?",
buttons: [
DialogButton(
child: Text(
"COOL",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => restart(),
width: 120,
)
],
).show();
After I clicked the button in the dialog, the content would change from a list of buttons into a form with textfields. However, I am frustrated in codes to achieve it.
You just need a stateful dialog and a bool state. Here is an example:
class MyDialog extends StatefulWidget {
const MyDialog({Key? key}) : super(key: key);
#override
MyDialogState createState() => MyDialogState();
}
class MyDialogState extends State<MyDialog> {
/// When this value is false, it shows list of buttons
/// When this value is true, it shows list of textfields
bool isForm = false;
#override
Widget build(BuildContext context) {
return AlertDialog(
title: const Text('AlertDialog Title'),
// Here, we conditionally change content
content: isForm
? Column(
children: [
TextFormField(),
TextFormField(),
TextFormField(),
TextFormField(),
],
)
: Column(
children: [
TextButton(onPressed: () {}, child: Text('Button')),
TextButton(onPressed: () {}, child: Text('Button')),
TextButton(onPressed: () {}, child: Text('Button')),
TextButton(onPressed: () {}, child: Text('Button')),
],
),
actions: [
TextButton(
// Here isForm is switched to change the content
onPressed: () => setState(() => isForm = !isForm),
child: const Text('Switch'),
),
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Cancel'),
),
TextButton(
onPressed: () => Navigator.pop(context, true),
child: const Text('OK'),
),
],
);
}
}
Use it with showDialog(context: context, builder: (context) => MyDialog())