Flutter: widget de restricciones de caja

BoxConstraints es un widget integrado en flutter SDK. Su funcionalidad es agregar restricciones de tamaño en su widget secundario. Por lo general, se toma como el objeto de la propiedad de restricciones en el widget ConstrainedBox . Viene repleto de muchas propiedades para la personalización. A continuación veremos todas sus propiedades con un ejemplo,

Constructor de BoxConstraints:

 Pinta una caja con las restricciones mencionadas.

const BoxConstraints(
{double minWidth: 0.0,
double maxWidth: double.infinity,
double minHeight: 0.0,
double maxHeight: double.infinity}
)

Constructor de BoxConstraints.expand : 

Pinta un cuadro que se expande para llenar su widget principal BoxConstriants.

const BoxConstraints.expand(
{double? width,
double? height}
)

Constructor de BoxConstraints.loose: 

Creó una caja que no crece más allá del tamaño mencionado. 

BoxConstraints.loose(
Size size
)

Constructor de BoxConstraints.tight:

 Creará una caja que no cambia su tamaño.

BoxConstraints.tight(
Size size
)

Constructor de BoxConstraints.tightfor:

 Pintará un cuadro en la pantalla con solo mencionar su alto y ancho.

const BoxConstraints.tightFor(
{double? width,
double? height}
)

Constructor de BoxConstraints.tightForFinite:

 Aquí obtenemos un cuadro cuya altura y ancho se establecen en infinito si no se mencionan.

const BoxConstraints.tightForFinite(
{double width: double.infinity,
double height: double.infinity}
)

Propiedades del widget BoxConstraints:

• más grande : esta propiedad toma la clase Size como el objeto para especificar el tamaño más grande que puede tener la caja.
• volteado: la propiedad volteada toma la clase BoxConstriants como el objeto para voltear las propiedades de alto y ancho del widget.
• hasBoundedHeight: esta propiedad toma un booleano como objeto para especificar si maxHeight tenía un límite superior.
• hasBoundedWidth: esta propiedad toma un booleano como objeto para especificar si maxWidth tenía un límite superior.
• hasInfiniteHeight: esta propiedad también toma un booleano como objeto para determinar si el cuadro tiene una altura infinita.
• hasInfiniteWidth: esta propiedad también toma un booleano como objeto para determinar si el cuadro tiene un ancho infinito.
• hasTightHeight: esta propiedad determina si la altura del cuadro se fijará en un solo valor o no tomando un booleano como objeto.
• hasTightWidth: esta propiedad determina si el ancho del cuadro se fijará en un solo valor o no tomando un valor booleano como objeto
• isNormalized: también toma un valor booleano como objeto para especificar si la altura y el ancho máximos y mínimos serán los mismos o no.
• isTight: La propiedad isTight también toma un valor booleano como objeto para determinar si las restricciones de la caja se fijarán a una sola altura y anchura o no.
• maxHeight: Esta propiedad toma un valor doble como objeto para controlar la altura máxima a la que puede llegar la caja.
• maxWith: esta propiedad toma un valor doble ya que el objeto para controlar el ancho máximo de la caja llegará.
• minHeight: Esta propiedad toma un valor doble ya que el objeto a controlar alcanzará el cuadro de altura mínima.
• minWidth: Esta propiedad toma el doble de valor que el objeto para controlar el ancho mínimo de la caja.
• más pequeño: esta propiedad controla el tamaño más pequeño que puede alcanzar la caja al tomar la clase Tamaño como objeto.

Ejemplo 1:

import 'package:flutter/material.dart';
  
//Material design library
void main() {
  runApp(
    //widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          child: Container(
            color: Colors.green,
            padding: EdgeInsets.all(20),
            child: Text(
              'GfG',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ), //Text
            /** BoxConstraints Widget **/
            constraints: BoxConstraints(
                minHeight: 50,
                minWidth: 50,
                maxHeight: 80,
                maxWidth: 80), //BoxConstraints
          ), //container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción:

Explicación: dentro del widget Contenedor , que es un elemento secundario del widget Center (widget principal en el cuerpo), la propiedad de restricciones contiene el widget BoxConstraints . Dentro de eso , minHeight y minWidth se establecen en 50 px y maxHeight y maxWidth se establecen en 80 px. El contenedor es de color verde y contiene texto de color blanco. Las restricciones que se establecen no permitirán que el contenedor tenga una altura y un ancho superior a 80 px y inferior a 50 px.

Ejemplo 2:

import 'package:flutter/material.dart';
  
//Material design library
void main() {
  runApp(
    //widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          child: Container(
              color: Colors.green,
              padding: EdgeInsets.all(20),
              /** BoxConstraints Widget **/
              constraints: BoxConstraints(
                  minHeight: 50,
                  minWidth: 50,
                  maxHeight: 80,
                  maxWidth: 80), //BoxConstraints
              child: Container(
                color: Colors.greenAccent[400],
                child: Text(
                  'GfG',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ), //Text
                constraints: BoxConstraints.expand(height: 50, width: 50),
              )), //container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción:

Explicación: esta aplicación de aleteo es similar a la anterior, excepto por el hecho de que el widget secundario en el contenedor , que era un texto , se reemplaza por otro widget de contenedor . Al segundo contenedor se le asigna un color de acento verde [400], y el elemento secundario es un widget de texto . La propiedad de restricciones en el segundo contenedor toma BoxConstraints.expand como el objeto, con su propiedad de alto y ancho establecida en 50 px cada una. El BoxConstraints.expands se expande en su BoxConstraints principal a una altura y un anchode 50px. Y por el hecho de que se expande, siempre parte del centro.