How to use back option in flutter programmatically - flutter

I am calling a method and trying to go back after the transections is done. But the code doesn't work. Here is what I am trying,
onPressed: (){
_updateResult(context);
},
void _updateResult(BuildContext context) async{
// some api calls and checks goes here
Navigator.of(context).pop();
}
This is how I visit to a page
Navigator.push(context, SlideLeftRoute(page: EnterResult(item)));
I have a custom class SlideLeftRoute
class SlideLeftRoute extends PageRouteBuilder {
final Widget page;
SlideLeftRoute({this.page})
: super(
pageBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) =>
page,
transitionsBuilder: (
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child,
) =>
SlideTransition(
position: Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(animation),
child: child,
),
);
}
THE PROBLEM CODE
I have found which code creates problems. Here I was calling another method for showing dialogue. if I comment the code it works
void _showMsg(msg) {
// flutter defined function
showDialog(
context: context,
builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
backgroundColor: Colors.grey[800],
content: new Text(msg,
style: TextStyle(
color: Colors.white,
fontSize: 14.0,
decoration: TextDecoration.none,
fontFamily: 'Lato',
fontWeight: FontWeight.normal,
),
),
//content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
So here after the api call is done, it should go to the back screen but nothing happening.
Thank you.

The problem is because when you call Navigator.of(context).pop(); from the action of an alert AlertDialog, it will pop the presented dialog. You have to pop your screen again. For that you can use future returning by showDialog method.
That is change your _showMsg method like following.
Note the then(..)... on showDialog
void _showMsg(msg) async {
// flutter defined function
await showDialog(
context: context,
builder: (BuildContext localContext) {
// return object of type Dialog
return AlertDialog(
backgroundColor: Colors.grey[800],
content: new Text(
msg,
style: TextStyle(
color: Colors.white,
fontSize: 14.0,
decoration: TextDecoration.none,
fontFamily: 'Lato',
fontWeight: FontWeight.normal,
),
),
//content: new Text("Alert Dialog body"),
actions: <Widget>[
// usually buttons at the bottom of the dialog
new FlatButton(
child: new Text("Close"),
onPressed: () async {
print("poping");
Navigator.of(context).pop();
},
),
],
);
},
).then((value) {
print("poping from screen");
Navigator.of(context).pop();
});
}

Related

Flutter speech to text like native Dialog

Hello any flutter experts is here who can help solving little issue i want implement flutter voice recognition. flutter speech_to_text: ^5.4.3. plugin which is work fine but problem is that i want implement like native voice recognition on top bar when user click on mic button its appears alert dialog showing in picture below and when user speak its shows text like image below anyone know about here is picture click on it
I also used custom dialog builder for this purpose but my text is not update in dialog text check code below
import 'dart:math';
import 'package:bibleapp/Dbhelper.dart';
import 'package:bibleapp/chapters.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:speech_to_text/speech_recognition_result.dart';
import 'package:speech_to_text/speech_to_text.dart' as stt;
import 'package:speech_to_text/speech_to_text.dart';
import 'package:avatar_glow/avatar_glow.dart';
class Booknames extends StatefulWidget {
const Booknames({Key? key}) : super(key: key);
#override
_BooknamesState createState() => _BooknamesState();
}
class _BooknamesState extends State<Booknames> {
var booknames=['Genesis','Exodus','Leviticus','Numbers',
'Deuteronomy','Joshua',
'Judges','Ruth','1 Samuel','2 Samuel','1 Kings','2 Kings',
'1 Chronicles','2 Chronicles','Ezra','Nehemiah','Esther',
'Job','Psalms','Proverbs','Ecclesiastes','Song of Solomon','Isaiah','Jeremiah',
'Lamentations','Ezekiel','Daniel','Hosea','Joel','Amos','Obadiah','Jonah','Micah',
'Nahum','Habakkuk','Zephaniah','Haggai','Zechariah','Malachi','Matthew',
'Mark','Luke','John','Acts','Romans','1 Corinthians','2 Corinthians','Galatians',
'Ephesians','Philippians','Colossians','1 Thessalonians','2 Thessalonians','1 Timothy',
'2 Timothy','Titus','Philemon','Hebrews','James','1 Peter',
'2 Peter','1 John','2 John','3 John','Jude','Revelation'];
Dbhelper dbhelper=new Dbhelper();
stt.SpeechToText speechToText=stt.SpeechToText();
bool islistening=false;
//this text i want change after listening
String text='Example:Gensis Chapter 1 verse 5';
#override
void initState() {
// TODO: implement initState
super.initState();
dbhelper.db;
_initSpeech();
}
/// This has to happen only once per app
void _initSpeech() async {
speechToText.initialize();
}
///this dialog when user press on mic button it show alert alert dialog button
showAlertDialog() {
Widget okButton = TextButton(
child: Text("CANCEL VOICE"),
onPressed: () => Navigator.of(context).pop(false),
);
AlertDialog alert = AlertDialog(
title: Text("Search by voice"),
content: Container(
height: 180,
child: Column(
children: [
AvatarGlow(
glowColor: Colors.blue,
endRadius: 75,
duration: Duration(milliseconds: 2500),
repeat: true,
showTwoGlows: islistening,
repeatPauseDuration: Duration(milliseconds: 150),
child: Material(
elevation: 5,
shape: CircleBorder(),
child: CircleAvatar(
backgroundColor: Colors.white,
child: Icon(Icons.mic, color: Colors.blue, size: 30,),
radius: 50,
),
),
),
Expanded(child: Container(
child: Text(text),
)),
],
),
),
actions: [
okButton,
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
new IconButton(
///when user clickec on mic button dialog and speech rcoginition methods calll
icon: new Icon(islistening?Icons.mic:Icons.mic_none),
highlightColor: Colors.pink,
onPressed:(){
setState(() {
showAlertDialog();
_listen();
});
},
),
],
elevation: 0,
title: Text('The Bible Multiversion', style: TextStyle(
fontSize: 20
),),
centerTitle: true,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: ListView.separated(
shrinkWrap: true,
itemCount: booknames.length,
separatorBuilder: (BuildContext context, int index) =>
Divider(height: 1),
itemBuilder: (context, index) {
return Column(
children: [
GestureDetector(
onTap: () {
int increment = index + 1;
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation1, animation2) =>
chapters(increment, booknames[index]),
transitionDuration: Duration(seconds: 0),
),
);
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => chapters(increment)),
// );
},
child: ListTile(
leading: CircleAvatar(
radius: 20,
backgroundColor: Colors.primaries[Random().nextInt(
Colors.primaries.length)],
child: Text(
booknames[index].substring(0, 1), style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.white
),),
),
title: Text(
booknames[index], style: TextStyle(
color: Colors.black,
fontSize: 20
),
),
),
),
],
);
},
),
),
],
),
);
}
//this voice listener method
void _listen() async {
if (!islistening) {
bool available = await speechToText.initialize(
onStatus: (val) => print('onStatus: $val'),
onError: (val) => print('onError: $val'),
);
if (available) {
setState(() {
islistening=true;
});
speechToText.listen(
onResult: (result)=>setState(() {
//this text is not updating in dialog
text=result.recognizedWords;
//but this print method continues printing spkoen word in console
print('result.recognizedWords')
})
);
}
} else {
setState(() => islistening = false
);
speechToText.stop();
}
}
}
I think this is a common problem, setState does not work for dialog, because Dialog is not the part of the tree.
this is showDialog()'s document:
/// This function takes a `builder` which typically builds a [Dialog] widget.
/// Content below the dialog is dimmed with a [ModalBarrier]. The widget
/// returned by the `builder` does not share a context with the location that
/// `showDialog` is originally called from. Use a [StatefulBuilder] or a
/// custom [StatefulWidget] if the dialog needs to update dynamically.
you can use StatefulBuilder, refer to How to refresh an AlertDialog in Flutter?

Flutter : Refresh The Page with AlertDialog

I am working on a card game and it includes 2 parts.
InputPage
GamePage
In InputPage() user picks cards and it has a new game button. When user click on it, page must be reload. I did this with Navigator.of method. But when user go to GamePage(), i got an error like this:
Unhandled Exception: setState() called after dispose(): _GamePageState#d4518(lifecycle state: defunct, not mounted)
This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.
The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
This is my code:
ayarAlert2(BuildContext context) async {
AlertDialog alert = AlertDialog(
title: Center(
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(15.0),
),
),
child: Text(
" Settings ",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w300),
),
),
),
backgroundColor: Color(0xFF1F010B),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)),
content: Container(
child: Wrap(
runSpacing: 5,
spacing: 10,
children: <Widget>[
FlatButton(
onPressed: () {
Navigator.pop(context);
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => InputPage()));
},
child: Center(
child: Row(
children: [Container(
child: Text(
" New Game ",
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.w300),
)),
],
),
)),
],
),
),
);
// show the dialog
showDialog(
barrierColor: Colors.black.withOpacity(0.01),
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
When user picks all the cards ,he/she press the " START " button. Heres the start button :
Navigator.of(context).pushReplacement(
new MaterialPageRoute(
builder: (BuildContext context) =>
new GamePage(
mycards: cardBrain.mycards,
yourcards:
cardBrain.rakipcards,
annen: true,
)));
This is InputPage() 's initState
#override
void initState() {
super.initState();
Future.delayed(Duration.zero, () {
showDialog(
context: context,
builder: (context) => AlertDialog(
content: Container(
child: Wrap(
alignment: WrapAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
onPressed: () {
setState(() {
cardBrain.kartbol();
Navigator.pop(context);
});
},
child: Center(
child: Row(
children: [
Center(
child: Container(
child: Text(
" START ",
)),
),
],
),
)),
],
),
],
),
),
));
});
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
// animationController.dispose() instead of your controller.dispose
}
And this is GamePage() 's initState :
#override
void initState() {
super.initState();
WidgetsBinding.instance
.addPostFrameCallback((_) => showAlertDialog(context));
_now = DateTime.now().second.toString();
// defines a timer
_everySecond = Timer.periodic(Duration(seconds: 1), (Timer t) {
if (annenn == true) {
setState(() {
_now = DateTime.now().second.toString();
if (cardBrain.bitir == 13) {
if (ihale <= cardBrain.bizimskor) {
mesaj = "WIN";
} else {
mesaj = "LOSE";
}
sonucAlert(context, cardBrain.bizimskor, mesaj, cardBrain.onunskor,
widget.annen);
}
});
}
});
}
A solution would be to use the popAndPushNamed method:
await Navigator.popAndPushNamed(context, '/gameScreen');
Remember to define the route in the MaterialApp class, usually in the main.dart file:
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => InputPage(),
'/gameScreen': (context) => GamePage(),
},
);

how to update parent widget after showDialog is closed in Flutter?

I have a widget with an icon when I click on it a dialog widget is shown, here is the call for the dialog :
// this icon is in widget parent
IconButton(
icon: Icon(
Icons.info_outline,
size: mobileWidth * 0.07,
),
tooltip: 'information',
color: Colors.blueGrey,
onPressed: () {
showAlertInfo(context, code);
setState(() {});
},
),
here is my dialog :
showAlertInfo(BuildContext context, String code) {
showDialog(
context: context,
builder: (context) {
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog(
title: Text(
"Information sur le client $code", ),
content: SingleChildScrollView(
child: Container( .....
/* ...
this dialog has some operations that changes info
values of the widget that called this in first place
it is a big code to put here*/
// here I have a close button
actions: [
FlatButton(
child: Text(
"Fermer",
style: TextStyle(
color: Colors.red,
fontSize: mobileWidth * 0.035,
fontWeight: FontWeight.bold,
),
),
onPressed: () {
Navigator.of(context).pop(); // dismiss dialog
},
),
],
);
what I'm trying to achieve is when the dialog is dismissed I want the parent widget to be updated, so how I call setState of the parent widget when the dialog widget is closed ?
For Async function
Add await before showDialog() and call setState((){}) on the next line.
await showDialog(
context: context,
builder: (context) {
return yourWidget;
}
);
setState((){});
For Sync Function
Use the .then() callback, and call setState((){}) in it.
showDialog(
context: context,
builder(context) {
return yourWidget;
}).then((_){
setState((){});
}
);

Flutter, how to call Dialog function from another class

what is the proper way to call Dialog function from another class.
I have been searching this topic for a while but seems none of them are my answer.
my Dialog has a little complicated logic for server communicating and some paginations
so this code is going to be long for just one dart file. so I want to separate them.
and I need the some dialog animations so I picked the showGeneralDialog()
I also saw the example dialog implementaion using StatefulBuilder() which can use setState,
but this problem is it is not able to use initState()
for now, what I did is below
dart1 file
import 'package:aaa/bbb/some_dialog_file.dart'
as someDialog;
GestureDetector(
onTap: () async{
var result =
await someDialog.displayDialogOKCallBack(
context,
);
},
child: Container(
width: 60,
height: 60,
child: Icon(
Icons.comment,
size: 38,
),
),
)
dart2 file
Future<dynamic> displayDialogOKCallBack(BuildContext context) async {
return await showGeneralDialog(
barrierLabel: "Label",
barrierDismissible: true,
// barrierColor: ,
transitionDuration: Duration(milliseconds: 400),
context: context,
pageBuilder: (context, anim1, anim2) {
return StatefulBuilder(builder: (context, setState) {
return Scaffold(
body: SafeArea(
),
);
});
},
transitionBuilder: (context, anim1, anim2, child) {
return SlideTransition(
position:
Tween(begin: Offset(0, 1), end: Offset(0, -0.02)).animate(anim1),
child: child,
);
},
);
}
so my question is I want to build very clean animation dialog
which is logically separated from base class file and it has to have initState(), and setState()
how could I acheive this ? thanks
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Container(
child: RaisedButton(
onPressed: () {
someDialog(context);
},
child: Text("click"),
),
);
}
Future<dynamic> someDialog(BuildContext context) async {
return await showGeneralDialog(
barrierLabel: "Label",
barrierDismissible: true,
context: context,
pageBuilder: (context, anim1, anim2) {
return Scaffold(
backgroundColor: Colors.transparent,
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
// List
AnotherClassDialog(),
],
),
],
),
),
),
);
});
}
}
class AnotherClassDialog extends StatefulWidget {
#override
_AnotherClassDialogState createState() => _AnotherClassDialogState();
}
class _AnotherClassDialogState extends State<AnotherClassDialog> {
Color color;
#override
void initState() {
// TODO: implement initState
super.initState();
color = Colors.black;
}
#override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
RaisedButton(
onPressed: () {
setState(() {
color = Colors.red;
});
},
),
Container(
width: 100,
height: 100,
color: color,
),
RaisedButton(
onPressed: () {
setState(() {
color = Colors.green;
});
},
)
],
),
);
}
}
I use a custom dialog in my app in some classes and had the same problem.
You should define a dialog and pass context and other variables to it and call it everywhere you want.
You can define a dialog like this :
showCustomDialog(BuildContext context, String title, String description) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(
title,
textAlign: TextAlign.right,
),
content: SingleChildScrollView(
child: Text(
description,
style: Theme.of(context).textTheme.bodyText1,
textAlign: TextAlign.right,
),
),
actions: [
FlatButton(
child: Text(
'ok',
style: Theme.of(context).textTheme.bodyText2.copyWith(
color: Theme.of(context).accentColor,
),
),
onPressed: () => Navigator.of(context).pop(),
),
],
actionsPadding: EdgeInsets.symmetric(
horizontal: 10,
vertical: 5,
),
);
});
}
and use it everywhere you want like this :
InkWell(
child: Icon(
Icons.error_outline,
size: 17,
),
onTap: () => showCustomDialog(context,"text1" , "text2") ,
),
I hope my answer will help you.

How to access Provider providers in Dialogs in Flutter

The Provider package makes use of InheritedWidget. This is a problem when I want to access a provider when I'm in a Dialog. If I load a dialog using
showDialog(... builder: (context) => MyDialog);
I can't access anything using InheritedWidget because my dialog isn't part of the main widget tree. This also means that I can't access my Provider providers, correct?
My question is: How can I access my providers in a dialog if it's not part of the main app widget tree?
final firebaseAuth = Provider.of<FirebaseAuth>(context);
I have the same problem with using BLoCs. If I try to retrieve them in a dialog via InheritedWidget, they fail. I've gotten around this by passing the BLoC in the constructor but this seems to defeat the purpose of InheritedWidgets.
Instead of passing the BLoC in the constructor, you can make use of BlocProvider.value.
https://pub.dev/documentation/flutter_bloc/latest/flutter_bloc/BlocProvider/BlocProvider.value.html
This will allow you to provide your existing BLoC instance to your new route (the dialog). And you still get all the benefits of InheritedWidget
// Get the BLoC using the provider
MyBloc myBloc = BlocProvider.of<MyBloc>(context);
showDialog(
context: context,
builder: (BuildContext context) {
Widget dialog = SimpleDialog(
children: <Widget>[
... // Now you can call BlocProvider.of<MyBloc>(context); and it will work
],
);
// Provide the existing BLoC instance to the new route (the dialog)
return BlocProvider<MyBloc>.value(
value: myBloc, //
child: dialog,
);
},
);
.value() also exists for ChangeNotifierProvider, ListenableProvider, etc.
https://pub.dev/documentation/provider/latest/provider/ChangeNotifierProvider/ChangeNotifierProvider.value.html
https://pub.dev/documentation/provider/latest/provider/ListenableProvider/ListenableProvider.value.html
I got stuck at this part for a while. I honestly didn't want to pass the provider, also unpacking the widget code to grab the parent context is hard when you are dealing with a complex widget (And it doesn't seem like the best approach).
This made more sense
handleFileViewerClicked(context) async {
var reportState = Provider.of<ReportState>(context, listen: false);
/**
*The dialog will live in a new context and requires a new provider to be created for the report state
* For more information read the Provider.Consumer documentation and showDialog function signature.
*/
showDialog(
context: context,
//Notice the use of ChangeNotifierProvider<ReportState>.value
builder: (_) => ChangeNotifierProvider<ReportState>.value(
value: reportState,
child: FileViewer(),
),
);
}
Your child widget which is FileViewer in that case can make use of
class FileViewer extends StatelessWidget {
.
.
Widget build(BuildContext context) {
//you can enable or disable listen if you logic require so
var reportState = Provider.of<ReportState>(context);
return Text('${reportState.files.length}');
}
}
I was able to access Provider data by passing in the data set into the alert dialog. Interestingly, you have to call setState() in the Dialog in order to see the changes in your Dialog.
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
final provider = Provider.of<DataSet>(context);
return Scaffold(
body: Container(
child: RaisedButton(
child: Text('Show Dialog'),
onPressed: () {
showDialog(context: context,
builder: (context) {
return DialogContent(dataSet: provider);
});
},
),
),
);
}
}
class DialogContent extends StatefulWidget {
final DataSet dataSet;
const DialogContent({Key key, this.dataSet}) : super(key: key);
#override
_DialogContentState createState() => _DialogContentState();
}
class _DialogContentState extends State<DialogContent> {
#override
Widget build(BuildContext context) {
return AlertDialog(
title: Text('Dialog with data'),
content: Text('${widget.dataSet.pieceOfData}'),
actions: <Widget>[
FlatButton(
child: Text('Increase Data'),
onPressed: () {
setState(() {
widget.dataSet.increaseData();
});
},
),
],
);
}
}
class DataSet with ChangeNotifier {
int pieceOfData = 1;
increaseData() {
pieceOfData += 1;
notifyListeners();
}
}
Try this. Create a different stateful widget that housed the dialog and return that dialog stateful widget when you call a showDialog() method. Example below
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build((BuildContext context) {
MainProvider mainProvider = MainProvider.of(context);
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
),
body: Center(
child: Container(
child: RaisedButton(
onPressed: ()=> _openBottomSheet(context, mainProvider),
child: Text("Open Dialog"),
)
)
)
);
}
_openBottomSheet(BuildContext context, MainProvider mainProvider) async {
await showModalBottomSheet<bool>(
context: cntxt,
builder: (_) {
return BottomSheetDialog();
}
);
}
}
class BottomSheetDialog extends StatefulWidget {
#override
_BottomSheetDialogState createState() => _BottomSheetDialogState();
}
class _BottomSheetDialogState extends State<BottomSheetDialog> {
#override
void initState() {
super.initState();
}
#override
void dispose() {
super.dispose();
}
#override
Widget build(BuildContext context) {
MainProvider mainProvider = MainProvider.of(context);
return Container(
width: MediaQuery.of(context).size.width,
height:MediaQuery.of(context).size.height/2.2,
margin: EdgeInsets.fromLTRB(16,16,16,0),
decoration: BoxDecoration(
color: mainProvider.color,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: RaisedButton(
onPressed: ()=> mainProvider.changeColor(),
child: Text("Open Dialog"),
)
)
}
}
class MainProvider with ChangeNotifier {
static MainProvider of(BuildContext context) {
return Provider.of<MainProvider>(context);
}
Color _color = Colors.white;
bool _isColorChanged = false;
Color get color => _color;
bool get isColorChanged => _isColorChanged;
changeColor() {
if(!isColorChanged) {
_color = Colors.green;
}else{
_color = Colors.white;
}
_isColorChanged = !_isColorChanged;
notifyListeners();
}
}
If that's an option for you, simply lift the provider up above MaterialApp. This might be a good solution for globally unique providers, e.g. user configurations or similar:
You have to pass the thing being provided directly to the dialog constructor to access it in the dialog's new context. You can also give it to a new Provider widget at the top of your dialog tree if you have a very deep widget tree in the dialog and you want to access it from somewhere deeper.
If you are using Bloc, typically you tell Provider to call the Bloc's dispose method when the provider widget is disposed to clean up the streamcontrollers/subscriptions. Obviously, you might not want to do this if you are re-providing the bloc to the dialog, or if this bloc is used outside the dialog.
Using stateful or stateless widgets in the dialog is up to you, as long as you have access to the bloc you can use a streambuilder and listen to some stream as per usual.
an example:
class EditEventDialog extends StatelessWidget {
final GroupBloc groupBloc;
EditEventDialog({this.groupBloc})
: assert(groupBloc != null);
#override
Widget build(BuildContext context) {
return Provider(
builder: (context) => groupBloc,
child: Dialog(
child: Container(
height: 400.0,
width: 200.0,
child: StreamBuilder<StatusStreamType>(
stream: groupBloc.statusStream,
builder: (context, snapshot) {
....
and to call it:
onPressed: () => showDialog(
builder: (newContext) {
GroupBloc groupBloc = Provider.of<GroupBloc>(context);
return EditEventDialog(
groupBloc: groupBloc,
);
},
context: context,
)
I faced the same issue today and I was able to work around it by wrapping the dialog in a Stateful Builder and setting the state in the new widget tree.
context: context,
builder: (context) {
return StatefulBuilder(builder: (context, setState) {
return Dialog(
child: SingleChildScrollView(
child: Container(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: height * .05),
child: Text('Choose An Avatar'),
),
Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: CircleAvatar(
minRadius: width * .09,
maxRadius: width * .09,
backgroundColor: Colors.brown,
backgroundImage: AssetImage(
'assets/profile${appData.avatar}.png'),
),
),
Positioned.fill(
left: width * .04,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: width * .18,
child: Material(
color: Colors.transparent,
child: InkWell(
child: Icon(Icons.arrow_left,
size: width * .18),
onTap: () {
setState(() {
appData.changeAvatar();
});
},
),
),
),
),
),
],
),
],
),
),
),
),
);
});
});
I only way I've found to gain access to the Bloc provider from within the dialog is by defining the dialog outside of the showDialog call.
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocConsumer<MyCubit, MyState>(
listener: (context, state) {
if (state.shouldShowDialog == true) {
final dialog = AlertDialog(
content: Text("Info");
actions: <Widget>[
TextButton(
child: const Text('Approve'),
onPressed: () => {
context
.read<MyCubit>()
.handleDialogApproved();
Navigator.of(context, rootNavigator: true).pop();
}
)
],
);
showDialog<void>(
context: context,
builder: (BuildContext context) {
return dialog;
},
);
}
},
builder: (context, state) {
return Container();
},
);
}
}
Widget reviseRatesButton(BuildContext c) {
return Consumer<RideRequestProvider>(
builder: (c, provider, child) {
return OutlinedButton(
onPressed: () async {
alertDialogNew(
c,
content: ChangeNotifierProvider.value(
value: provider,
builder: (context, child) {
return Consumer<RideRequestProvider>(
builder: (context, provider, child) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
const Text(
"Offer your fare",
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
const SizedBox(
height: 5,
),
CustomTextFormField(
hint: "Enter your fair/day",
keyboardType: TextInputType.number,
controller: provider.fareController,
onChanged: (String? val) {
provider.calculateFare();
},
),
const SizedBox(
height: 5,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Weekly (5 days)',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
Text.rich(
TextSpan(
text: provider.weeklyFare
.toStringAsFixed(2),
children: [
TextSpan(
text: '/week',
style: TextStyle(
color: Colors.blue.shade700,
fontSize: 12,
fontWeight: FontWeight.w600,
),
),
],
),
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
],
),
Column(
children: [
const Text(
'Monthly(22 days)',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
Text.rich(
TextSpan(
text: provider.monthlyFare
.toStringAsFixed(2),
children: [
TextSpan(
text: '/month',
style: TextStyle(
fontSize: 12,
color: Colors.blue.shade700,
fontWeight: FontWeight.w600,
),
),
],
),
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
],
),
],
),
],
),
);
},
);
}),
);
},
child: const Text(
"Revise Rates",
),
style: OutlinedButton.styleFrom(
side: const BorderSide(width: 1.0, color: Colors.blue),
),
);
},
);}
I've been stuck at this for a few moments, but ChangeNotifierProvider.value works like a charm.
A bit late in finding this, but just had this same challenge and realised a solution: You need to maintain a reference to the context outside of the showDialog call. By default we usually just use "context" as the name of the context both outside and inside the showDialog, thus masking the outside context from use within the showDialog. So, instead, use a different name inside the showDialog (e.g. "c") and then you can still use "final firebaseAuth = Provider.of(context);" inside the showDialog and it will find the FirebaseAuth object from the main tree as you wish.
Here's a short excerpt from some code I am working on which works now:
showDialog(
context: context,
builder: (c) {
final action = Provider.of<ActionType>(context);
final host = Provider.of<String>(context);
return AlertDialog(
title: Text('Action API'),
actions: [
FlatButton(
onPressed: () {
Navigator.pop(c);
},
etc.