Saltar al contenido principal

BorderRadius predeterminado de los diálogos

El BorderRadius por defecto de los widgets Dialog está cambiando.

Resumen

#

Las instancias de Dialog, así como también SimpleDialog, AlertDialog y showTimePicker, ahora tienen una forma (shape) por defecto de un RoundedRectangleBorder con un BorderRadius de 4.0 píxeles. Esto coincide con las especificaciones actuales de Material Design. Antes de este cambio, el comportamiento por defecto para el BorderRadius de Dialog.shape era de 2.0 píxeles.

Contexto

#

Los Dialogs y sus subclases asociadas (SimpleDialog, AlertDialog y showTimePicker), se ven ligeramente diferentes ya que el radio del borde es mayor. Si tienes imágenes maestras de archivos golden que tienen la renderización previa del Dialog con un radio de borde de 2.0 píxeles, tus pruebas de widget (widget tests) fallarán. Estas imágenes de archivos golden pueden ser actualizadas para reflejar la nueva renderización, o puedes actualizar tu código para mantener el comportamiento original.

El diálogo showDatePicker ya coincidía con esta especificación y no se ve afectado por este cambio.

Guía de migración

#

Si prefieres mantener la forma anterior, puedes usar la propiedad shape de tu Dialog para especificar el radio original de 2 píxeles.

Configurar la propiedad shape de Dialog al radio original:

dart
import 'package:flutter/material.dart';

void main() => runApp(Foo());

class Foo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                content: Text('Alert!'),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(2))),
              );
            },
          );
        }),
      ),
    );
  }
}

Si prefieres el nuevo comportamiento y tienes pruebas de archivo golden fallidas, puedes actualizar tus archivos golden maestros usando este comando:

flutter test --update-goldens

Timeline

#

Llegó en la versión: 1.20.0-0.0.pre
En la versión estable: 1.20

Referencias

#

Documentación de la API:

PR relevante: