Widgets con Hijos y sin Hijos en Flutter

---

SizedBox(
width: 100,
height: 50,
)

// Solo altura
SizedBox(height: 20)

// Solo ancho  
SizedBox(width: 30)

Row(
children: [
  Text('Izquierda'),
  Spacer(), // Se expande para llenar el espacio
  Text('Derecha'),
],
)

Column(
children: [
  Text('Elemento 1'),
  Divider(
    color: Colors.grey,
    thickness: 2,
  ),
  Text('Elemento 2'),
],
)

Row(
children: [
  Text('Izquierda'),
  VerticalDivider(
    color: Colors.blue,
    width: 20,
  ),
  Text('Derecha'),
],
)

CircularProgressIndicator()

// Con color personalizado
CircularProgressIndicator(
color: Colors.blue,
strokeWidth: 6,
)

LinearProgressIndicator()

// Con progreso específico (0.0 a 1.0)
LinearProgressIndicator(
value: 0.7,
backgroundColor: Colors.grey[300],
color: Colors.green,
)

Container(
width: 200,
height: 100,
color: Colors.blue,
child: Text('Hola'),
)

// Sin hijo (solo decoración)
Container(
width: 50,
height: 50,
color: Colors.red,
)

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

Padding(
padding: EdgeInsets.all(16),
child: Text('Texto con padding'),
)

// Padding específico
Padding(
padding: EdgeInsets.only(left: 20, top: 10),
child: Icon(Icons.star),
)

Column(
children: [
  Text('Elemento 1'),
  Text('Elemento 2'),
  Icon(Icons.star),
],
)

Row(
children: [
  Icon(Icons.home),
  Text('Inicio'),
  Icon(Icons.arrow_forward),
],
)

ListView(
children: [
  ListTile(title: Text('Opción 1')),
  ListTile(title: Text('Opción 2')),
  ListTile(title: Text('Opción 3')),
],
)

Stack(
children: [
  Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
  Positioned(
    top: 20,
    left: 20,
    child: Text('Encima'),
  ),
],
)

Wrap(
spacing: 8,
children: [
  Chip(label: Text('Tag 1')),
  Chip(label: Text('Tag 2')),
  Chip(label: Text('Tag 3')),
  Chip(label: Text('Tag 4')),
],
)

class EjemploWidgets extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Widgets Demo')),
    body: Column(
      children: [
        // Widget sin hijo
        SizedBox(height: 20),
        
        // Widget con un hijo
        Container(
          padding: EdgeInsets.all(16),
          color: Colors.blue[100],
          child: Text('Container con padding'),
        ),
        
        // Separador sin hijo
        Divider(),
        
        // Widget con múltiples hijos
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(Icons.star, color: Colors.yellow),
            Text('Rating'),
            Icon(Icons.favorite, color: Colors.red),
          ],
        ),
        
        // Espaciador flexible
        Spacer(),
        
        // Indicador sin hijo
        CircularProgressIndicator(),
        
        SizedBox(height: 20),
      ],
    ),
  );
}
}