El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Widgets Básicos

Siguiente ►
►

En Flutter, los widgets son los bloques de construcción fundamentales de la interfaz de usuario. Cada elemento de la interfaz, desde un simple botón hasta un complejo diseño de pantalla, es un widget. En esta sección, exploraremos algunos de los widgets básicos más utilizados en Flutter.

  1. Text

El widget Text se utiliza para mostrar texto en la pantalla. Es uno de los widgets más simples y más utilizados.

Ejemplo:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejemplo de Text Widget'),
        ),
        body: Center(
          child: Text(
            'Hola, Flutter!',
            style: TextStyle(fontSize: 24, color: Colors.blue),
          ),
        ),
      ),
    );
  }
}

Explicación:

  • Text('Hola, Flutter!'): Crea un widget de texto con el contenido "Hola, Flutter!".
  • TextStyle: Permite personalizar el estilo del texto, como el tamaño de la fuente y el color.

  1. Container

El widget Container es un contenedor versátil que puede contener un solo hijo y aplicar estilos como padding, margin, bordes y más.

Ejemplo:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejemplo de Container Widget'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.amber,
            child: Center(
              child: Text('Dentro del Container'),
            ),
          ),
        ),
      ),
    );
  }
}

Explicación:

  • Container(width: 200, height: 200, color: Colors.amber): Crea un contenedor de 200x200 píxeles con un fondo color ámbar.
  • child: Center(child: Text('Dentro del Container')): Coloca un widget de texto centrado dentro del contenedor.

  1. Row y Column

Los widgets Row y Column se utilizan para alinear widgets en una fila horizontal y una columna vertical, respectivamente.

Ejemplo de Row:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejemplo de Row Widget'),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Primero'),
            SizedBox(width: 20),
            Text('Segundo'),
            SizedBox(width: 20),
            Text('Tercero'),
          ],
        ),
      ),
    );
  }
}

Ejemplo de Column:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejemplo de Column Widget'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Primero'),
            SizedBox(height: 20),
            Text('Segundo'),
            SizedBox(height: 20),
            Text('Tercero'),
          ],
        ),
      ),
    );
  }
}

Explicación:

  • Row y Column: Alinean los widgets hijos en una fila o columna.
  • mainAxisAlignment: MainAxisAlignment.center: Centra los widgets hijos a lo largo del eje principal.
  • SizedBox: Añade un espacio entre los widgets.

  1. Image

El widget Image se utiliza para mostrar imágenes en la pantalla.

Ejemplo:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejemplo de Image Widget'),
        ),
        body: Center(
          child: Image.network(
            'https://flutter.dev/images/flutter-logo-sharing.png',
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

Explicación:

  • Image.network('URL'): Carga una imagen desde una URL.
  • width y height: Ajustan el tamaño de la imagen.

  1. ElevatedButton

El widget ElevatedButton se utiliza para crear botones elevados.

Ejemplo:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejemplo de ElevatedButton Widget'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Botón presionado');
            },
            child: Text('Presióname'),
          ),
        ),
      ),
    );
  }
}

Explicación:

  • ElevatedButton(onPressed: () { ... }, child: Text('Presióname')): Crea un botón elevado con un texto y una función que se ejecuta al presionarlo.

Ejercicios Prácticos

Ejercicio 1:

Crea una aplicación que muestre un Text dentro de un Container con un fondo azul y un padding de 20 píxeles.

Solución:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejercicio 1'),
        ),
        body: Center(
          child: Container(
            padding: EdgeInsets.all(20),
            color: Colors.blue,
            child: Text(
              'Texto dentro del Container',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

Ejercicio 2:

Crea una aplicación que muestre tres imágenes en una fila (Row), con un espacio de 10 píxeles entre cada imagen.

Solución:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ejercicio 2'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.network(
                'https://flutter.dev/images/flutter-logo-sharing.png',
                width: 100,
                height: 100,
              ),
              SizedBox(width: 10),
              Image.network(
                'https://flutter.dev/images/flutter-logo-sharing.png',
                width: 100,
                height: 100,
              ),
              SizedBox(width: 10),
              Image.network(
                'https://flutter.dev/images/flutter-logo-sharing.png',
                width: 100,
                height: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Conclusión

En esta sección, hemos explorado algunos de los widgets básicos en Flutter, incluyendo Text, Container, Row, Column, Image y ElevatedButton. Estos widgets son fundamentales para construir interfaces de usuario en Flutter. A medida que avances en tu aprendizaje, te encontrarás utilizando estos widgets frecuentemente, combinándolos y personalizándolos para crear aplicaciones más complejas y funcionales.

En la próxima sección, profundizaremos en los widgets de diseño, que te permitirán crear interfaces de usuario más sofisticadas y organizadas.

◄ Anterior
◄
Siguiente ►
►

Curso de Desarrollo con Flutter

Módulo 1: Introducción a Flutter

Módulo 2: Conceptos Básicos de Programación en Dart

Módulo 3: Widgets en Flutter

Módulo 4: Gestión de Estado

Módulo 5: Navegación y Enrutamiento

Módulo 6: Redes y APIs

Módulo 7: Persistencia y Almacenamiento

Módulo 8: Conceptos Avanzados de Flutter

Módulo 9: Pruebas y Depuración

Módulo 10: Despliegue y Mantenimiento

Módulo 11: Flutter para Web y Escritorio

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados