Desenvolvimento de custom widget em javascript para flutterflow

Descrição detalhada:

1. Estrutura Básica:
  - Crie um custom widget que consiste em um Container contendo um texto.
  - Este widget será replicado 8 vezes e alinhado horizontalmente em uma Row.

2. Aparência:
  - O Container deve ter um estilo visual atraente, possivelmente com uma cor de fundo, bordas arredondadas e padding adequado.
  - O texto dentro do Container deve ser claramente legível e representar uma categoria.

3. Funcionalidade de MouseRegion:
  - Implemente um MouseRegion ao redor de cada Container.
  - Ao passar o mouse sobre o MouseRegion, deve-se acionar a exibição de um componente adicional.

4. Componente de Subcategorias:
  - Crie um componente separado que será exibido abaixo do menu de categorias quando o mouse estiver sobre um item.
  - Este componente deve conter uma lista de subcategorias relacionadas à categoria principal.
  - As subcategorias devem ser interativas, permitindo que o usuário as selecione com o mouse.

5. Comportamento do Componente de Subcategorias:
  - O componente deve aparecer suavemente (com uma animação) quando o mouse entra no MouseRegion de uma categoria.
  - Deve desaparecer (também com animação) quando o mouse deixa tanto o MouseRegion da categoria quanto a área do próprio componente de subcategorias.

6. Interatividade das Subcategorias:
  - Cada subcategoria no componente deve ser clicável.
  - Ao clicar em uma subcategoria, implemente uma ação (por exemplo, navegação para uma nova página ou atualização do estado do aplicativo).

7. Gerenciamento de Estado:
  - Utilize um gerenciamento de estado eficiente (como Provider ou Riverpod) para controlar qual categoria está atualmente "ativa" (com o mouse sobre ela).
  - Assegure que apenas um componente de subcategorias esteja visível por vez.

8. Responsividade:
  - O widget deve ser responsivo, adaptando-se a diferentes tamanhos de tela.
  - Considere implementar um layout alternativo para dispositivos móveis onde o hover não é aplicável.

9. Performance:
  - Otimize o widget para garantir que a exibição/ocultação repetida dos componentes de subcategorias não afete o desempenho do aplicativo.

10. Customização:
    - Torne o widget customizável, permitindo que as cores, fontes, espaçamentos e número de itens sejam facilmente ajustados no FlutterFlow.

11. Integração com FlutterFlow:
    - Assegure-se de que o widget seja compatível com o sistema de design e as convenções do FlutterFlow.
    - Forneça documentação clara sobre como integrar e usar o widget no ambiente do FlutterFlow.
- Implantação no flutterflow

12. Testes:
    - Implemente testes unitários e de widget para garantir o funcionamento correto em diferentes cenários.

13. Acessibilidade:
    - Considere aspectos de acessibilidade, como suporte a leitores de tela e navegação por teclado.

Ao desenvolver este widget, preste atenção especial à fluidez das interações, à consistência visual com o resto do aplicativo FlutterFlow, e à facilidade de uso tanto para o desenvolvedor que irá integrar o widget quanto para o usuário final que irá interagir com ele.