Custom Code Showcase
FB
Frog Baek
 · (to be) a developer

Refresh(Update) a page using 'Navigator.pop' Method in FF

Hello guys! Some of you already know what I'm going to talk about, but this post is for someone whom want to know how to refresh previous page with back-end simply in FF. And this is amazing because it works on device which has 'back button'(Not the iPhone, but using Android OS like Pixel series)😀

This requires two things to know,  1.  How to use custom widget to navigate to another page. => There are good Postings written by and .(Thanks!) Only have to do is just Reading them! 2.  Knowing FF's 'Action Parameter'. Before start, here is the code! 

 import '../../bbbb/bbbb_widget.dart';

class NavigateTobbbb extends StatefulWidget {
  const NavigateTobbbb({
    Key? key,
    this.width,
    this.height,
    required this.action,
  }) : super(key: key);

  final double? width;
  final double? height;
  final Future Function() action;

  @override
  _NavigateTobbbbState createState() => _NavigateTobbbbState();
}

class _NavigateTobbbbState extends State {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      padding: EdgeInsets.only(left: 0.0),
      splashRadius: 30.0,
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => BbbbWidget()),
        ).then((value) => setState(widget.action));
      },
      color: Colors.black,
      icon: Icon(Icons.arrow_forward_ios_outlined),
      iconSize: 30,
    );
  }
}

First, when you create a new custom widget, you can add any parameters you want. And FF provides unique parameter called 'Action'.[캡처.PNG] Using this parameter, now you can refresh previous page! You can do use  actions like 'Refresh Database Request', 'API call' or 'custom action' and so on.[캡처.PNG]

Here is a simple example using action 'Refresh Database Request'.[캡처.PNG]There are Icon buttons, one has a function to go to 'bbbb' page and the other is a check box I've made(Not toggle Icon!). [캡처.PNG]And there are Icon buttons in 'bbbb' page, too! [캡처.PNG]When user click the box in 'bbbb' page, it has to be a full checked box in 'aaaa' page, too. Can we solve the issue just using an action 'Refresh Database Request' in 'aaaa' page when the page is loaded? Nope! It can't be done because back button performs just going back to 'aaaa' page, not loading 'aaaa' page again.

[캡처.PNG] But if you use the custom widget I've shared, you can solve it by just adding action parameter and using Navigator Method😄 In my case, Just use the custom widget and simply add 'Refresh Database Request' aciton as a parameter. Then, 'bbbb' page Just add FF's basic action 'Navigator.back'!

I've tried it in Android Studio using the same code which used on custom widget, and I figured out this works on device which has 'back button'!! (Tested on real device, not the AVD) [Screen_Recording_20220801-015924.mp4]You can see the app bar title changed when I go back to First page by back button.

I hope this posting could be helpful to someone who read this.  All of you have a nice day with FFing!!😍😍  If you have a question with using custom widget or anything, please feel free to comment! Thanks 👍

1
6 replies