FittedBox en Flutter

Flutter se trata de widgets. Hay muchos widgets que se utilizan para posicionar y diseñar el texto. En este artículo, aprenderemos sobre el widget FittedBox . FittedBox es un widget muy útil que escala y posiciona a su elemento secundario dentro de sí mismo de acuerdo con el ajuste y la alineación. Considere una aplicación, en la que debe recibir información del usuario y, en un escenario determinado, el usuario ingresa una entrada grande que se desborda y dispersa otros widgets. Como muchos de los widgets son dinámicos, lo que significa que pueden crecer y reducir su tamaño, de acuerdo con el tamaño de su widget secundario. Entonces, en este caso, la interfaz de usuario no sería adaptable. Para superar este problema, podemos usar el widget FittedBox.

FittedBox restringe el crecimiento de sus widgets secundarios más allá de cierto límite. Los vuelve a escalar según el tamaño disponible. Por ejemplo, si el texto se muestra dentro de un contenedor y el usuario debe ingresar el texto. Si el usuario ingresa una gran string de texto, el contenedor crecerá más allá de su tamaño asignado. Pero, si lo envolvemos con FittedBox, se ajustaría al texto según el tamaño disponible. Para una cuerda grande, reduciría su tamaño y, por lo tanto, cabría en el contenedor. 

Syntax:

FittedBox({
    Key key,
    BoxFit fit: BoxFit.contain,
    AlignmentGeometry alignment: Alignment.center,
    Widget child
     }
)

Propiedades:

1. ajuste: Esta propiedad es de tipo BoxFit . Se utiliza para describir cómo se inscribe una caja en otra caja. Se adapta a la semántica de dimensionamiento. Ahora, veremos sus propiedades:

• contener: al usar esta propiedad, contenemos la fuente por completo en el cuadro de destino, sin importar cuán grande sea.
• cover: hace que la fuente sea lo más pequeña posible, sin dejar de cubrir todo el cuadro de destino.
• relleno:   llena todo el cuadro de destino, lo que afecta la relación de aspecto de la fuente.
• fitHeight: Garantiza que se muestre la altura completa de la fuente, incluso si desborda el cuadro de destino horizontalmente.
• fitWidth: asegura que se muestre el ancho completo de la fuente, incluso si desborda el cuadro de destino verticalmente.
• ninguno: alinea la fuente dentro del cuadro de destino y elimina cualquier parte adicional de la fuente, si la hay, ya que no cambia el tamaño de la imagen.

2. alineación: esta propiedad se usa para alinear el widget secundario en FittedBox. Varios atributos para esta propiedad son bottomCenter, bottomLeft, bottomRight, center, centerLeft, centerRight, topCenter, topLeft, topRight. Como sugiere el nombre, el widget secundario se alinea de acuerdo con una de estas propiedades. También puede asignar coordenadas de posición para alinear los widgets.

 3. child: Esta es la propiedad requerida en FittedBox. El widget que queremos envolver en FittedBox se asigna como hijo a FittedBox. Solo se necesita un widget secundario. Cualquier widget que muestre algo en la pantalla, preferiblemente texto, puede envolverse con FittedBox.

Ejemplo:

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              SizedBox(height: 10),
  
              // Without FittedBox
  
              Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 2,
                  color: Colors.green
                  )
                ),
                child: Text('This is explanation'),
                width: 80,
                height: 20,
              ),
  
              SizedBox(
                height: 12,
              ),
  
              // With FittedBox
  
              Container(
                decoration: BoxDecoration(
                  border: Border.all(width: 2,
                  color: Colors.green),
                ),
                child: FittedBox(
                  child: Text('This is explanation')
                ),
                width: 80,
                height: 20,
              ),
  
              SizedBox(
                height: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Producción:

Explicación:

En el ejemplo anterior, hemos tomado dos contenedores para demostrar el uso de FittedBox. Ambos contenedores tienen la misma altura y el mismo ancho. El primer contenedor no está envuelto en FittedBox y el texto «Esta es una explicación» se le da como elemento secundario. Dado que el contenedor tiene una altura y un ancho limitados, solo puede acomodar texto parcial. Pero, en el segundo caso, hemos envuelto el widget de texto con FittedBox y las mismas restricciones también se pasan a este contenedor. Vemos aquí que todo el texto está acomodado en el contenedor. Es porque FittedBox reduce el texto para que quepa en el Contenedor.

Es muy útil en ese escenario cuando tiene que limitar la expansión o reducción del widget, pero también tiene que ajustar los widgets secundarios de acuerdo con esas restricciones, ya que mejora la interfaz de usuario.