Componentes reutilizáveis são os aspectos vitais da linguagem de programação Dart na qual o Flutter se baseia. Dart e Flutter são fortemente influenciados pelos princípios de programação orientada a objetos.

Com os Componentes Reutilizáveis, podemos simplesmente definir um Widget e incorporar outro Widget dentro dele, como um relacionamento pai-filho. Ao fazer isso, podemos compartilhar facilmente as propriedades comuns entre um grupo de widgets e manter a legibilidade da base de código da UI.

Vamos dar um exemplo simples para entender melhor esse conceito. Suponha que você queira criar um componente de botão personalizado que possa ser reutilizado em qualquer parte do seu aplicativo Flutter.

Para isso, definimos uma nova classe que estende a classe `StatefulWidget`. Abaixo está o trecho de código do widget `CustomButton`.

```dardo
importar 'pacote:flutter/material.dart';

classe CustomButton estende StatefulWidget {
texto final da String;
cor final;
final VoidCallback onPressed;

const CustomButton(
{requerido this.text, necessário this.color, necessário this.onPressed});

@substituir
State createState() => _CustomButtonState();
}

classe _CustomButtonState estende State {
@substituir
Construção de widget (contexto BuildContext) {
return ElevatedButton(
onPressed:widget.onPressed,
estilo:ElevatedButton.styleFrom(
principal:widget.color,
),
filho:Texto (widget.text),
);
}
}
```

Agora vamos ver como usar este `CustomButton`. Suponha que temos uma classe `MyApp` que estende a classe `StatelessWidget`. Precisamos simplesmente criar uma instância do widget `CustomButton` e passar os parâmetros necessários.

```dardo
importar 'pacote:flutter/material.dart';
importar 'pacote:flutter_training_app/CustomButton.dart';

class MyApp estende StatelessWidget {
const MyApp({chave? chave}):super(chave:chave);

@substituir
Construção de widget (contexto BuildContext) {
retornarMaterialApp(
casa:Andaime(
appBar:AppBar(
título:Texto('Meu aplicativo'),
),
corpo:Centro (
filho:CustomButton(
texto:'Clique em mim',
cor:Colors.blue,
onPressed:() {
// Faça algo aqui.
},
),
),
),
);
}
}
```

É isso! Criamos e usamos com sucesso um componente reutilizável usando a composição do Widget. Usando essa técnica, podemos aprimorar a capacidade de reutilização e manutenção do código de nossa UI Flutter.