Flutter: concepto de widgets visibles e invisibles

En este artículo, veremos cómo podemos cambiar la visibilidad de los widgets en flutter. Aprenderemos sobre varios métodos para administrar la visibilidad de los widgets de flutter. Hay un par de formas de administrar la visibilidad de los widgets en flutter. 

Método 1: usar la clase de visibilidad

Tiene una propiedad visible que administra si el niño está incluido en el subárbol del widget o no. Cuando se establece en false , el elemento secundario de reemplazo generalmente se incluye en su lugar un cuadro de tamaño cero.

Ejemplo 1: mostrar el widget secundario configurando el parámetro visible como verdadero del widget  de visibilidad

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
// TextStyle widget constant
const TextStyle kstyle = TextStyle(fontSize: 60);
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          backgroundColor: Color.fromRGBO(15, 157, 88, 1),
        ),
        body:
            // to center the child widget
            Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("one", style: kstyle),
               
              // Visibility widget to manage visibility
              Visibility(
                 
                // showing the child widget
                visible: true,
                child: Text(
                  "two",
                  style: kstyle,
                ),
              ),
              Text(
                "three",
                style: kstyle,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Producción:

Explicación: en este cuerpo de esta aplicación flutter, el centro es el widget principal que contiene un widget de columna que, a su vez, tiene dos widgets de texto y un widget de visibilidad como elementos secundarios. El widget de visibilidad se coloca entre los dos widgets de texto y contiene el texto ‘ dos ‘. El parámetro visible en el widget de visibilidad toma un valor booleano como objeto y aquí se establece en true , lo que hace que el widget de texto que contiene » dos » sea visible.

Ejemplo 2: ocultar el widget secundario configurando el parámetro visible como falso

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
// TextStyle widget constant
const TextStyle kstyle = TextStyle(fontSize: 60);
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
        ),
        body:
         
            // to center the child widget
            Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("one", style: kstyle),
               
              // Visibility widget to manage visibility
              Visibility(
                 
                // hiding the child widget
                visible: false,
                child: Text(
                  "two",
                  style: kstyle,
                ),
              ),
              Text(
                "three",
                style: kstyle,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Producción:

Explicación : en este caso, el segundo widget de texto en el cuerpo de la aplicación se envuelve con el widget de visibilidad y su parámetro visible se establece en falso , lo que hace que desaparezca de la pantalla sin dejar el espacio que ocupaba en el ejemplo anterior.   

Ejemplo 3: En este ejemplo, veremos cómo dejar espacio para el widget oculto o invisible.

import 'package:flutter/material.dart';
 
void main() {
runApp(MyApp());
}
 
// TextStyle widget constant
const TextStyle kstyle = TextStyle(fontSize: 60);
 
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
    home: Scaffold(
        appBar: AppBar(
        title: Text("GeeksForGeeks"),
        ),
        body:
         
            // to center the child widget
            Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
            Text("one", style: kstyle),
                 
            // Visibility widget to manage visibility
            Visibility(
                 
                // hiding the child widget
                visible: false,
                child: Text(
                "two",
                style: kstyle,
                ),
            ),
            Text(
                "three",
                style: kstyle,
            ),
            ],
        ),
        ),
    ),
    );
}
}

Producción:

Explicación: si observa la salida del segundo ejemplo, notará que el espacio que usa el widget de texto (hijo de la clase de visibilidad) no está allí. Por ejemplo, si queremos hacer desaparecer un widget pero el espacio que solía ocupar debe estar vacío en lugar de reemplazarlo con el siguiente widget, entonces podemos emplear el parámetro keepSize de la clase Visibility que también toma un valor booleano como parámetro. En lo anterior , keepSize se establece en verdadero. 

 Método 2: Uso de la clase de opacidad

El widget Opacity hace que su hijo sea parcialmente transparente. El valor de opacidad decide si el niño será pintado o no. El elemento secundario no se eliminará del árbol de widgets, pero aún ocupará espacio y tendrá interactividad.

Ejemplo 4:

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
// TextStyle widget constant
const TextStyle kstyle = TextStyle(fontSize: 60);
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          backgroundColor: Color.fromRGBO(15, 157, 88, 1),
        ),
        body:
         
            // to center the child widget
            Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("one", style: kstyle),
               
              // Opacity widget to manage visibility
              Opacity(
                 
                // hiding the child widget
                opacity: 0,
                child: Text(
                  "two",
                  style: kstyle,
                ),
              ),
              Text(
                "three",
                style: kstyle,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Producción:

Explicación: similar al segundo ejemplo, el widget principal en el cuerpo de la aplicación es Center , que contiene un widget de columna . El widget de columna contiene dos widgets de texto y entre ellos hay un widget de opacidad cuyo hijo es un widget de texto (‘dos’ es el objeto que contiene). Dentro de la clase Opacity , se emplea el parámetro opacity y se establece en 0 , lo que hace que el widget de texto sea invisible aquí, pero el lugar que solía ocupar todavía está allí. 

Método 3: Uso de la clase fuera del escenario

El widget de compensación presenta al niño como si estuviera en el árbol de widgets, pero no pinta nada. El widget secundario no tiene interactividad ni ocupa espacio.

Ejemplo 5:

Bloque de código

Producción:

Explicación: en este ejemplo, el segundo widget de texto en el cuerpo de la aplicación está envuelto con la clase Offstage . En el widget Offstage, offstage es una propiedad que se toma como un booleano como objeto y, en este caso, se establece en verdadero , lo que hace que el niño ( widget de texto aquí) sea invisible ya que no está pintado en la pantalla, incluso el espacio ocupado por el niño no está allí.