Pass data from child widget to the parent widget

Viewed 926

I have a Dashboard Widget whose body is like this:

I want to pass data from the child widget DashboardGrid(Check at the end of the Code block) to this parent widget. How do I do it?

    body: Column(
      children: <Widget>[
      SizedBox(
      height: 20,
    ),
        Padding(
          padding: EdgeInsets.only(left: 16, right: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    "Categories",
                    style:  TextStyle(
                            color: Colors.white,
                            fontSize: 20,
                            fontWeight: FontWeight.bold)),
     
                ],
              ),
              IconButton(
                alignment: Alignment.topCenter,
                icon: new Icon(Icons.search, color: Theme.of(context).hintColor,),
                onPressed: () {},
              )
            ],
          ),
        ),
        SizedBox(
          height: 40,
        ),
DashboardGrid(),
])
3 Answers

With callback.

Create a function inside DashboardGrid


class DashboardGrid extends StatelessWidget {

final Function(String) callback;

DashboardGrid({this.callback});

....


Then inside the column you will instantiate it with the function

[
...,
DashboardGrid(callback:(String value)=>print(value));
]

When you want to pass that data inside DashboardGrid, just call the function

void passTheData(String data) => callback(data);

example is with String but you can pass any data.

If your child widget lives under the same widget tree, you can take advantage of Notification to bubble up data.

First, create notifications for what you need. You can either create one notification or an abstract Notification with multiple concrete ones. For this example, I'll assume you want to handle different notifications.

abstract class MyNotification extends Notification {}

class SomethingHappened extends MyNotification {}

class NothingHappened extends MyNotification {}

Then you can handle all notifications for that type in the parent widget:

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NotificationListener<MyNotification>(
      onNotification: (notification) {
        // Handle your notification
        return true;
      },
      child: Container(),
    );
  }
}

Or pick individual ones:

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return NotificationListener<MyNotification>(
      onNotification: (notification) {
        if(notification is SomethingHappened){
          // Handle 
        } else if(notification is NothingHappened){
          // Handle
        }
        return true;
      },
      child: Container(),
    );
  }

To emit the notification from your child widget, you just need to call T().dispatch(context) where T is your Notification type. For example, SomethingHappened().dispatch(context);. That's it.

Related