Storybook - Organizando seus widgets

#flutter #webdev #mobile

Qualquer desenvolvedor independente da fase de sua carreira já teve algum tipo de dificuldade para entender o código, as funcionalidade e algum componente.
Fez e refez a lógica do fluxo para entender o que cada item do código fazia, esse onboarding do projeto acaba possuindo uma curva de aprendizagem. Bom seria se possuíssemos algum tipo de organizador dos componentes ... pois isso já é possível.😮

Já conhecido no React o Storybook é um organizador open source, podendo ser usado no terminal, ou seja nossos componentes podem ficar dentro da ferramenta para facilitar e auxiliar a organização.

O Storybook mesmo sendo popular em projetos React, também pode, ser usado em projetos Flutter para organização de nossos widgets.

Para começar a usar:

1. Instale

Na raiz do seu projeto digite no terminal:

$ flutter pub add storybook_flutter

2. Usando o Storybook

Crie o arquivo main_storybook.dart

Exemplo de código:

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

class StorybookApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Storybook(
    children: [
      Story.simple(
        name: 'Your Widget Name One',
        child: const TextField(
          decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Input field',
          ),
        ),
      ),
      Story.simple(
        name: 'Your Widget Name Two',
        child: const Text('Text Widget'),
      ),
       Story.simple(
        name: 'Your Widget Name Three',
        child:const Icon(
           Icons.person
        ),
      ),
    ],
  );
}

Atributos

name: o Nome do seu Widget
child: seu Widget

Importante que o atributo name possa ajudar a identificar seus widgets.

Compilando seu código

flutter run -d chrome -t caminhoAte/main_storybook.dart

3. Widgets

Os Widgets serão exibidos individualmente, para melhor visualização e controle do código.

Primeiro Widget

Segundo Widget

Terceiro Widget

4. Outros Recursos

Além da organização do código o Flutter Storybook possui algumas outras funcionalidades que nos auxiliam no desenvolvimento:

Permite a visualização dos seus widgets em diversos dispositivos
Alterar o tema para Dark
Argumentos dinâmicos em seus widgets

Com o Flutter Storybook além de facilitar a manutenção do código ajudará seu time no onborading de novos dev's. Para maiores informações consulte a documentação Flutter Storybook

Aproveita e deixa ai nos comentários se você já conhecia o Flutter Storybook e a experiência de desenvolver com ele.

Valeu ✌️