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