No Scaffold widget found when use BottomSheet

Question

I am just learning Flutter and got stuck on this error:

No Scaffold widget found.

Home widgets require a Scaffold widget ancestor.
The specific widget that could not find a Scaffold ancestor was: Home
The ancestors of this widget were

but as you can see from my code I do have a Scaffold and I played around adding it wherever I can but I didn't work for.

What can be the reason to what I've done or didn't notice there?

import 'package:firebase_redux_app/services/firebase.auth.dart';
import 'package:flutter/material.dart';
// import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_redux_app/services/firestore.dart';
import 'package:provider/provider.dart';
import 'package:firebase_redux_app/screens/home/brewList.dart';
import 'package:firebase_redux_app/models/brew.dart';

class Home extends StatelessWidget {
  final AuthService _auth = AuthService();

  @override
  Widget build(BuildContext context) {
    void _showSettingsPanel() {
      showBottomSheet(
          context: context,
          builder: (context) {
            return Container(
              padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 60.0),
              child: Text('bottom sheet'),
            );
          });
    }

    return StreamProvider<List<Brew>>.value(
      value: DBFirestore().brews,
      child: Scaffold(
        backgroundColor: Colors.brown[50],
        appBar: AppBar(
          title: Text('Brew Crew'),
          backgroundColor: Colors.brown[400],
          elevation: 0.0,
          actions: <Widget>[
            FlatButton.icon(
                onPressed: () async {
                  await _auth.signOut();
                },
                icon: Icon(Icons.person),
                label: Text('Log Out')),
            FlatButton.icon(
              icon: Icon(Icons.settings),
              label: Text('settings'),
              onPressed: () => _showSettingsPanel(),
            )
          ],
        ),
        body: BrewList(),
      ),
    );
  }
}

Answer 1

now this prb has different solutions. U gotta use sccafoldKey

  final _scaffoldKey = GlobalKey<ScaffoldState>();
  return Scaffold(
     key: _scaffoldKey,
     appBar: AppBar(
        actions: [
              IconButton(
                  onPressed: () {
                    _scaffoldKey.currentState!.showBottomSheet(
                          (context) => const AddTaskScreen());
               },
               icon: const Icon(Icons.add))
            ],
          ),

Answer 2

This error is caused because of the scope of your _showSettingsPanel method

There are 2 things you can do

1. Make the _showSettingsPanel a method in the Home class and allow it take the context as a parameter. Hence, wrap your settings FlatButton in a Builder and pass the context to the _showSettingsPanel method.

Like this

class Home extends StatelessWidget {

  void _showSettingsPanel(context) {
    showBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 60.0),
            child: Text('bottom sheet'),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return StreamProvider<List<Brew>>(
      value: DBFireStore().brews
      child: Scaffold(
        backgroundColor: Colors.brown[50],
        appBar: AppBar(
          title: Text('Brew Crew'),
          backgroundColor: Colors.brown[400],
          elevation: 0.0,
          actions: <Widget>[
            FlatButton.icon(
                onPressed: () async {
                },
                icon: Icon(Icons.person),
                label: Text('Log Out')),
            Builder(
              builder: (context) {
                return FlatButton.icon(
                  icon: Icon(Icons.settings),
                  label: Text('settings'),
                  onPressed: () => _showSettingsPanel(context),
                );
              }
            )
          ],
        ),
        body: BrewList(),
      ),
    );
  }
}

2. Wrap the Home widget in a Scaffold wherever you use it, instead of using just Home

Like this

Scaffold(body: Home())