Flutter – Widget de cuadro restringido

ConstrainedBox es un widget integrado en flutter SDK. Su función es agregar restricciones de tamaño a sus widgets secundarios. Es bastante útil si queremos que un contenedor o una imagen no supere una determinada altura y anchura. También es bueno mantener el texto en un diseño ajustado haciendo que el widget Text sea un elemento secundario en ConstrainedBox . Esta funcionalidad también se puede encontrar en el widget SizedBox o de lo contrario.

Constructor de la clase ConstrainedBox:

ConstrainedBox(
{Key key,
@required BoxConstraints constraints,
Widget child}
)

Propiedad del widget ConstrianedBox:

• restricciones: esta propiedad toma la clase BoxConstrain como el objeto. Pone restricciones a su widget secundario usando las funciones de la clase BoxConstraints .

Ejemplo 1: 

import 'package:flutter/material.dart';
 
//imported googles material design library
void main() {
  runApp(
    /**Our App Widget Tree Starts Here**/
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          /** ConstrainedBox Widget **/
          child: ConstrainedBox(
            constraints: BoxConstraints.expand(height: 200, width: 200),
            child: Container(
              color: Colors.green,
            ), //Container widget
          ), //ConstrainedBox
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción:

Explicación: en esta aplicación flutter podemos ver que el widget ConstrainedBox se usa para restringir la altura y el ancho de su widget secundario, que es un contenedor . Aquí hemos usado BoxConstraines.expanded con el parámetro alto y ancho establecido en 200. Podemos notar que los parámetros alto y ancho no se mencionan en el widget Contenedor, solo se expande para llenar su widget principal.

Ejemplo 2:

import 'package:flutter/material.dart';
 
//imported googles material design library
void main() {
  runApp(
    /**Our App Widget Tree Starts Here**/
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          /** ConstrainedBox Widget **/
          child: ConstrainedBox(
            constraints: BoxConstraints.expand(height: 200, width: 200),
            child: Text(
              'A Computer Science portal for geeks. It contains well
              written,well thought and well explained computer science
              and programmingarticles, quizzes, interview experiences
              and much more.',
              style: TextStyle(fontSize: 15),
            ), //Text
          ), //ConstrainedBox
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción:

Explicación: en esta aplicación de aleteo, el widget ConstrainedBox se usa para envolver el texto en un cuadro de 200 X 200. Aquí también el texto se expande para llenar el cuadro como BoxConstraints . Se utiliza expandir . Esta aplicación del widget ConstrainedBox es muy útil cuando queremos que nuestro texto no se salga de un área determinada.