Flutter: call parent function from child widget

Question

hi there 👋🏼 i would like to call a function from a child widget (customappbar) for example to open the drawer.

there is my code:

home_page.dart

import 'package:fahrschuleapp/widget/appbar_widget.dart';
import 'package:fahrschuleapp/widget/sidebar_widget.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawerEnableOpenDragGesture: false,
      body: SafeArea(
        child: Center(
          child: Column(
            children: [
              CustomAppBar(
                pFunction: CustomAppBarFunction.menu,
                pContext: context,
                pTitle: 'test',
              ),
            ],
          ),
        ),
      ),
      drawer: SideBar(),
    );
  }
}

i tried to say with the parameter "pFunction" which function should be called for example navigator pop or open menu etc inside the _callFunction

appbar_widget.dart

import 'package:flutter/material.dart';

enum CustomAppBarFunction {
  menu,
  back,
  exit,
}

class CustomAppBar extends StatelessWidget {
  CustomAppBar({
    Key? key,
    required this.pTitle,
    required this.pContext,
    required this.pFunction,
  }) : super(key: key);

  CustomAppBarFunction pFunction;
  String pTitle;
  BuildContext pContext;

  final List<IconData> _iconList = [
    Icons.menu,
    Icons.arrow_back,
    Icons.close,
  ];

  _callFunction(int index) {
    switch (index) {
      case 0:
        Scaffold.of(pContext).openDrawer();
        break;
      default:
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(
        left: 20,
        right: 20,
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            margin: const EdgeInsets.all(8),
            child: IconButton(
              onPressed: _callFunction(pFunction.index),
              icon: Icon(
                _iconList[pFunction.index],
              ),
            ),
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(15)),
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
          Container(
            padding: const EdgeInsets.only(left: 15, right: 15),
            child: Text(
              pTitle,
              style: const TextStyle(
                fontFamily: 'Hellix',
                fontSize: 20,
              ),
            ),
          ),
          const SizedBox(
            width: 50.4,
          ),
        ],
      ),
    );
  }
}

i tried to call inside the widget the _callFunction but this doesnt work error output:

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

how can i solve it? or is there a better way to do that?

Answer 1

Change you IconButton as below code,

Builder(builder: (context) {
              return IconButton(
                onPressed:() => _callFunction(pFunction.index, context),
                icon: Icon(
                  _iconList[pFunction.index],
                ),
              ) ;
            })
            

And change your _callFunction,

_callFunction(int index, BuildContext mContext) {
    switch (index) {
      case 0:
        Scaffold.of(mContext).openDrawer();
        break;
      default:
        break;
    }
  }

Answer 2

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

This message appears when you try to access a Scaffold from a context that does not have a Scaffold above it. You can use a Key for that purpose. Create a GlobalKey and assign it to the Scaffold, then pass the Key to the AppBar from where you can access the Scaffold.