Drawer Works only with AppBar but does not with with Custom App Bar

Question

I am trying to create a drawer..

I am working with customising every thing so I created a Custom Scaffold as the below code:

import 'package:flutter/material.dart';
import 'package:ipet/constants/constants.dart';

class IPetCustomScaffold extends StatelessWidget {
  final Widget body;
  final PreferredSizeWidget iPetTopAppBar;
  final PreferredSizeWidget iPetBottomAppBar;
  final Key ipKey;
  final Color iPetBGScaffoldColor;
  final Widget iPetDrawer;

  const IPetCustomScaffold({
    @required this.body,
    this.ipKey,
    @required this.iPetTopAppBar,
    this.iPetBottomAppBar,
    this.iPetBGScaffoldColor = AppConst.kPrimaryWhiteBgColor,
    this.iPetDrawer,
  });

  @override
  Scaffold build(BuildContext context) {
    return Scaffold(
      backgroundColor: iPetBGScaffoldColor,
      key: ipKey,
      appBar: iPetTopAppBar,
      body: SafeArea(
        child: body,
      ),
      bottomNavigationBar: iPetBottomAppBar,
      drawer: iPetDrawer,
    );
  }
}

and I have a custom AppBar as the below code:

import 'package:flutter/material.dart';
import 'package:ipet/constants/ipet_dimens.dart';

class IPetCustomTopBarWidget extends StatelessWidget
    implements PreferredSizeWidget {
  final String iPetPawImage;
  final double iPetIconSize;
  final IconData iPetListIconData;
  final Widget iPetFirstPart;
  final List<Widget> iPetMiddlePart;
  final List<Widget> iPetLastPart;

  @override
  final Size preferredSize;

  IPetCustomTopBarWidget({
    this.iPetIconSize = IPetDimens.space20,
    this.iPetListIconData,
    this.iPetPawImage,
    @required this.iPetFirstPart,
    @required this.iPetMiddlePart,
    this.iPetLastPart,
  }) : preferredSize = Size.fromHeight(IPetDimens.space60);

  ShapeBorder kBackButtonShape = RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(IPetDimens.space30),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.only(left: IPetDimens.space15),
            child: iPetFirstPart,
          ),
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: iPetMiddlePart,
            ),
          ),
          Row(
            children: iPetLastPart,
          ),
        ],
      ),
    );
  }
}

Now I need to create a drawer in my DashBoard Page:

Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return IPetCustomScaffold(
       iPetTopAppBar: IPetCustomTopBarWidget(
         iPetMiddlePart: [
           DefaultImage(
             image: 'assets/images/ipet_paw_img.png',
           ),
           Label(
             text: 'Settings',
           ),
         ],
         iPetLastPart: [],
       ),      
       iPetDrawer: Drawer(
        // Add a ListView to the drawer. This ensures the user can scroll
        // through the options in the drawer if there isn't enough ver tical
        // space to fit everything.
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Update the state of the app
                // ...
                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      body: ...
);

the problem now the drawer does not working with this customised app bar works only with normal AppBar() as a default Widget and the result with the AppBar as the below image

and this is the result when using Custom App Bar

I may be working with wrong technique but I hope someone recommend a good advice :D

Answer 1

You can use this line wherever you want to open the drawer:

Scaffold.of(context).openDrawer();

Edit

when you are using a custom one, you have to assign a key to the Scaffold to differentiate which scaffold should open the Drawer

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

then after putting this Key in the Scaffold, call this whenver you want to open the drawer programmatically:

_scaffoldKey.currentState.openDrawer();