Flutter para desarrolladores web

Aprende cómo aplicar tus conocimientos de desarrollo Web al crear aplicaciones con Flutter.

Esta página está dirigida a usuarios que están familiarizados con la sintaxis de HTML y CSS para organizar los componentes de la UI de una aplicación. Mapea fragmentos de código HTML/CSS con sus equivalentes de código Flutter/Dart.

Flutter es un framework para compilar aplicaciones multiplataforma que utiliza el lenguaje de programación Dart. Para entender algunas diferencias entre programar con Dart y programar con JavaScript, consulta Aprender Dart como desarrollador de JavaScript.

Una de las diferencias fundamentales entre diseñar un layout web y un layout de Flutter, es aprender cómo funcionan las restricciones (constraints), y cómo se dimensionan y posicionan los widgets. Para aprender más, consulta Entender las restricciones.

Los ejemplos asumen:

El documento HTML comienza con <!DOCTYPE html>, y el modelo de caja de CSS para todos los elementos HTML se establece en border-box, para mantener la consistencia con el modelo de Flutter.
css
```
{
    box-sizing: border-box;
}
```
En Flutter, el estilo predeterminado del texto 'Lorem ipsum' se define mediante la variable bold24Roboto de la siguiente manera, para mantener la sintaxis simple:
dart
```
TextStyle bold24Roboto = const TextStyle(
  color: Colors.white,
  fontSize: 24,
  fontWeight: FontWeight.bold,
);
```

Los siguientes ejemplos muestran cómo realizar las tareas de layout de UI más comunes.

El estilo, tamaño y otros atributos de fuente del texto que CSS maneja con las propiedades font y color son propiedades individuales de un hijo TextStyle de un widget Text.

Para la propiedad text-align en CSS que se utiliza para alinear texto, existe una propiedad textAlign en el widget Text.

Tanto en HTML como en Flutter, los elementos o widgets hijos se anclan en la parte superior izquierda por defecto.

css

<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Georgia;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: const Text(
    'Lorem ipsum',
    style: TextStyle(
      fontFamily: 'Georgia',
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
    textAlign: TextAlign.center,
  ),
);

En Flutter, estableces el color de fondo usando la propiedad color o la propiedad decoration de un Container. Sin embargo, no puedes proporcionar ambas, ya que potencialmente daría como resultado que la decoración se dibuje sobre el color de fondo. Se debe preferir la propiedad color cuando el fondo es un color simple. Para otros casos, como degradados o imágenes, usa la propiedad decoration.

Los ejemplos de CSS utilizan los colores hexadecimales equivalentes a la paleta de colores de Material.

css

<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Text(
    'Lorem ipsum',
    style: bold24Roboto,
  ),
);

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
  child: Text(
    'Lorem ipsum',
    style: bold24Roboto,
  ),
);

Un widget Center centra a su hijo tanto horizontal como verticalmente.

Para lograr un efecto similar en CSS, el elemento padre utiliza un comportamiento de visualización flex o table-cell. Los ejemplos de esta página muestran el comportamiento flex.

css

<div class="grey-box">
  Lorem ipsum
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Text(
      'Lorem ipsum',
      style: bold24Roboto,
    ),
  ),
);

Para especificar el ancho de un widget Container usa su propiedad width. Este es un ancho fijo, a diferencia de la propiedad max-width de CSS que ajusta el ancho del contenedor hasta un valor máximo. Para imitar ese efecto en Flutter, usa la propiedad constraints del Container. Crea un nuevo widget BoxConstraints con un minWidth o maxWidth.

Para los Containers anidados, si el ancho del padre es menor que el del hijo, el Container hijo se dimensiona a sí mismo para coincidir con el padre.

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    width: 100%;
    max-width: 240px;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      width: 240, // max-width is 240
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

Los siguientes ejemplos muestran cómo realizar operaciones más complejas en la posición, tamaño y fondo de los widgets.

Por defecto, los widgets se posicionan en relación con su padre.

Para especificar una posición absoluta para un widget como coordenadas x-y, anídalo en un widget Positioned que, a su vez, esté anidado en un widget Stack.

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    position: relative;
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    position: absolute;
    top: 24px;
    left: 24px;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Stack(
    children: [
      Positioned(
        // red box
        left: 24,
        top: 24,
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.red[400],
          ),
          child: Text(
            'Lorem ipsum',
            style: bold24Roboto,
          ),
        ),
      ),
    ],
  ),
);

Para rotar un widget, anídalo en un widget Transform. Usa las propiedades alignment y origin del widget Transform para especificar el origen de transformación (fulcro) en términos relativos y absolutos, respectivamente.

Para una rotación 2D simple, en la que el widget se rota sobre el eje Z, crea un nuevo objeto identidad Matrix4 y usa su método rotateZ() para especificar el factor de rotación usando radianes (grados × π / 180).

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    transform: rotate(15deg);
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()..rotateZ(15 * 3.1415927 / 180),
      child: Container(
        // red box
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        child: Text(
          'Lorem ipsum',
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
      ),
    ),
  ),
);

Para escalar un widget hacia arriba o hacia abajo, anídalo en un widget Transform . Usa las propiedades alignment y origin del widget Transform para especificar el origen de transformación (fulcro) en términos relativos o absolutos, respectivamente.

Para una operación de escalado simple a lo largo del eje x, crea un nuevo objeto identidad Matrix4 y usa su método scale() para especificar el factor de escala.

Cuando escalas un widget padre, sus widgets hijos se escalan en consecuencia.

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    transform: scale(1.5);
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Transform(
      alignment: Alignment.center,
      transform: Matrix4.identity()..scaleByDouble(1.5, 1.5, 1.5, 1.5),
      child: Container(
        // red box
        padding: const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: Colors.red[400],
        ),
        child: Text(
          'Lorem ipsum',
          style: bold24Roboto,
          textAlign: TextAlign.center,
        ),
      ),
    ),
  ),
);

Para aplicar un degradado lineal al fondo de un widget, anídalo en un widget Container . Luego, usa la propiedad decoration del widget Container para crear un objeto BoxDecoration, y usa la propiedad gradient de BoxDecoration para transformar el relleno de fondo.

El "ángulo" del degradado se basa en los valores de Alignment (x, y):

Si los valores inicial y final de x son iguales, el degradado es vertical (0° | 180°).
Si los valores inicial y final de y son iguales, el degradado es horizontal (90° | 270°).

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    padding: 16px;
    color: #ffffff;
    background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment(0.0, 0.6),
          colors: <Color>[
            Color(0xffef5350),
            Color(0x00ef5350),
          ],
        ),
      ),
      padding: const EdgeInsets.all(16),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    padding: 16px;
    color: #ffffff;
    background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment(-1.0, 0.0),
          end: Alignment(0.6, 0.0),
          colors: <Color>[
            Color(0xffef5350),
            Color(0x00ef5350),
          ],
        ),
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

Los siguientes ejemplos muestran cómo crear y personalizar formas.

Para redondear las esquinas de una forma rectangular, usa la propiedad borderRadius de un objeto BoxDecoration . Crea un nuevo objeto BorderRadius que especifique el radio para redondear cada esquina.

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    border-radius: 8px;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red circle
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
        borderRadius: const BorderRadius.all(
          Radius.circular(8),
        ),
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

En CSS puedes especificar el desplazamiento (offset) de la sombra y el desenfoque (blur) de forma abreviada, usando la propiedad box-shadow. Este ejemplo muestra dos sombras de caja, con las propiedades:

xOffset: 0px, yOffset: 2px, blur: 4px, color: black @80% alpha
xOffset: 0px, yOffset: 06x, blur: 20px, color: black @50% alpha

En Flutter, cada propiedad y valor se especifica por separado. Usa la propiedad boxShadow de BoxDecoration para crear una lista de widgets BoxShadow. Puedes definir uno o varios widgets BoxShadow, que se pueden apilar para personalizar la profundidad de la sombra, el color, etcétera.

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
              0 6px 20px rgba(0, 0, 0, 0.5);
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  margin: const EdgeInsets.only(bottom: 16),
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
        boxShadow: const <BoxShadow>[
          BoxShadow(
            color: Color(0xcc000000),
            offset: Offset(0, 2),
            blurRadius: 4,
          ),
          BoxShadow(
            color: Color(0x80000000),
            offset: Offset(0, 6),
            blurRadius: 20,
          ),
        ],
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

Crear un círculo en CSS requiere el truco de aplicar un border-radius del 50% a los cuatro lados de un rectángulo, aunque existen las formas básicas (basic shapes).

Aunque este enfoque es compatible con la propiedad borderRadius de BoxDecoration, Flutter proporciona una propiedad shape con el enum BoxShape para este propósito.

css

<div class="grey-box">
  <div class="red-circle">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-circle {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    text-align: center;
    width: 160px;
    height: 160px;
    border-radius: 50%;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red circle
      decoration: BoxDecoration(
        color: Colors.red[400],
        shape: BoxShape.circle,
      ),
      padding: const EdgeInsets.all(16),
      width: 160,
      height: 160,
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
        textAlign: TextAlign.center,
      ),
    ),
  ),
);

Los siguientes ejemplos muestran cómo especificar fuentes y otros atributos de texto. También muestran cómo transformar cadenas de texto, personalizar el espaciado y crear fragmentos de texto.

En CSS, especificas la cantidad de espacio en blanco entre cada letra o palabra dando un valor de longitud para las propiedades letter-spacing y word-spacing, respectivamente. La cantidad de espacio puede estar en px, pt, cm, em, etc.

En Flutter, especificas el espacio en blanco como píxeles lógicos (se permiten valores negativos) para las propiedades letterSpacing y wordSpacing de un hijo TextStyle de un widget Text.

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    letter-spacing: 4px;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      child: const Text(
        'Lorem ipsum',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.w900,
          letterSpacing: 4,
        ),
      ),
    ),
  ),
);

Un widget Text te permite mostrar texto con algunas características de formato. Para mostrar texto que utiliza múltiples estilos (en este ejemplo, una sola palabra con énfasis), usa un widget RichText en su lugar. Su propiedad text puede especificar uno o más objetos TextSpan que se pueden diseñar individualmente.

En el siguiente ejemplo, "Lorem" está en un TextSpan con el estilo de texto predeterminado (heredado), e "ipsum" está en un TextSpan separado con estilo personalizado.

css

<div class="grey-box">
  <div class="red-box">
    Lorem <em>ipsum</em>
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
}
.red-box em {
    font: 300 48px Roboto;
    font-style: italic;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: const EdgeInsets.all(16),
      child: RichText(
        text: TextSpan(
          style: bold24Roboto,
          children: const <TextSpan>[
            TextSpan(text: 'Lorem '),
            TextSpan(
              text: 'ipsum',
              style: TextStyle(
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                fontSize: 48,
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

Un fragmento de texto muestra las líneas iniciales de texto en un párrafo, y maneja el desbordamiento (overflow) del texto, a menudo utilizando puntos suspensivos.

En Flutter, usa la propiedad maxLines de un widget Text para especificar el número de líneas que se incluirán en el fragmento, y la propiedad overflow para manejar el texto desbordado.

css

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum dolor sit amet, consec etur
  </div>
</div>

.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

dart

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: const EdgeInsets.all(16),
      child: Text(
        'Lorem ipsum dolor sit amet, consec etur',
        style: bold24Roboto,
        overflow: TextOverflow.ellipsis,
        maxLines: 1,
      ),
    ),
  ),
);

¿Te resultó útil el contenido de esta página?

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-11. Ver código fuente oreportar un problema.

Flutter para desarrolladores web

Realizar operaciones básicas de layout

Dar estilo y alinear texto

Establecer el color de fondo

Centrar componentes

Establecer el ancho del contenedor

Manipular la posición y el tamaño

Establecer la posición absoluta

Rotar componentes

Escalar componentes

Aplicar un degradado lineal

Degradado vertical

Degradado horizontal

Manipular formas

Redondear esquinas

Agregar sombras de caja (box shadows)

Crear círculos y elipses

Manipular texto

Ajustar el espaciado del texto

Realizar cambios de formato en línea (inline)

Crear fragmentos de texto