drawercontroller stop at tint screen on both open and close drawer

[oberon168]

1. When drag or click icon to open drawer, drawer didn't open but the screen were tinted. I can then drag out the drawer.
2. When trigger Navigator.pop(context); The drawer closed but the screen remind tinted, need extra tap to clear.

Tested in android device and emulator, drawerCallback simply updated a variable
Code in

Scaffold(
drawer: DrawerController(child: DrawerOnly(), alignment: DrawerAlignment.start, drawerCallback: drawerCallback),

instead of (this works)

drawer: DrawerOnly(),

[zoechi]

What are the steps to reproduce? What code?

Please add the output of flutter doctor -v.

[oberon168]

// Here are the full test program, see you can reproduce it

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Test',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Test Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool drawerOpen = false;

  DrawerCallback drawerCallback(bool status) {
    setState(() {
      drawerOpen = status;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(widget.title)),
      drawer: DrawerController(
          child: DrawerOnly(),
          alignment: DrawerAlignment.start,
          drawerCallback: drawerCallback),
      body: ListView(),
    );
  }
}

class DrawerOnly extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: ListTile(
      leading: Icon(Icons.account_balance),
      title: Text('Screen Two'),
      onTap: () {
        Navigator.pop(context);
        Navigator.push(
            context,
            new MaterialPageRoute(
                builder: (BuildContext context) => screenTwo()));
      },
    ));
  }
}

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

  @override
  _screenTwoState createState() => new _screenTwoState();
}

class _screenTwoState extends State<screenTwo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: new Text('Screen Two')),
      body: ListView(),
    );
  }
}

[zoechi]

I enable debug paint

If you drag the drawer out you'll "see" :D an invisible page.

If you now drag the drawer out again, you will actually see the drawer

I didn't fully dive into your code, but I think this is because the Scaffold in the first screen
has no drawer defined.

Please consider asking support questions in one of the channels http://flutter.io/support .

[oberon168]

As the document said, there were no use case for this extension. For my case, I was investigating a work around on the problem of the open drawer is not on top of the screen (ie. drawer options were covered by admob banner). Not sure which team should be responsible for that. Anyhow, I can work around that problem. For here, I just drop in a note for the developer on this issue.

[zoechi]

I assume there is currently no way to prevent admob banners from covering Flutter widgets.
They are built as native views which are always shown on top of all other content.
See also #17075, #14222
Not sure if #19030 (comment) changes this and allows to build such plugins that they behave like Flutter widgets.

[rhymelph]

Hi,I want to you can try this.

  bool drawerOpen;

  void setDrawerOpened(bool isOpen) {
    drawerOpen = isOpen;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: new DrawerWidget(
        callback: setDrawerOpened,
      ),
    );
  }


class DrawerWidget extends StatefulWidget {
  DrawerCallback callback;

  DrawerWidget({this.callback});

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


class _DrawerWidgetState extends State<DrawerWidget> {

  @override
  void initState() {
    widget.callback(true);
    super.initState();
  }

  @override
  void dispose() {
    widget.callback(false);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Text("SS"),
    );
  }
}

[xqwzts]

@oberon168 The original issue you were seeing [the extra grey tint/layer] is because you essentially have two DrawerController's stacked above each other.

When you place an item in the Scaffold's drawer [or endDrawer] slot, it wraps that widget in a DrawerController (see scaffold.dart#L1728 and scaffold.dart#1750L)

So when you are doing this:

 drawer: DrawerController(
          child: DrawerOnly(),
          alignment: DrawerAlignment.start,
          drawerCallback: drawerCallback),

You end up with a pair of nested DrawerControllers. Triggering the scaffold's openDrawer() will now open the first DrawerController, whose child is a grey modal with a second DrawerController hiding off screen.

[anasred]

So What is the solution now? Even If I omit the Drawer class from DrawerController child I get the same behavior. No one is talking about this issue anywhere on the entire internet except in your repo.

[kroikie]

@oberon168

This issue has been moved to firebase/flutterfire#678. Any further collaboration will be done there.

[kroikie]

Since firebase_admob issues require work on the Flutter side as well as the plugin side these issues will remain open here as well until resolved.

[rashmisridar]

@anasred have you find the solution for your problem, even I am phasing the same problem

[Ahmadre]

I am not using any firebase or admob and I am getting the same error with DrawerController. I don't know why I am getting this...

[marcobraghim]

What it have to do with firebase? õ.O

Have anyone found the solution?
For me works when I do not use the drawer attribute from Scaffold. Instead, my first Widget on the Scaffold body is a Stack and the DrawerController is the last one of that.

// Define a drawerKey
final drawerKey = GlobalKey<DrawerControllerState>();

/* ... */

// Setup your drawer controller
_drawerController = DrawerController(
    key: drawerKey,
    alignment: DrawerAlignment.start,
    child: Drawer(/* ... */),
);

/* ... */

Scaffold(
    body: Stack(
        children: [
            Container( /* ... */ ),
            _drawerController,
        ],
    ),
);

/* ... */

// Use open() and close() methods from drawerKey

drawerKey.currentState.open();
drawerKey.currentState.close();

[caseyryan]

For those who haven't found the solution. You don't have to user DrawerController. As it was mentioned before, Scaffold will wrap it in another DrawerController. But if you need to keep track of drawer changes, Scaffold itself has two callbacks onDrawerChanged ad onEndDrawerChanged. They both accept a boolean with "open" state. That's it

[flutter-triage-bot]

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.