Discount !! E-commerce App With Backend Source Code Video and Voice Chatting App Firebase Chatting App Source Code Complete Gym App BLoC State Management Source Code Complete Study App Buy Ticket Booking App Source Code Payment App Buy Travel App With Backend Source Code Complete Chat App Udemy Course Special Offer Discount !! Online Learning Course App (BLoC) Discount !! Online Learning Course App (Riverpod) Discount !! Online Learning Course App (Getx)

Flutter addPostFrameCallback

Flutter addPostFrameCallback

    I know it sounds scary, it's a long name, it does not make a lot of sense. Let's take a look at the official documentation for this function.

    Schedule a callback for the end of this frame.
    Does not request a new frame.
    This callback is run during a frame, just after the persistent frame callbacks (which is when the main rendering pipeline has been flushed). If a frame is in progress and post-frame callbacks haven't been executed yet, then the registered callback is still executed during the frame. Otherwise, the registered callback is executed during the next frame.
    The callbacks are executed in the order in which they have been added.
    Post-frame callbacks cannot be unregistered. They are called exactly once

    But

    I want you to read the name carefully. It would make more sense. The name reads like add post frame callback. In plain English it should make more sense to you. 

    In plain English

    Add a callback function to be executed after the frame is done. Another way it means, when I am done building this or drawing this frame, add a call back function and run it.

    Let’s see break it down with situations. If you want to run something right after a Flutter widget build is done, then you should call this function.

    You may call it for the situations like below

    1. Showing a snack bar
    2. Doing animation 
    3. Check conditions right after the build
    4. Know when the build method is done

    SchedulerBinding?

    Why I am introducing this concept here? We need to understand this to under the above concept addPostFrameCallback. Just like we read the name for addPostFrameCallback, you may read it here. If you read you will find that it says schedule a binding.

    Bindings provide the glue between these low-level APIs and the higher-level framework APIs. They bind the two together, hence the name is.

    In our case, addPostFrameCallback is the higher level API and the ScherdulerBinding helps it be connected with the lower level APIs.

    addPostFrameCallback is scheduled (when to run) by SchedulerBinding. It means SchedulerBinding decicdes when to run addPostFrameCallback. SchedulerBinding has three types of callbacks to perform, and addPostFrameCallback is the last type and the last one.

    Usage

    This method could be used to udpate scroll view position. From your controller you may call it like below

     SchedulerBinding.instance.addPostFrameCallback((_) {
          if (myscrollController.hasClients){
            myscrollController.animateTo(
              myscrollController.position.minScrollExtent,
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeOut,);
          }

        });

    The example of addPostFrameCallback is used in Firebase Chat App and Video Chat App Laravel. Here we update the scroll position after there's a new message in the message list. The latest message would be shown at the bottom of the screen.

    You may also call it from initState() method of Flutter app. But in that case it will get called only once.

    @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print("initState");
    SchedulerBinding.instance.addPostFrameCallback((_) {
      print("SchedulerBinding");
    });
  }

    Recent posts