# Pass a callback from the parent widget all the way down the widget tree to a descendant widget

**URL:** <https://forums.kodeco.com/t/pass-a-callback-from-the-parent-widget-all-the-way-down-the-widget-tree-to-a-descendant-widget/156437>\
**Category:** Flutter Apprentice\
**Created:** [November 9, 2021, 8:31am UTC](https://forums.kodeco.com/t/pass-a-callback-from-the-parent-widget-all-the-way-down-the-widget-tree-to-a-descendant-widget/156437 "2021-11-09T08:31:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eryawanir](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/eryawanir/32/102075_2.png) [@eryawanir](https://forums.kodeco.com/u/eryawanir)\
**Post date:** [November 9, 2021, 8:31am UTC](https://forums.kodeco.com/t/pass-a-callback-from-the-parent-widget-all-the-way-down-the-widget-tree-to-a-descendant-widget/156437/1 "2021-11-09T08:31:56Z")

</div>

## Switching tabs

You have two options to implement switching to the **Recipes** tab:

1. **Standard callback** : Pass a callback from the parent widget all the way down the widget tree to a descendant widget. When ready, it fires the callback at each level up the tree and calls `setState()` to rebuild the `Home` widget’s subtree.

Give me the example of the code, please 🙂

```auto

```

---

<div class="post-metadata">

**Author:** ![sheldoni](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/sheldoni/32/81494_2.png) [@sheldoni](https://forums.kodeco.com/u/sheldoni)\
**Post date:** [November 10, 2021, 8:12am UTC](https://forums.kodeco.com/t/pass-a-callback-from-the-parent-widget-all-the-way-down-the-widget-tree-to-a-descendant-widget/156437/2 "2021-11-10T08:12:56Z")

</div>

Hi @eryawanir ,  
Passing a callback might be best used when passing data from a child widget to a parent widget. Using callbacks in multiple levels of a widget tree might be a little bit tedious. Maybe @jomoka can help us on that.  
But i’ll give you a simple example below:  
Let’s say we have two widgets,  
a child widget that looks like the one below:  
On this widget, we have defined a callback **final Function(int) onCountChanged;**  
There is a button, when a user clicks the button, **onCounntChanged** is called:  
 ![count widget](https://files.chunter.kodeco.com/original/3X/8/6/86af2e5f7d5d42f0db3c6c8b88d25b01a0d3bf62.jpeg)

a parent widget that looks like the one below:  
and a child widget that looks like the one below:

![counterpage](https://files.chunter.kodeco.com/original/3X/d/9/d98698bed8e2010e27d6a8aebaa08b5fae17d7ce.jpeg)

When a the elevated button is clicked, the change value is passed from the `Count` child widget to the `CounterPage` parent widget. Then, the addition between the `val` and `count` is performed and `count` is updated.

---

<div class="post-metadata">

**Author:** ![jomoka](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jomoka/32/109828_2.png) [@jomoka](https://forums.kodeco.com/u/jomoka)\
**Post date:** [November 10, 2021, 2:48pm UTC](https://forums.kodeco.com/t/pass-a-callback-from-the-parent-widget-all-the-way-down-the-widget-tree-to-a-descendant-widget/156437/3 "2021-11-10T14:48:35Z")

</div>

@sheldoni thanks looks right!

Yea the down side to callbacks is if you have a deep tree of widgets you will couple every single widget with one another.

The best would be to use an inherited widget, or provider package to pass state up and down the widget tree.

---

<div class="post-metadata">

**Author:** ![eryawanir](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/eryawanir/32/102075_2.png) [@eryawanir](https://forums.kodeco.com/u/eryawanir)\
**Post date:** [November 13, 2021, 5:06am UTC](https://forums.kodeco.com/t/pass-a-callback-from-the-parent-widget-all-the-way-down-the-widget-tree-to-a-descendant-widget/156437/4 "2021-11-13T05:06:40Z")

</div>

before learning flutter, I learned DOM javascript, it’s very difficult for me to adapt to flutter

flutter and DOM javascript are completely different

Thank you

---

<div class="post-metadata">

**Author:** ![eryawanir](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/eryawanir/32/102075_2.png) [@eryawanir](https://forums.kodeco.com/u/eryawanir)\
**Post date:** [November 13, 2021, 5:09am UTC](https://forums.kodeco.com/t/pass-a-callback-from-the-parent-widget-all-the-way-down-the-widget-tree-to-a-descendant-widget/156437/5 "2021-11-13T05:09:45Z")

</div>

can we use DOM selector inside Flutter? hahahahahaha

---

<div class="post-metadata">

**Author:** ![jomoka](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jomoka/32/109828_2.png) [@jomoka](https://forums.kodeco.com/u/jomoka)\
**Post date:** [November 15, 2021, 2:45pm UTC](https://forums.kodeco.com/t/pass-a-callback-from-the-parent-widget-all-the-way-down-the-widget-tree-to-a-descendant-widget/156437/6 "2021-11-15T14:45:28Z")

</div>

🤔 hmmmmmmm 😃 i’m not sure about that. I do know Flutter has two different types of rendering when deployed for Web.

I believe you can also use `querySelector` in flutter:

> **[querySelector function - dart:html library - Dart API](https://api.flutter.dev/flutter/dart-html/querySelector.html)**
>
> API docs for the querySelector function from the dart:html library, for the Dart programming language.

You can check out:

> **[Web renderers](https://docs.flutter.dev/development/platform-integration/web/renderers)**
>
> How to choose a web renderer for running and building a web app.

- HTML Renderer
- CanvasKit Renderer