Flutter – Widget de envoltura

Wrap widget alinea los widgets de manera horizontal y vertical . Generalmente, usamos Filas y Columnas para hacer eso, pero si tenemos algunos widgets que no caben en la Fila/Columna , entonces nos dará un mensaje de desbordamiento (por ejemplo: derecho desbordado por 570 píxeles ). 

Constructor de la clase Wrap:

Wrap({Key key, 
Axis direction, 
WrapAlignment alignment, 
double spacing, 
WrapAlignment runAlignment, 
double runSpacing, 
WrapCrossAlignment crossAxisAlignment, 
TextDirection textDirection, 
VerticalDirection verticalDirection, 
List<Widget> children})

Propiedades:

• dirección : por defecto, el eje es horizontal, pero podemos hacerlo vertical cambiando el eje de Axis.horizontal a Axis.vertical .
• alineación : podemos establecer la propiedad de alineación para alinear los widgets. (por ejemplo: alineación: WrapAlignment.center ).
• espaciamiento : Podemos dar espacio entre los niños.
• runAlignment : muestra cómo se deben colocar las ejecuciones en el eje transversal. Por defecto, tenemos runAlignment como WrapAlignment.start .
• runSpacing : podemos dar runSpacing entre las ejecuciones. (por ejemplo: runSpacing:5.0 ).
• crossAxisAlignment : podemos alinear a los hijos entre sí en cross Axis .
• textDirection : podemos organizar a los niños en una fila usando textDirection (por ejemplo: textDirection: TextDirection.rtl para organizar de derecha a izquierda).
• clipBehaviour: esta propiedad toma Clip enum como el objeto para decidir si el contenido dentro del widget Wrap se recortará o no.
• children: la propiedad children toma una lista de widgets como el objeto que se muestra dentro del widget Wrap o debajo del widget Wrap en el árbol de widgets.
• verticalDirection: esta propiedad toma la enumeración VerticalDirection como objeto. Esta propiedad decide el orden en el que cada widget secundario se pintará en la pantalla en sentido vertical.
• runtimeType: la clase de tipo es el objeto asignado a la propiedad runtimeType . Determina el tipo del widget Wrap en el tiempo de ejecución.
• clave: esta propiedad decide cómo un widget reemplazará a otro widget en la pantalla.
• haskCode: esta propiedad toma un valor int como el objeto que representa el estado del widget.

Implementación con ejemplo:

dardo principal

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "GFG",
      theme: new ThemeData(
          primarySwatch: Colors.green
      ),
      debugShowCheckedModeBanner: false,
      home: WrapW()
    );
  }
}
 
class WrapW extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("GeeksForGeeks"),
      ),
      body: Wrap(
        // direction: Axis.vertical,
        // alignment: WrapAlignment.center,
        // spacing:8.0,
        // runAlignment:WrapAlignment.center,
        // runSpacing: 8.0,
        // crossAxisAlignment: WrapCrossAlignment.center,
        // textDirection: TextDirection.rtl,
        // verticalDirection: VerticalDirection.up,
        children: <Widget>[
          Container(
            color: Colors.blue,
            width: 100,
            height: 100,
            child:Center(child: Text("W1",textScaleFactor: 2.5,))
          ),
          Container(
            color: Colors.red,
            width: 100,
            height: 100,
            child:Center(child: Text("W2",textScaleFactor: 2.5,))
          ),
          Container(
            color: Colors.teal,
            width: 100,
            height: 100,
            child:Center(child: Text("W3",textScaleFactor: 2.5,))
          ),
          Container(
            color: Colors.indigo,
            width: 100,
            height: 100,
            child:Center(child: Text("W4",textScaleFactor: 2.5,))
          ),
          Container(
            color: Colors.orange,
            width: 100,
            height: 100,
            child:Center(child: Text("W5",textScaleFactor: 2.5,))
          ),
        ],
      ),
    );
  }
}

Explicación:

direction: Axis.horizontal // default

Producción: 

direction: Axis.vertical

Producción: 

alignment: WrapAlignment.center

Producción: 

alignment: WrapAlignment.center,
spacing:8.0,

Producción: 

alignment: WrapAlignment.center,
spacing:8.0,
runSpacing: 8.0,

Producción: 

spacing:8.0,
runSpacing: 8.0,
textDirection: TextDirection.rtl,

Producción:

spacing:8.0,
runSpacing: 8.0,
verticalDirection: VerticalDirection.up,

Producción: