Show snackbar when item is tapped in bottom sheet

Question

I want to show Snackbar when an item is clicked in the bottom sheet. I tried this.

@override
Widget build(BuildContext defaultContext) {
  return Scaffold(
    body: Center(
      child: RaisedButton(
        onPressed: () => showModalBottomSheet(
              context: defaultContext,
              builder: (BuildContext context) {
                return Builder(
                  builder: (BuildContext builderContext) {
                    return ListTile(
                      title: Text("Click me"),
                      onTap: () {
                        Navigator.pop(builderContext); // hiding bottom sheet
                        Scaffold.of(builderContext).showSnackBar(SnackBar(content: Text("Hi")));
                      },
                    );
                  },
                );
              },
            ),
      ),
    ),
  );
}

But I am having error

Scaffold.of() called with a context that does not contain a Scaffold

Note The question is not a duplicate of this

PS: I know I can use GlobalKey in Scaffold to show the Snackbar but I want to do it using Builder like the docs suggest to use Builder. I did use builder and it didn't work.

score 1 · Accepted Answer · 2019-01-10T10:25:23.033

1

This worked out finally.

@override
Widget build(BuildContext defaultContext) {
  return Scaffold(
    body: Center(
      child: Builder(builder: (builderContext) {
        return RaisedButton(
          onPressed: () => showModalBottomSheet(
            context: defaultContext,
            builder: (BuildContext context) {
              return ListTile(
                title: Text("Click me"),
                onTap: () {
                  Navigator.pop(builderContext); // hiding bottom sheet
                  Scaffold.of(builderContext).showSnackBar(SnackBar(content: Text("Hi")));
                },
              );
            },
          ),
        );
      },),
    ),
  );
}

I need to move Builder up the tree. Don't know the reason why but it worked.

edited Jan 10 '19 at 10:25

answered Dec 20 '18 at 12:50

Can anyone tell me why shifting `Builder` up the tree made it work? – Dec 20 '18 at 13:00
It finds closest Scaffold above, inside closest context (context1) from contextMy. While your wrong sample finds it inside context2/RaisedButton, which is none. – axunic Jan 05 '19 at 00:48
@mnemonic23 Thanks but my naming convention was too bad, I updated the convention and formatted the code, can you now tell me using updated names. – Jan 10 '19 at 10:26
2

The idea is, you have to place 'Builder' somewhere below Scaffold but still IN THE SAME BuildContext where Scaffold is (which is defaultContext). The error occur because you place 'Builder' inside another context (which is belong to showModalBottomSheet). – axunic Jan 10 '19 at 14:58
I think this explain why we need additional Builder to make showSnackBar worked. https://docs.flutter.io/flutter/material/Scaffold/of.html – axunic Jan 10 '19 at 15:04
@mnemonic23 I was also getting the feeling to place the `Builder` somewhere below the `Scaffold` ... thanks for your tip. – Jan 14 '19 at 20:04

Show snackbar when item is tapped in bottom sheet

1 Answers1