Os widgets de layout son esenciais en Flutter para organizar e posicionar os elementos da interface de usuario. Son como os “contedores” ou “organizadores” que definen como se distribúen os teus widgets visuais na pantalla.

🎯 Obxectos clave: EdgeInsets, Colors, MainAxisAlignment, CrossAxisAlignment, FloatingActionButtonLocation #

Moitas propiedades en Flutter (como padding, margin, color, mainAxisAlignment, etc.) precisan obxectos especiais para funcionar correctamente. Aquí explicamos os máis habituais.

📏 EdgeInsets: Definir marxes e espazos interiores #

EdgeInsets é unha clase que se usa para indicar espazos arredor dun widget, ben sexa:

• padding → espazo interno (dentro do widget)
• margin → espazo externo (fora do widget)

📌 Métodos máis usados #

🧪 Exemplo completo: #

Container(
  margin: EdgeInsets.all(20),
  padding: EdgeInsets.symmetric(horizontal: 12),
  color: Colors.green,
  child: const Text('Exemplo con EdgeInsets'),
)

🎨 Colors: Paleta de cores predefinida #

Flutter proporciona un conxunto de cores xa definidas a través da clase Colors.

📌 Cores máis comúns: #

🧠 Moitas cores teñen tonalidades dispoñibles como Colors.color[100] ata Colors.color[900], onde 100 é máis claro e 900 máis escuro.

🧪 Exemplo de uso: #

Container(
  width: 150,
  height: 80,
  color: Colors.orange[300],
  child: const Center(
    child: Text('Cor de fondo personalizada'),
  ),
)

🧭 MainAxisAlignment: Aliñamento no eixe principal #

Controla como se distribúen os widgets fillos no eixe principal
(horizontal en Row, vertical en Column).

🧪 Exemplo: #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: const [
    Text('A'),
    Text('B'),
    Text('C'),
  ],
)

🎯 CrossAxisAlignment: Aliñamento no eixe cruzado #

Controla como se aliñan os widgets fillos no eixe cruzado
(vertical en Row, horizontal en Column).

⚠️ baseline só funciona con widgets de texto e require especificar textBaseline: TextBaseline.alphabetic.

🧪 Exemplo: #

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text('Primeiro'),
    Text('Segundo con texto máis longo'),
    Text('Terceiro'),
  ],
)

🧭 FloatingActionButtonLocation: Posición do botón flotante #

Controla a posición do botón de acción flotante (floatingActionButton) dentro dun Scaffold.

🧠 Usar centerDocked ou endDocked é útil cando se combina con bottomNavigationBar ou BottomAppBar.

🧪 Exemplo: #

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)

📚 Recursos oficiais #

• 📏 EdgeInsets – Flutter API
• 🎨 Colors – Flutter API
• 🧭 MainAxisAlignment – Flutter API
• 🎯 CrossAxisAlignment – Flutter API
• ⚡ FloatingActionButtonLocation – Flutter API

🔲 Container, Padding, Center, Row, Column #

Estes son algúns dos widgets de layout máis utilizados en Flutter.

🔹 Container #

Un contedor básico que pode ter tamaño, marxe, cor de fondo, bordes, etc.

Container(
  width: 200,
  height: 100,
  color: Colors.amber,
  child: const Center(
    child: Text('Dentro dun contedor'),
  ),
)

🔹 Padding #

Engade espazo ao redor doutro widget (non afecta ao seu tamaño interno).

🔲 Propiedades do widget Padding #

Padding(
  padding: const EdgeInsets.all(16.0),
  child: Text('Con marxe interior de 16 en todos os lados')
)

🔹 Center #

Este widget centra ao seu único fillo tanto horizontal como verticalmente dentro do espazo dispoñible para el.

🎯 Propiedade do widget Center #

Center(
  child: Text('Texto centrado'),
)

🔹 Row e Column #

Un widget que organiza os seus fillos (unha lista de widgets) nunha única fila horizontal (Row) ou columna vertical (Column).

📐 Propiedades dos widgets Row e Column #

// Exemplo con Row
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: const [
    Icon(Icons.star),
    Icon(Icons.star_border),
    Icon(Icons.star_half),
  ],
)

// Exemplo con Column
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Text('Elemento 1'),
    Text('Elemento 2'),
  ],
)

📚 Recursos oficiais #

• Widgets de Layout en Flutter: https://docs.flutter.dev/ui/widgets/layout
• Container: https://api.flutter.dev/flutter/widgets/Container-class.html
• Padding: https://api.flutter.dev/flutter/widgets/Padding-class.html
• Center: https://api.flutter.dev/flutter/widgets/Center-class.html
• Row: https://api.flutter.dev/flutter/widgets/Row-class.html
• Column: https://api.flutter.dev/flutter/widgets/Column-class.html

Exemplo práctico: Combinando Contedores e Aliñación #

Imos crear unha pantalla que use Container, Padding, Center, Row e Column para organizar elementos básicos.

🔗 Ver o código en DartPad

📐 Expanded e Flexible #

Estes widgets úsanse dentro de Row ou Column para controlar como se distribúe o espazo entre fillos.

🔹 Expanded #

Ocupa todo o espazo dispoñible restante. Útil para dividir o espazo de forma proporcional.

Se hai varios Expanded widgets, o espazo divídese entre eles.

📏 Propiedades do widget Expanded #

Row(
  children: const [
    Expanded(
      child: Text('Ocupa metade', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('E esta tamén', textAlign: TextAlign.center),
    ),
  ],
)

🔹 Flexible #

Semellante a Expanded, pero permite que o fillo non ocupe todo o espazo, se non é necesario.

📏 Propiedades do widget Flexible: #

Row(
  children: const [
    Flexible(
      fit: FlexFit.loose,
      child: Text('Contido flexible'),
    ),
    Flexible(
      fit: FlexFit.tight,
      child: Text('Este tenta ocupar máis espazo'),
    ),
  ],
)

📚 Recursos oficiais #

• Expanded
• Flexible
• Entender Row e Column

Exemplo práctico: Distribución de espazo con Expanded e Flexible #

Imos crear unha Row onde os elementos se distribúen utilizando Expanded e Flexible.

🔗 Ver o código en DartPad

📚 Recursos oficiais #

• 📦 Container – Flutter API
• 🔲 Padding – Flutter API
• 📐 Row e Column – Flutter Layout
• 📏 Expanded e Flexible – Flutter API
• 🏗️ Scaffold – Flutter API