0

actualmente estoy programando con Flutter y mi aplicación funciona de la siguiente forma:

Tengo una pantalla de logueo la cual me lleva a la pagina principal y dentro de esa pantalla tengo una barra de navegacion lateral la cual me permite abrir diferentes fragmentos .

Por ahora usé el metodo WILLPOPSCOPE para que al precionar hacia atrás se cierre la barra de navegacion si es que está abierta y si estoy en un fragmento que no es el principal me manda al mismo (tal como lo hace gmail).

Pero ahora el problema que detecté es que si abro la barra de navegacion lateral , presiono en el espacio en blanco y luego presiono la tecla de back en vez de cumplir la funcion que mencioné antes se va a la pantalla de logueo.

Si pudiera atrapar la accion de tocar en el espacio oscuro que queda libre a la derecha podria solucionar el inconveniente pero no se como hacerlo y no encuentro documentación sobre este caso de uso.

la parte oscura de la derecha es la que presiono y al volver a apretar el back me vuelvo al login.

Muestro un ejemplo de una parte de la pantalla

 int _selectedDrawerIndex = 0;
  _getDrawerItemWidget(int pos) {
    switch (pos) {
      case 0:
        return new FirstFragment(value: this.order);
      case 1:
        return new SecondFragment();
      case 2:
        return new ThirdFragment(value: suscribed);
      case 3:
        return new UserProfile();
      case 4:
      //auth.currentUser()==null?print('sin logueo'):print('con logueo');
        signOutWithGoogle().then((e){
          Navigator.of(context).pop(LoginPage.tag);
        });
        break;

      default:
        return new Text("Error");
    }
  }
  _onSelectItem(int index) {
    setState(() => _selectedDrawerIndex = index);
    Navigator.of(context).pop();// close the drawer
    this.draweropen=false;//drawer is closed
  }


  GlobalKey<ScaffoldState> _key = new GlobalKey<ScaffoldState>();
  _handleDrawer(){
    _key.currentState.openDrawer();
    setState(() {
      print('Actualizando..');
      this.draweropen=true;//drawer is open
      //doAsyncStuff();
    });

  }

  Future<bool> _onWillPop() {
    print(this._selectedDrawerIndex);
    if(this.draweropen==true)
    {
      print('saliendo');
      Navigator.of(context).pop();
      this.draweropen=false;
      return null;
    }
    else
    {
      if(this._selectedDrawerIndex==0)
      {
        exit(0);
      }else
      {
        setState(() {
          this._selectedDrawerIndex=0;
        });
      }


      return null;
    }

  }
  Icon actionIcon = new Icon(Icons.search);
  //Widget appBarTitle = new Text("SaleFutbol",style: TextStyle(color: Theme.of(context).textTheme.title.color));
  @override
  Widget build(BuildContext context) {


    //print(_currentUserPhotoURL);
    if(photorefresh!=true)
    {
      updatePhoto();
      photorefresh=true;
    }

    //updatePhoto();
    var drawerOptions = <Widget>[];
    for (var i = 0; i < widget.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(
          new ListTile(
            leading: new Icon(d.icon),
            title: new Text(d.title),
            selected: i == _selectedDrawerIndex,
            onTap: () => _onSelectItem(i),
          )
      );
    }

    return WillPopScope(
      onWillPop: _onWillPop,
      child: new
      Scaffold(
          key: _key,
          appBar: new AppBar(
            elevation: 0.0,
            title: Text("SaleFutbol",style: TextStyle(color: Theme.of(context).textTheme.title.color)),
            actions: <Widget>[
            GestureDetector(
              child: Stack(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      SizedBox(height: 20.0),
                      Icon(FontAwesomeIcons.solidBell,color: Colors.white,),
                    ],
                  ),
                  this.notnum>0?Column(
                    children: <Widget>[
                      SizedBox(height: 13.0),
                      Row(
                        children: <Widget>[
                          SizedBox(width: 10.0),
                          Material(
                            elevation: 3.0,
                            borderRadius: BorderRadius.circular(210.0),
                            color: Colors.red,
                            child: Container(
                              height: 20.0,
                              width: 20.0,
                              child: Center(child: Text(this.notnum.toString(),style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold))),),
                          ),
                        ],
                      ),
                    ],
                  ):Column(
                    children: <Widget>[
                      SizedBox(height: 13.0),
                      Row(
                        children: <Widget>[
                          SizedBox(width: 10.0),
                          SizedBox(width: 20.0),
                        ],
                      ),
                    ],
                  )
                ],
              ),onTap: (){ setState(() {
              this._selectedDrawerIndex=1;
              this.notnum=0;
            });},
            ),
            SizedBox(width: 15.0),
            ],
            leading: new IconButton(icon: new Icon(
              Icons.menu
              ,color: Theme.of(context).textTheme.title.color,),onPressed:(){
              _handleDrawer();
            }),
          ),
          drawer: new Drawer(
            child: new ListView(
              padding: EdgeInsets.zero,
              children: <Widget>[
                new UserAccountsDrawerHeader(
                  accountName: new Text(_currentUserName), accountEmail: new Text(_currentEmail),currentAccountPicture: GestureDetector(child: Hero(tag: 'UserPH', child: CircleAvatar(backgroundImage: _currentUserPhotoURL==null?AssetImage('images/logo.png'):CachedNetworkImageProvider(_currentUserPhotoURL))),onTap: null,),),
                new Column(children: drawerOptions),
              ],
            ),
          ),
          body: _getDrawerItemWidget(_selectedDrawerIndex),
      ),
    );
  }

}

introducir la descripción de la imagen aquí

2
  • Hola, sería ideal si muestras algunas imagenes y un poco de código para entender mejor :) el 20 oct. 2018 a las 4:47
  • ya agregué lo necesario. el 24 oct. 2018 a las 12:32

1 respuesta 1

0

Si no quieres retornar a la pantalla anterior (Login) , simplemente retorna false en el callback the WillPopScope , como ese método retorna un Future, tienes que marcar tu método como async.

     Future<bool> _onWillPop() async {
            print(this._selectedDrawerIndex);
            if(this.draweropen==true)
            {
              print('saliendo');
              Navigator.of(context).pop();
              this.draweropen=false;
              return false;
            }
            else
            {
              if(this._selectedDrawerIndex==0)
              {
                exit(0);
              }else
              {
                setState(() {
                  this._selectedDrawerIndex=0;
                });
              }


            }
            return false;
          }

Update

Ok, viendo lo que necesitas, sería necesario sobreescribir la clase de Scaffold , Drawer y DrawerController, lo cual no es tan sencillo.

Otro approach que puedes seguir es, crear un Custom Widget y mostrarlo al presionar el botón izquierdo en tu AppBar:

    Scaffold(
          appBar: AppBar(
            title: Text("Sample"),
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () => Navigator.of(context).push(PageRouteBuilder<Null>(
                  pageBuilder: (BuildContext context, Animation<double> animation,
                      Animation<double> secondaryAnimation) {
                    return AnimatedBuilder(
                        animation: animation,
                        builder: (BuildContext context, Widget child) {
                          return SlideTransition(
                            position: new Tween<Offset>(
                              begin: const Offset(-1.0, 0.0),
                              end: Offset.zero,
                            ).animate(animation),
                            child: YourMenuWidget(),
                          );
                        });
                  },
                  transitionDuration: Duration(milliseconds: 600))),
            ),
          ),

Con eso vas a mostrar YourMenuWidget, con animación así como el slider al presionar el botón superior izquierdo, ahí tendrías control total del widget y de los gestos.

11
  • el problema persiste. Por eso quiero saber como atrapar el evento de presionar la parte oscura de la derecha . el 25 oct. 2018 a las 18:02
  • pero si presionas la parte oscura, lo que hace es ocultar el menú lateral no? que tiene que ver eso con el back button? El back button lo puedes capturar con el WillPopScope y retornar false para que no salga de esa pantalla el 25 oct. 2018 a las 18:06
  • No quiero capturar el back porque eso si lo hace el Willpopscope , quiero capturar cuando se hace click en ese espacio oscuro , porque eso cierra la barra lateral pero en mi código quedaria como abierta y al presionar el back tira el navigation.pop que me saca a la pagina del login. Esa parte de código la puse para que si abris la barra podes cerrarla con la tecla de back . el 25 oct. 2018 a las 18:32
  • Estuve revisando el código fuente de Scaffold y Drawer, y los 2 están muy ligados, el Scaffold escucha al Drawer cuando se presiona la parte oscura y luego de eso, el scaffold esconde el drawer, tendrías que sobreescribir el Scaffold el 25 oct. 2018 a las 18:57
  • Claro aparte es como que el OpenDrawer genera la animacion que muestra y esconde el mismo cuando se presiona en esa parte oscura. Como tendria que hacer eso de sobreescribir el scaffold? el 25 oct. 2018 a las 18:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.