Flutter/Dart - Edit Page in PageView, then Refresh and Scroll back to Same Place?

Question

Currently, I can submit edits to a single page in a PageView and then either Navigator.push to a newly created single edited page or Navigator.pop back to the original Pageview containing the unedited page.

But I'd prefer to pop back to the the same place in an updated/refreshed Pageview. I was thinking I could do this on the original PageView page:

       Navigator.pushReplacement(context,new MaterialPageRoute(
           builder: (BuildContext context) => EditPage()),);

But after editing, how can I pop back to a refreshed PageView which is scrolled to the now updated original page? Or is there a better way? Someone mentioned keys, but I've not yet learned to use them.

Answer 1

The question deals with the concept of Reactive App-State. The correct way to handle this is through having an app state management solution like Bloc or Redux.

Explanation: The app state takes care of the data which you are editing. the EditPage just tells the store(App-State container) to edit that data and the framework takes care of the data that should be updated in the PageView.

as a temporary solution you can use an async call to Navigation.push() and refresh the PageView State once the EditPage comes back. you can also use an overloaded version of pop() to return a success condition which aids for a conditional setState().

Answer 2

This isn't ideal, but works somewhat. First I created a provider class and added the following;

class AudioWidgetProvider with ChangeNotifier {

int refreshIndex;

 setRefreshIndex (ri) {
    refreshIndex = ri;
    return refreshIndex;
  }
}

Then in my PageView Builder on the first page, I did this;

Widget build(context) {
    var audioWidgetProvider = Provider.of<AudioWidgetProvider>(context);
    return
      PreloadPageView.builder(
      controller: PreloadPageController(initialPage: audioWidgetProvider.refreshIndex?? 0),

Then to get to the EditPage (2nd screen) I did this;

onPressed: () async {
                                                
 audioWidgetProvider.setRefreshIndex(currentIndex);

 Navigator.pushReplacement(context,new MaterialPageRoute(builder: (BuildContext context) => EditPage()),); }

And finally I did this to return to a reloaded PageView scrolled to the edited page;

 Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) =>HomePage())); 

The only problem now is that the PageView list comes from a PHP/Mysql query and I'm not sure what to do if new items are added to the list from the Mysql database. This means the currentIndex will be wrong. But I guess that's the topic of another question.

Answer 3

Do you know that Navigator.pushReplacement(...) returns a Future<T> which completes when you finally return to original context ? So how are you going to utilize this fact ? Lets say you want to update a String of the original page :

String itWillBeUpdated="old value";

@override
Widget build(BuildContext ctx)
{
.
.
.
onPressesed:() async {

itWillBeUpdated= await Navigator.pushReplacement(context,new MaterialPageRoute(
           builder: (BuildContext context) => EditPage()),);

setState((){});
 
},

}

On your editing page , you can define Navigator.pop(...) like this :

Navigator.pop<String>(context, "new string");

by doing this , you can provide any data back to the original page and by calling setState((){}) , your page will reflect the changes