Flutter: call parent function from child widget - flutter

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.