android - example - flutter fade transition

mostrar/ocultar widgets en Flutter programáticamente

Question

En Android, cada subclase de Vista tiene un método "setVisibility" que le permite modificar la visibilidad de un objeto de Vista

Hay 3 opciones para configurar la visibilidad:

• visibile: renderiza la vista visible dentro del diseño
• invisible: oculta la vista, pero deja un espacio que es equivalente a lo que ocuparía la vista si fuera visible
• ido: oculta la vista y la elimina por completo del diseño. Es como si su altura y anchura fueran 0dp.

¿Hay algo equivalente a lo anterior para Widgets en Flutter?

Para una referencia rápida: https://developer.android.com/reference/android/view/View.html#attr_android:visibility

Answer 1

Actualizar

Flutter ahora tiene un widget de visibilidad . Para implementar su propia solución, comience con el siguiente código.

Haz un widget tú mismo.

mostrar ocultar

class ShowWhen extends StatelessWidget {
  final Widget child;
  final bool condition;
  ShowWhen({this.child, this.condition});

  @override
  Widget build(BuildContext context) {
    return Opacity(opacity: this.condition ? 1.0 : 0.0, child: this.child);
  }
}

mostrar / eliminar

class RenderWhen extends StatelessWidget {
  final Widget child;
  final bool condition;
  RenderWhen({this.child, this.show});

  @override
  Widget build(BuildContext context) {
    return this.condition ? this.child : Container();
  }
}

Por cierto, ¿alguien tiene un nombre mejor para los widgets anteriores?

Más lecturas

1. Article sobre cómo hacer un widget de visibilidad.

Answer 2

Flutter ahora contiene un widget de visibilidad que debe usar para mostrar / ocultar widgets. El widget también se puede utilizar para cambiar entre 2 widgets cambiando el reemplazo.

Este widget puede alcanzar cualquiera de los estados visibles, invisibles, desaparecidos y mucho más.

    Visibility(
      visible: true //Default is true,
      child: Text(''Ndini uya uya''),
      //maintainSize: bool. When true this is equivalent to invisible;
      //replacement: Widget. Defaults to Sizedbox.shrink, 0x0
    ),

Answer 3

Para colaborar con la pregunta y mostrar un ejemplo de reemplazo con un Container() vacío Container() .

Aquí está el ejemplo a continuación:

import "package:flutter/material.dart";

void main() {
  runApp(new ControlleApp());
}

class ControlleApp extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "My App",
      home: new HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {
  bool visibilityTag = false;
  bool visibilityObs = false;

  void _changed(bool visibility, String field) {
    setState(() {
      if (field == "tag"){
        visibilityTag = visibility;
      }
      if (field == "obs"){
        visibilityObs = visibility;
      }
    });
  }

  @override
  Widget build(BuildContext context){
    return new Scaffold(
      appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
      body: new ListView(
        children: <Widget>[
          new Container(
            margin: new EdgeInsets.all(20.0),
            child: new FlutterLogo(size: 100.0, colors: Colors.blue),
          ),
          new Container(
            margin: new EdgeInsets.only(left: 16.0, right: 16.0),
            child: new Column(
              children: <Widget>[
                visibilityObs ? new Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    new Expanded(
                      flex: 11,
                      child: new TextField(
                        maxLines: 1,
                        style: Theme.of(context).textTheme.title,
                        decoration: new InputDecoration(
                          labelText: "Observation",
                          isDense: true
                        ),
                      ),
                    ),
                    new Expanded(
                      flex: 1,
                      child: new IconButton(
                        color: Colors.grey[400],
                        icon: const Icon(Icons.cancel, size: 22.0,),
                        onPressed: () {
                          _changed(false, "obs");
                        },
                      ),
                    ),
                  ],
                ) : new Container(),

                visibilityTag ? new Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: <Widget>[
                    new Expanded(
                      flex: 11,
                      child: new TextField(
                        maxLines: 1,
                        style: Theme.of(context).textTheme.title,
                        decoration: new InputDecoration(
                          labelText: "Tags",
                          isDense: true
                        ),
                      ),
                    ),
                    new Expanded(
                      flex: 1,
                      child: new IconButton(
                        color: Colors.grey[400],
                        icon: const Icon(Icons.cancel, size: 22.0,),
                        onPressed: () {
                          _changed(false, "tag");
                        },
                      ),
                    ),
                  ],
                ) : new Container(),
              ],
            )
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new InkWell(
                onTap: () {
                  visibilityObs ? null : _changed(true, "obs");
                },
                child: new Container(
                  margin: new EdgeInsets.only(top: 16.0),
                  child: new Column(
                    children: <Widget>[
                      new Icon(Icons.comment, color: visibilityObs ? Colors.grey[400] : Colors.grey[600]),
                      new Container(
                        margin: const EdgeInsets.only(top: 8.0),
                        child: new Text(
                          "Observation",
                          style: new TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w400,
                            color: visibilityObs ? Colors.grey[400] : Colors.grey[600],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ),
              new SizedBox(width: 24.0),
              new InkWell(
                onTap: () {
                  visibilityTag ? null : _changed(true, "tag");
                },
                child: new Container(
                  margin: new EdgeInsets.only(top: 16.0),
                  child: new Column(
                    children: <Widget>[
                      new Icon(Icons.local_offer, color: visibilityTag ? Colors.grey[400] : Colors.grey[600]),
                      new Container(
                        margin: const EdgeInsets.only(top: 8.0),
                        child: new Text(
                          "Tags",
                          style: new TextStyle(
                            fontSize: 12.0,
                            fontWeight: FontWeight.w400,
                            color: visibilityTag ? Colors.grey[400] : Colors.grey[600],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ),
            ],
          )                    
        ],
      )
    );
  }
}

Answer 4

Pruebe el widget "Fuera del escenario" si el atributo fuera del escenario: verdadero no ocupa el espacio físico e invisible, si el atributo fuera del escenario: falso ocupará el espacio físico y visible

Fuera del escenario (fuera del escenario: verdadero, niño: Texto ("Visible"),),

Answer 5

Una solución es establecer la propiedad de color de este widget en Colors.transparent. Por ejemplo:

IconButton(
    icon: Image.asset("myImage.png",
        color: Colors.transparent,
    ),
    onPressed: () {},
),

Answer 6

Para principiantes prueba esto también.

class Visibility extends StatefulWidget {
  @override
  _VisibilityState createState() => _VisibilityState();
}

class _VisibilityState extends State<Visibility> {
  bool a = true;
  String mText = "Press to hide";

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "Visibility",
      home: new Scaffold(
          body: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new RaisedButton(
                onPressed: _visibilitymethod, child: new Text(mText),),
                a == true ? new Container(
                width: 300.0,
                height: 300.0,
                color: Colors.red,
              ) : new Container(),
            ],
          )
      ),
    );
  }

  void _visibilitymethod() {
    setState(() {
      if (a) {
        a = false;
        mText = "Press to show";
      } else {
        a = true;
        mText = "Press to hide";
      }
    });
  }
}

Answer 7

Invisible : el widget ocupa espacio físico en la pantalla pero no es visible para el usuario.

Desaparecido : el widget no ocupa ningún espacio físico y desaparece por completo.

Ejemplo invisible

Visibility(
  child: Text("Invisible"),
  maintainSize: true, 
  maintainAnimation: true,
  maintainState: true,
  visible: false, 
),

Ejemplo pasado

Visibility(
  child: Text("Gone"),
  visible: false,
),

Answer 8

Puedes usar la Opacity con una opacity: de 0.0 para dibujar, hacer que un elemento esté oculto pero que aún ocupe espacio.

Para que no ocupe espacio, reemplácelo con un Container() vacío Container() .

EDITAR: Para envolverlo en un objeto de opacidad, haga lo siguiente:

            new Opacity(opacity: 0.0, child: new Padding(
              padding: const EdgeInsets.only(
                left: 16.0,
              ),
              child: new Icon(pencil, color: CupertinoColors.activeBlue),
            ))

Tutorial rápido de Google Developers sobre Opacidad: https://youtu.be/9hltevOHQBw