Con los componentes reutilizables, podemos simplemente definir un widget e incrustar otro widget dentro de él como una relación entre padres e hijos. Al hacerlo, podemos compartir fácilmente las propiedades comunes entre un grupo de widgets y mantener la legibilidad del código base de la interfaz de usuario.
Pongamos un ejemplo sencillo para entender mejor este concepto. Suponga que desea crear un componente de botón personalizado que pueda reutilizarse en cualquier parte de su aplicación Flutter.
Para ello, definimos una nueva clase que extiende la clase `StatefulWidget`. A continuación se muestra el fragmento de código del widget "CustomButton".
```dardo
importar 'paquete:flutter/material.dart';
clase CustomButton extiende StatefulWidget {
texto de cadena final;
color final color;
VoidCallback final onPressed;
const Botón personalizado(
{se requiere este.texto, se requiere este.color, se requiere esto.onPressed});
@anular
Estado
}
clase _CustomButtonState extiende Estado
@anular
Construcción de widgets (contexto BuildContext) {
devolver botón elevado (
onPressed:widget.onPressed,
estilo:ElevatedButton.styleFrom(
primario:widget.color,
),
hijo:Texto (widget.texto),
);
}
}
```
Ahora veamos cómo usar este "CustomButton". Supongamos que tenemos una clase `MyApp` que extiende la clase `StatelessWidget`. Simplemente necesitamos crear una instancia del widget `CustomButton` y pasar los parámetros requeridos.
```dardo
importar 'paquete:flutter/material.dart';
importar 'paquete:flutter_training_app/CustomButton.dart';
clase MyApp extiende StatelessWidget {
const MiAplicación({Clave? clave}) :super(clave:clave);
@anular
Construcción de widgets (contexto BuildContext) {
devolver MaterialApp(
hogar:Andamio(
barra de aplicaciones:barra de aplicaciones(
título:Texto('Mi aplicación'),
),
cuerpo:Centro(
hijo:botón personalizado (
texto:'Haz clic en mí',
color:Colores.azul,
onPressed:() {
// Haz algo aquí.
},
),
),
),
);
}
}
```
¡Eso es todo! Hemos creado y utilizado con éxito un componente reutilizable utilizando la composición del widget. Con esta técnica, podemos mejorar la reutilización y el mantenimiento del código de nuestra interfaz de usuario de Flutter.