Flutter: desvanecimiento de un widget

Cada aplicación necesita navegar a través de múltiples páginas y componentes en una aplicación. En flutter, la forma de hacerlo es mediante el uso de rutas (es decir, páginas). Pero cuando existe la necesidad de simplemente eliminar una parte (elemento) de una página, el uso de rutas se vuelve redundante. Aquí es donde entra Fading. En esto, el componente simplemente desaparece de la página. En este artículo, exploraremos el mismo en detalle.

Constructor de la clase AnimatedOpacity:

const AnimatedOpacity(
{Key key,
Widget child,
@required double opacity,
Curve curve: Curves.linear,
@required Duration duration,
VoidCallback onEnd,
bool alwaysIncludeSemantics: false}
)

Propiedades del Widget AnimatedOpecity:

• alwaysIncludeSemantics: Esta propiedad controla si la información semántica será visible o no, tomando un booleano como objeto.
• child: la propiedad child toma un widget como el objeto para mostrarlo en el árbol de widgets debajo o dentro del widget AnimatedOpacity .
• opacity: esta propiedad toma un valor doble como objeto para controlar la opacidad que se desea lograr durante la animación. Va de 0,0 a 1,0.

El desvanecimiento en Flutter se realiza mediante el uso del widget AnimatedOpacity. Siga los siguientes pasos para hacerlo:

• Cree un componente de contenedor para desvanecerse.
• Defina un widget con estado.
• Agregue un botón que alterna la visibilidad.
• Muestre el desvanecimiento del componente contenedor.

Vamos a discutirlos en detalle.

Creación de un contenedor:

Este es el componente que se desvanecerá al alternar el botón. Un contenedor simple se define a continuación:

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.green,
);

Defina un StatefulWidget:

Defina un componente con estado que contendrá el contenedor y el botón y para saber si el cuadro debe ser visible como se muestra a continuación:

class MyHomePage extends StatefulWidget {
  final String title;
 
  MyHomePage({Key key, this.title}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  bool _visible = true;
 
  @override
  Widget build(BuildContext context) {
  }
}

Agregar el botón de alternar:

Este es el botón que al pulsarlo hace invisible el contenedor. Se puede definir como sigue:

FloatingActionButton(
  onPressed: () {
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: Icon(Icons.flip),
);

Mostrar el desvanecimiento:

Ahora use el widget AnimatedOpacity para desvanecer el cuadro. Se define como sigue:

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: Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
);

Código fuente completo:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'GeeksForGeeks';
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  final String title;
 
  MyHomePage({Key key, this.title}) : super(key: key);
 
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  bool _visible = true;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ),
    );
  }
}

Producción: