There are 2 screens in my application. In first screen I am listing all data from my sqflite database. In second screen I am giving functionality to delete that record. But when I pop that screen from the stack. It should be refreshed. How can I achieve that.
This is my first screen return code.
return FutureBuilder<List>(
future: DatabaseHelper.instance.queryAll(),
initialData: List(),
builder: (context, snapshot) {
return snapshot.hasData
? new ListView.builder(
padding: const EdgeInsets.all(10.0),
itemCount: snapshot.data.length,
itemBuilder: (context, i) {
print("value : " + snapshot.data.toString());
return new Card(
child: Column(mainAxisSize: MainAxisSize.min, children: <
Widget>[
ListTile(
leading:
Image.file(File(snapshot.data[i]["thumbnail_url"])),
title: Text(
snapshot.data[i]["title"],
style: _biggerFont,
),
subtitle: Text(snapshot.data[i]["month"] +
", " +
snapshot.data[i]["year"]),
onTap: () {
},
),
ButtonBar(
children: <Widget>[
Visibility(
visible: _isUrduAvail,
child: FlatButton(
child: const Text('اردو'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => OfflinePdfViewer(
snapshot.data[i]["id"].toString(),
snapshot.data[i]["title"],
snapshot.data[i]["urdu_url"],
"Urdu")));
},
),
),
Visibility(
visible: _isEnglishAvail,
child: FlatButton(
child: const Text('English'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => OfflinePdfViewer(
snapshot.data[i]["id"].toString(),
snapshot.data[i]["title"],
snapshot.data[i]["english_url"],
"English")));
},
),
),
Visibility(
visible: _isHindiAvail,
child: FlatButton(
child: const Text('हिन्दी'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => OfflinePdfViewer(
snapshot.data[i]["id"].toString(),
snapshot.data[i]["title"],
snapshot.data[i]["hindi_url"],
"Hindi")));
},
),
),
],
)
]));
},
)
: Center(
child: CircularProgressIndicator(),
);
},
);
In this screen i am building the list and populate the FutureBuilder.
and in second screen I have button on that button click the record will be deleted but what will be the route to call that it can be refreshed?
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(
builder: (BuildContext context) => LibraryScreen(),
),
(route) => false,
);
I have tried this code but it clear all my activity stack.
When you call second screen try to use 'pushReplacement' instead of 'push'
If you pushAndRemoveUntil you cannot go back to the same page. You need to push it again in which case the FutureBuilder will rebuild and you will see the correct data.
Or a better solution would be to get your data as a Stream instead of a Future and use StreamBuilder instead of FutureBuilder.
You can try to use 'Pushreplacement' because it will dispose the previous route.
Related
I am using an alert box where I am getting the image from gallery of the user, but the updated image is not getting displayed.
When I close the alert box and again open the alert box, then it's getting displayed. I am using provider package to handle the data.
Here is a video of what I am getting now
Here is my code:
child: ChangeNotifierProvider<MyProvider>(
create: (context) => MyProvider(),
child: Consumer<MyProvider>(
builder: (context, provider, child) {
return Column(
children: [
ElevatedButton(
onPressed: () {
showDialog(
barrierDismissible: true,
context: context,
barrierColor: Colors.black.withOpacity(0.5),
builder: (ctx) => AlertDialog(actions: <Widget>[
----> // alert box styling
Expanded(
child: Column(
children: [
CircleAvatar(
backgroundColor:
Colors.transparent,
radius: 175,
child: ClipOval(
child: provider
.image !=
null
? Image.network(
provider.image
.path,
height: 200,
)
: Image.asset(
'assets/profile.webp',
width: 250.0,
height: 250.0,
fit: BoxFit
.cover,
),
)),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: <Widget>[
ElevatedButton(
onPressed: () async {
var image = await ImagePicker()
.pickImage(
source: ImageSource
.camera);
provider.setImage(
image);
},
child: Text(
'Use camera',
style: t3b,
),
),
},
child: const Text('Click me ')),
],
);
},
),
),
),
);
}
}
class MyProvider extends ChangeNotifier {
var image;
Future setImage(img) async {
image = img;
notifyListeners();
}
I am also facing the same issue in mobile development then I know we have to rebuild the whole dialog and then it will work well
showDialog(
context: context,
builder: (BuildContext context) {
int selectedRadio = 0; // Declare your variable outside the builder
return AlertDialog(
content: StatefulBuilder( // You need this, notice the parameters below:
builder: (BuildContext context, StateSetter setState) {
return Column( // Then, the content of your dialog.
mainAxisSize: MainAxisSize.min,
children: List<Widget>.generate(4, (int index) {
return Radio<int>(
value: index,
groupValue: selectedRadio,
onChanged: (int value) {
// Whenever you need, call setState on your variable
setState(() => selectedRadio = value);
},
);
}),
);
},
),
);
},
);
Use a StatefulBuilder in the content section of the AlertDialog. Even the StatefulBuilder docs actually have an example with a dialog.
What it does is provide you with a new context, and setState function to rebuild when needed.
also sharing the reference I used for this: Reference for solving this same
I have a showDialog() function in flutter web, but it will only works this way (2 show dialog in one function), if I comment out the other one, the dialog will not show. I don't really understand why I need to put 2 showDialog() in order for it to show up. Here is the code:
onDeleteTap(String id) async {
print(id);
await showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Hapus?'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
],
),
),
actions: <Widget>[
TextButton(
child: Text('Batal'),
onPressed: () {
},
),
SizedBox(
width: 150.0,
child: ErrorButton(
text: "Hapus",
onClick: () {
},
),
),
],
);
},
);
await showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Hapus?'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
],
),
),
actions: <Widget>[
TextButton(
child: Text('Batal'),
onPressed: () {
},
),
SizedBox(
width: 150.0,
child: ErrorButton(
text: "Hapus",
onClick: () {
},
),
),
],
);
},
);
I think before you are calling onDeleteTap you must be using navigator.pop(context). You can check by not showing any dialog to check if you are really poping a screen (If you are having a pop your current screen will close or you will have a black screen) or you can use the debbuger to check all the lines that passes before getting to this code.
I want to show another AlertDialog when I click on one of its children
But when I click on it doesn't
Show it until I close the Alert and open it again
I want to navigate to Second AlertDialog without closing it
Any help will be appreciated
any way to make it open another dialog or a way to close it and open it again
Here is the code
padding: const EdgeInsets.only(top: 12.0),
child: ListView(children: [
FutureBuilder<DropDown>(
future: getDropData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
DropDown dropdown = snapshot.data;
return RaisedButton(
color: maincolor,
splashColor: accentcolor,
onPressed: () {
showDialog(
context: context,
useSafeArea: true,
child: Center(
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: ListView.builder(
itemCount: dropdown.categories.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.only(
top: 8.0, right: 8, left: 8),
child: Container(
),
child: FlatButton(
onPressed: () {
setState(() {
categoryID = dropdown
.categories[index]
.categoryId;
});
getDropData();
},
child: Text(
dropdown.categories[index].name,
)),
),
);
}),
),
));```
I think you just need to use setState() to wrap the showDialog() but I can't test it because I don't have a DropDown class.
EDIT
I tried with a simple structure and it works fine. As Dung Ngo mentioned, just use a StatefulBuilder to build the content of the first AlertDialog widget. Triggering another showDialog() inside to bring up the second AlertDialog widget.
class _YourWidgetState extends State<YourWidget> {
AlertDialog alert = AlertDialog(content: Center(child:Text("Second Alert Dialog")));
#override
Widget build(BuildContext context) {
return RaisedButton(onPressed: (){
showDialog(
context: context,
builder: (_) => AlertDialog(
content: StatefulBuilder(
builder: (BuildContext context, StateSetter setState){
return Column(
children: <Widget>[
RaisedButton( onPressed: (){
showDialog(context: context, builder: (_) => alert);
}),
RaisedButton(onPressed: (){
showDialog(context: context, builder: (_) => alert);
}),
],
);
}
),
)
);
});
}
}
Results
The setState doesn't work until you close the first one because it belongs to the context of mainpage, not the context of your 1st dialog.
You can use a StatefulBuilder to create a a StateSetter that invoke a rebuild base on the context of the 1st dialog: https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html
Thanks to Dung Ngo and Kennith for your answers it really helped me and I learnt from your answers a lot your answers were right by the way
here what I have done
a method that opens the second dialog
showGeneralDialog(
barrierLabel: "Barrier",
barrierDismissible: true,
barrierColor: maincolor,
transitionDuration: Duration(milliseconds: 200),
context: context,
pageBuilder: (_, __, ___) {
return FutureBuilder<Manufacturer>(
future: getManufucturer(categoryID, parentID),
builder: (context, snapshot) {
if (snapshot.hasData) {
Manufacturer dropdown = snapshot.data;
return Container(
height: 400,
width: 200,
child: ListView.builder(
itemCount: dropdown.manufacturers.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 60),
child: RaisedButton(
child: Text(
dropdown.manufacturers[index].name,
style: GoogleFonts.cairo(
color: maincolor,
fontSize: 14,
fontWeight: FontWeight.bold),
),
onPressed: () async {
parentID =
dropdown.manufacturers[index].manufacturerId;
manufacturerID = parentID;
print(parentID);
Manufacturer newDropDown =
await getManufucturer(categoryID, parentID);
Navigator.pop(context);
Navigator.pop(context);
}),
);
},
),
);
} else {
return Center(
child: CircularProgressIndicator(
strokeWidth: 12,
backgroundColor: maincolor,
),
);
}
});
},
transitionBuilder: (_, anim, __, child) {
return ScaleTransition(
scale: Tween(begin: 0.0, end: 1.0).animate(anim),
child: child,
);
},
);
}
then I created the button that opens the first dialog and it that dialog I
called that method that I defined earlier
again thanks for your efforts Dung and kennith you really helped me
I'm developing a new Flutter Mobile app using the BLoC pattern. But I've got a problem and I don't find the solution yet.
I've got three widgets :
The first one is my home page with a drawer
Thanks to the drawer, I can navigate to my second widget, an article list
And one last widget : article details (I can reach it with a tap on an article in the list)
My problem is between the second and the third. When I tap on an article, I've an error : BlocProvider.of() called with a context that does not contain a Bloc of type ArticlesBloc.
I've got this in my MaterialApp routes attribute
MyRoutes.articleList: (context) => BlocProvider<ArticlesBloc>(
create: (context) => ArticlesBloc()..add(ArticlesLoaded()),
child: ArticlesScreen(),
),
This is my article list body :
body: BlocBuilder<ArticlesBloc, ArticlesState>(
builder: (BuildContext buildContext, state) {
if (state is ArticlesLoadSuccess) {
final articles = state.articles;
return ListView.builder(
itemCount: articles.length,
itemBuilder: (BuildContext context, int index) {
final article = articles[index];
return ArticleItem(
onTap: () {
Navigator.of(buildContext).push(
MaterialPageRoute(builder: (_) {
return ArticleDetailScreen(id: article.id);
}),
);
},
article: article);
},
);
}
},
),
And my article details page :
#override
Widget build(BuildContext context) {
return BlocBuilder<ArticlesBloc, ArticlesState>(builder: (context, state) {
final Article article = (state as ArticlesLoadSuccess)
.articles
.firstWhere((article) => article.id == id, orElse: () => null);
return Scaffold(
appBar: AppBar(
title: Text(article.reference + ' - Article details'),
),
body: id == null
? Container()
: Padding(
padding: EdgeInsets.all(16.0),
child: ListView(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Hero(
tag: '${article.id}__heroTag',
child: Container(
width: MediaQuery.of(context).size.width,
child: Text(
article.designation,
),
),
),
],
),
),
],
),
],
),
),
);
});
}
Please heeeelp ^^
Edit 1 : I find a solution but I don't know if it's the right way. Instead of only pass the id to the details screen, I pass the complete article so I can directly return the Scaffold without the BlocBuilder
You need to provide your bloc to your new route with ArticleDetailScreen.
Like this:
MaterialPageRoute(builder: (_) {
return BlocProvider.value(
value: BlocProvider.of<ArticlesBloc>(context),
child: ArticleDetailScreen(id: article.id),
);
})
Right now i have a button on the body of the page but cannot implement this button (that routes to a different page) to just encapsulate just the card that is
child: new Text(data["data"][index]["title"]),
it is inside of an itemBuilder so i thought i had to do a GestureDetector. Ive tried to put that child into the GestureDetector method but cannot get it to work unless its the whole body.
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Listviews"),
),
body: new GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => StandardsControlPage()),
);
},
child: Container(
padding: EdgeInsets.all(16.0),
child: new ListView.builder(
itemCount: data == null ? 0 : data["data"].length,
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new Text(data["data"][index]["title"]),
);},
),
),
),
);
}}
This example wont work if i have multiple buttons to press with different routes, and was wondering If there is anyway to implement a button with that route to just that child, how would i do it?
return new Scaffold(
appBar: new AppBar(
title: new Text("Listviews"),
),
body: Container(
padding: EdgeInsets.all(16.0),
child: new ListView.builder(
itemCount: data == null ? 0 : data["data"].length,
itemBuilder: (BuildContext context, int index) {
return new GestureDetector(
child: new Card(
child: new Text(data["data"][index]["title"]),
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => StandardsControlPage()),
);
},
);
},
),
));
I think this will work.