---
title: 🧩 Widgets propios reutilizables
description: "## 🧩 Evitar repetir a mesma estrutura Se varias partes da pantalla teñen a mesma estrutura, podemos crear un widget propio. Así escribimos o deseño unha vez e pasamos os datos mediante parámetros. Xa coñecemos esta idea de Dart: unha…"
url: "https://www.drodicio.com/docs/flutter/tema-2-os-fundamentos-de-flutter-widgets/widgets-propios/"
updated: "2026-10-12"
category: Tema 2. Os fundamentos de Flutter. Widgets.
---

# 🧩 Widgets propios reutilizables

## 🧩 Evitar repetir a mesma estrutura

Se varias partes da pantalla teñen a mesma estrutura, podemos crear un widget propio. Así escribimos o deseño unha vez e pasamos os datos mediante parámetros.

Xa coñecemos esta idea de Dart: unha clase, atributos `final` e un construtor con parámetros nomeados. En Flutter engadimos `build`, que devolve o widget que describe a interface.

## 🧪 Unha tarxeta para cada profesor

`TarxetaProfesor` recibe o nome e o cargo. `required` obriga a indicar ambos valores ao creala.

`Card` proporciona o fondo dunha tarxeta e `ListTile` organiza o seu contido. A lista exterior permite desprazarse se non caben todas.

> 🔗 DartPad:
>
>
>
> - [`https://dartpad.dev/?id=e04d9a5a060135262eae725273d0afcb`](https://dartpad.dev/?id=e04d9a5a060135262eae725273d0afcb).

[https://dartpad.dev/embed-inline.html?id=e04d9a5a060135262eae725273d0afcb](https://dartpad.dev/embed-inline.html?id=e04d9a5a060135262eae725273d0afcb)

Non precisamos `StatefulWidget` só por recibir datos. Este widget describe a tarxeta a partir dos valores que recibe. No Tema 3.3 veremos como reaccionar a cambios e como comunicar accións ao pai con callbacks.

![Reutilizar unha tarxeta para mostrar diferentes profesores](https://www.drodicio.com/wp-content/uploads/2026/10/widgets_reutilizables-scaled.png)
Reutilizar unha tarxeta para mostrar diferentes profesores

## 🗂️ Separar o widget nun ficheiro

Ao medrar a aplicación, podemos mover a clase `TarxetaProfesor` a `lib/widgets/tarxeta_profesor.dart`, co seu `import` de Material. En `main.dart`, importámola así:

```dart
// Ruta relativa desde lib/main.dart.
import 'widgets/tarxeta_profesor.dart';
```

En VS Code tamén podes usar **Extract Widget** para extraer unha parte da interface e despois darlle un nome claro.

> 📚 Consulta:
>
>
>
> - [StatelessWidget → `https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html`](https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html).