Desvanecer un widget (entrada/salida)

Los desarrolladores de UI a menudo necesitan mostrar y ocultar elementos en pantalla. Sin embargo, hacer aparecer y desaparecer elementos de forma repentina en la pantalla puede resultar molesto para los usuarios finales. En su lugar, haz aparecer y desaparecer los elementos con una animación de opacidad para crear una experiencia fluida.

El Widget AnimatedOpacity facilita la realización de animaciones de opacidad. Esta receta utiliza los siguientes pasos:

1. Crear una caja para hacer aparecer y desaparecer con desvanecimiento.
2. Definir un StatefulWidget.
3. Mostrar un botón que alterne la visibilidad.
4. Hacer aparecer y desaparecer la caja con desvanecimiento.

Primero, crea algo para hacer aparecer y desaparecer con desvanecimiento. Para este ejemplo, dibuja una caja verde en la pantalla.

Container(width: 200, height: 200, color: Colors.green)

Ahora que tienes una caja verde para animar, necesitas una forma de saber si la caja debe ser visible. Para lograr esto, usa un StatefulWidget.

Un StatefulWidget es una clase que crea un objeto State. El objeto State almacena algunos datos sobre la aplicación y proporciona una forma de actualizar esos datos. Al actualizar los datos, también puedes pedirle a Flutter que reconstruya la interfaz de usuario con esos cambios.

En este caso, tienes un dato: un booleano que representa si el botón es visible o no.

Para construir un StatefulWidget, crea dos clases: Un StatefulWidget y una clase State correspondiente. Consejo pro: Los plugins de Flutter para Android Studio y VSCode incluyen el fragmento stful para generar rápidamente este código.

// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;
​
  const MyHomePage({super.key, required this.title});
​
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
​
// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible.
  bool _visible = true;
​
  @override
  Widget build(BuildContext context) {
    // The green box goes here with some other Widgets.
  }
}

Ahora que tienes datos para determinar si la caja verde debe ser visible, necesitas una forma de actualizar esos datos. En este ejemplo, si la caja es visible, ocúltala. Si la caja está oculta, muéstrala.

Para manejar esto, muestra un botón. Cuando un usuario presione el botón, cambia el booleano de true a false, o de false a true. Haz este cambio usando setState(), que es un método en la clase State. Esto le indica a Flutter que reconstruya el Widget.

Para obtener más información sobre cómo trabajar con la entrada del usuario, consulta la sección Gestures de la guía de recetas (cookbook).

FloatingActionButton(
  onPressed: () {
    // Call setState. This tells Flutter to rebuild the
    // UI with the changes.
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: const Icon(Icons.flip),
)

Tienes una caja verde en pantalla y un botón para alternar la visibilidad a true o false. ¿Cómo hacer aparecer y desaparecer la caja con desvanecimiento? Con un Widget AnimatedOpacity.

El Widget AnimatedOpacity requiere tres argumentos:

• opacity: Un valor de 0.0 (invisible) a 1.0 (completamente visible).
• duration: Cuánto tiempo debe tardar la animación en completarse.
• child: El Widget a animar. En este caso, la caja verde.

AnimatedOpacity(
  // If the widget is visible, animate to 0.0 (invisible).
  // If the widget is hidden, animate to 1.0 (fully visible).
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(width: 200, height: 200, color: Colors.green),
)