AppRadius class

Sistema de border radius para mantener consistencia visual en bordes redondeados

AppRadius proporciona una escala unificada de redondez basada en AppSizes, con múltiples formatos listos para usar en diferentes contextos de Flutter. Esto garantiza coherencia visual y facilita el diseño de interfaces modernas.

📦 Formatos Disponibles

  1. Valores base (double) - Para usar con BorderRadius.circular()
  2. BorderRadius - Listo para BoxDecoration.borderRadius
  3. Radius - Para esquinas individuales con BorderRadius.only()
  4. RoundedRectangleBorder - Para shape en botones y cards
  5. Bordes parciales - Top, bottom, left, right

📏 Escala de Radius

La escala completa (basada en AppSizes):

  • none (0.0) → Esquinas cuadradas
  • xxs (2.0) → Mínimo redondeo
  • xs (4.0) → Extra pequeño
  • sm (6.0) → Pequeño (chips, tags)
  • smd (8.0) → Pequeño-mediano (botones pequeños)
  • mds (10.0) → Mediano-pequeño
  • md (12.0) → Mediano ⭐ (estándar componentes)
  • mdl (14.0) → Mediano-grande
  • lg (16.0) → Grande (cards importantes)
  • lgx (18.0) → Grande-extra
  • xl (20.0) → Extra grande
  • xxl (24.0) → Extra extra grande
  • xxxl (28.0) → Triple extra grande
  • huge (32.0) → Enorme
  • massive (40.0) → Masivo
  • giant (48.0) → Gigante
  • circular (999.0) → Completamente circular (pill)

🎨 Uso Básico

// ✅ Valores base (double) - Con BorderRadius.circular()
Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(AppRadius.md),  // 12.0
  ),
)

// ✅ BorderRadius - Directo en BoxDecoration
Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: AppRadius.borderLg,  // BorderRadius.circular(16.0)
  ),
)

// ✅ Radius - Para esquinas individuales
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.only(
      topLeft: AppRadius.radiusMd,     // Radius.circular(12.0)
      topRight: AppRadius.radiusLg,    // Radius.circular(16.0)
    ),
  ),
)

// ✅ RoundedRectangleBorder - Para botones
ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: AppRadius.shapeMd,  // RoundedRectangleBorder
  ),
  child: Text('Botón'),
)

// ✅ Card con shape
Card(
  shape: AppRadius.shapeLg,  // RoundedRectangleBorder
  child: Content(),
)

// ✅ Bordes parciales - Solo arriba
Container(
  decoration: BoxDecoration(
    borderRadius: AppRadius.borderTopLg,  // Solo esquinas superiores
  ),
)

// ✅ Botón circular (pill)
ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: AppRadius.shapeCircular,  // Completamente circular
  ),
  child: Text('Pill Button'),
)

📱 Patrones Comunes por Componente

Botones:

// Botón estándar
ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: AppRadius.shapeMd,  // 12.0 - Redondez moderada
  ),
)

// Botón pill
ElevatedButton(
  style: ElevatedButton.styleFrom(
    shape: AppRadius.shapeCircular,  // Completamente circular
  ),
)

Cards:

// Card estándar
Card(
  shape: AppRadius.shapeMd,  // 12.0 - Coherente con Material
  child: Content(),
)

// Card destacada
Card(
  shape: AppRadius.shapeLg,  // 16.0 - Más suave y moderna
  child: Content(),
)

Inputs:

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: AppRadius.borderSmd,  // 8.0 - Sutil
    ),
  ),
)

Bottom Sheets:

// Solo esquinas superiores redondeadas
Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: AppRadius.borderTopLg,  // Solo arriba
  ),
)

Imágenes:

ClipRRect(
  borderRadius: AppRadius.borderMd,  // 12.0
  child: Image.network('url'),
)

Chips y Tags:

Container(
  decoration: BoxDecoration(
    borderRadius: AppRadius.borderSm,  // 6.0 - Compacto
  ),
)

🎯 Guía de Selección

Por Tamaño del Componente:

  • Elementos pequeños (< 40px) → xs a sm (4-6)
  • Elementos medianos (40-80px) → smd a md (8-12) ⭐
  • Elementos grandes (80-150px) → lg a xl (16-20)
  • Elementos muy grandes (> 150px) → xxl a huge (24-32)

Por Propósito:

  • Botones estándar → md (12.0)
  • Botones pill → circular (999.0)
  • Cards → md a lg (12-16)
  • Inputs → smd a md (8-12)
  • Modals → lg a xl (16-20)
  • Images → md a lg (12-16)
  • Chips/tags → sm a smd (6-8)

Por Estilo:

  • Minimalista/corporativo → xs a sm (4-6)
  • Moderno/estándar → md a lg (12-16) ⭐
  • Amigable/casual → lg a xxl (16-24)
  • Juguetón → xxl a huge (24-32)

💡 Recomendaciones

  1. Consistencia: Usa la misma redondez para componentes similares
  2. Proporción: El radius debe ser proporcional al tamaño del elemento
  3. No exageres: Demasiada redondez puede verse poco profesional
  4. Material Design: md (12.0) es el estándar de Material 3
  5. Accesibilidad: Los bordes redondeados mejoran la jerarquía visual
  6. Performance: Los bordes muy redondeados pueden afectar rendimiento

❌ Evitar

// ❌ NO uses valores arbitrarios
BorderRadius.circular(13.7)
Radius.circular(17.3)

// ✅ USA la escala predefinida
AppRadius.borderMd      // BorderRadius.circular(12.0)
AppRadius.radiusLg      // Radius.circular(16.0)

// ❌ NO mezcles estilos inconsistentes
Card(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)))
ElevatedButton(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(19)))

// ✅ USA escalas consistentes
Card(shape: AppRadius.shapeMd)          // 12.0
ElevatedButton(shape: AppRadius.shapeMd) // 12.0

🔗 Ver también

📚 Referencias

Properties

hashCode → int
The hash code for this object.
no setterinherited
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited

Methods

noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() → String
A string representation of this object.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited

Static Properties

borderBottomHuge → BorderRadius
Esquinas inferiores redondeadas - 32.0
no setter
borderBottomLg → BorderRadius
Esquinas inferiores redondeadas - 16.0
no setter
borderBottomMd → BorderRadius
Esquinas inferiores redondeadas - 12.0
no setter
borderBottomSm → BorderRadius
Esquinas inferiores redondeadas - 6.0
no setter
borderBottomSmd → BorderRadius
Esquinas inferiores redondeadas - 8.0
no setter
borderBottomXl → BorderRadius
Esquinas inferiores redondeadas - 20.0
no setter
borderBottomXs → BorderRadius
Esquinas inferiores redondeadas - 4.0
no setter
borderBottomXxl → BorderRadius
Esquinas inferiores redondeadas - 24.0
no setter
borderCircular → BorderRadius
Completamente circular - 999.0 Para botones tipo "pill" o elementos circulares
no setter
borderGiant → BorderRadius
Gigante - 48.0
no setter
borderHuge → BorderRadius
Enorme - 32.0
no setter
borderLeftLg → BorderRadius
Esquinas izquierdas redondeadas - 16.0
no setter
borderLeftMd → BorderRadius
Esquinas izquierdas redondeadas - 12.0
no setter
borderLeftSm → BorderRadius
Esquinas izquierdas redondeadas - 6.0
no setter
borderLeftSmd → BorderRadius
Esquinas izquierdas redondeadas - 8.0
no setter
borderLeftXl → BorderRadius
Esquinas izquierdas redondeadas - 20.0
no setter
borderLeftXs → BorderRadius
Esquinas izquierdas redondeadas - 4.0
no setter
borderLg → BorderRadius
Grande - 16.0 Bueno para cards y containers importantes
no setter
borderLgx → BorderRadius
Grande-extra - 18.0
no setter
borderMassive → BorderRadius
Masivo - 40.0
no setter
borderMd → BorderRadius
Mediano - 12.0 Valor estándar para la mayoría de componentes
no setter
borderMdl → BorderRadius
Mediano-grande - 14.0
no setter
borderMds → BorderRadius
Mediano-pequeño - 10.0
no setter
borderNone → BorderRadius
Sin radio - 0.0
no setter
borderRightLg → BorderRadius
Esquinas derechas redondeadas - 16.0
no setter
borderRightMd → BorderRadius
Esquinas derechas redondeadas - 12.0
no setter
borderRightSm → BorderRadius
Esquinas derechas redondeadas - 6.0
no setter
borderRightSmd → BorderRadius
Esquinas derechas redondeadas - 8.0
no setter
borderRightXl → BorderRadius
Esquinas derechas redondeadas - 20.0
no setter
borderRightXs → BorderRadius
Esquinas derechas redondeadas - 4.0
no setter
borderSm → BorderRadius
Pequeño - 6.0 Bueno para chips y tags pequeños
no setter
borderSmd → BorderRadius
Pequeño-mediano - 8.0 Común en botones pequeños
no setter
borderTopHuge → BorderRadius
Esquinas superiores redondeadas - 32.0
no setter
borderTopLg → BorderRadius
Esquinas superiores redondeadas - 16.0
no setter
borderTopMd → BorderRadius
Esquinas superiores redondeadas - 12.0
no setter
borderTopSm → BorderRadius
Esquinas superiores redondeadas - 6.0
no setter
borderTopSmd → BorderRadius
Esquinas superiores redondeadas - 8.0
no setter
borderTopXl → BorderRadius
Esquinas superiores redondeadas - 20.0
no setter
borderTopXs → BorderRadius
Esquinas superiores redondeadas - 4.0
no setter
borderTopXxl → BorderRadius
Esquinas superiores redondeadas - 24.0
no setter
borderXl → BorderRadius
Extra grande - 20.0 Para elementos destacados
no setter
borderXs → BorderRadius
Extra pequeño - 4.0 Ideal para elementos muy sutiles
no setter
borderXxl → BorderRadius
Extra extra grande - 24.0
no setter
borderXxs → BorderRadius
Extra extra pequeño - 2.0
no setter
borderXxxl → BorderRadius
Extra extra extra grande - 28.0
no setter
radiusCircular → Radius
Completamente circular - 999.0
no setter
radiusGiant → Radius
Gigante - 48.0
no setter
radiusHuge → Radius
Enorme - 32.0
no setter
radiusLg → Radius
Grande - 16.0
no setter
radiusLgx → Radius
Grande-extra - 18.0
no setter
radiusMassive → Radius
Masivo - 40.0
no setter
radiusMd → Radius
Mediano - 12.0
no setter
radiusMdl → Radius
Mediano-grande - 14.0
no setter
radiusMds → Radius
Mediano-pequeño - 10.0
no setter
radiusNone → Radius
Sin radio - 0.0
no setter
radiusSm → Radius
Pequeño - 6.0
no setter
radiusSmd → Radius
Pequeño-mediano - 8.0
no setter
radiusXl → Radius
Extra grande - 20.0
no setter
radiusXs → Radius
Extra pequeño - 4.0
no setter
radiusXxl → Radius
Extra extra grande - 24.0
no setter
radiusXxs → Radius
Extra extra pequeño - 2.0
no setter
radiusXxxl → Radius
Extra extra extra grande - 28.0
no setter
shapeCircular → RoundedRectangleBorder
Forma circular - 999.0
no setter
shapeGiant → RoundedRectangleBorder
Gigante - 48.0
no setter
shapeHuge → RoundedRectangleBorder
Enorme - 32.0
no setter
shapeLg → RoundedRectangleBorder
Grande - 16.0
no setter
shapeLgx → RoundedRectangleBorder
Grande-extra - 18.0
no setter
shapeMassive → RoundedRectangleBorder
Masivo - 40.0
no setter
shapeMd → RoundedRectangleBorder
Mediano - 12.0
no setter
shapeMdl → RoundedRectangleBorder
Mediano-grande - 14.0
no setter
shapeMds → RoundedRectangleBorder
Mediano-pequeño - 10.0
no setter
shapeNone → RoundedRectangleBorder
Sin radio - 0.0
no setter
shapeSm → RoundedRectangleBorder
Pequeño - 6.0
no setter
shapeSmd → RoundedRectangleBorder
Pequeño-mediano - 8.0
no setter
shapeXl → RoundedRectangleBorder
Extra grande - 20.0
no setter
shapeXs → RoundedRectangleBorder
Extra pequeño - 4.0
no setter
shapeXxl → RoundedRectangleBorder
Extra extra grande - 24.0
no setter
shapeXxs → RoundedRectangleBorder
Extra extra pequeño - 2.0
no setter
shapeXxxl → RoundedRectangleBorder
Extra extra extra grande - 28.0
no setter

Static Methods

onlyBottom(double radius) → BorderRadius
Crea un BorderRadius con solo las esquinas inferiores redondeadas radius - El radio a aplicar en las esquinas inferiores
onlyLeft(double radius) → BorderRadius
Crea un BorderRadius con solo las esquinas izquierdas redondeadas radius - El radio a aplicar en las esquinas izquierdas
onlyRight(double radius) → BorderRadius
Crea un BorderRadius con solo las esquinas derechas redondeadas radius - El radio a aplicar en las esquinas derechas
onlyTop(double radius) → BorderRadius
Crea un BorderRadius con solo las esquinas superiores redondeadas radius - El radio a aplicar en las esquinas superiores

Constants

circular → const double
Completamente circular (pill shape) - 999.0 Para botones tipo "pill" o elementos circulares
giant → const double
Gigante - 48.0
huge → const double
Enorme - 32.0
lg → const double
Grande - 16.0 Bueno para cards y containers importantes
lgx → const double
Grande-extra - 18.0
massive → const double
Masivo - 40.0
md → const double
Mediano - 12.0 Valor estándar para la mayoría de componentes
mdl → const double
Mediano-grande - 14.0
mds → const double
Mediano-pequeño - 10.0
none → const double
Sin radio (esquinas cuadradas) - 0.0
sm → const double
Pequeño - 6.0 Bueno para chips y tags pequeños
smd → const double
Pequeño-mediano - 8.0 Común en botones pequeños
xl → const double
Extra grande - 20.0 Para elementos destacados
xs → const double
Extra pequeño - 4.0 Ideal para elementos muy sutiles
xxl → const double
Extra extra grande - 24.0
xxs → const double
Extra extra pequeño - 2.0
xxxl → const double
Extra extra extra grande - 28.0