DEV Community

Cibele Santos
Cibele Santos

Posted on

Storybook - Organizando seus widgets

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
        ),
      ),
    ],
  );
}
Enter fullscreen mode Exit fullscreen mode

Atributos

name: o Nome do seu Widget
child: seu Widget
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Primeiro Widget

Alt Text

Segundo Widget

Alt Text

Terceiro Widget

Alt Text

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 ✌️

Top comments (2)

Collapse
 
gleisser profile image
Gleisser

Ótimo artigo Cibele, parabéns

Collapse
 
cibsantos profile image
Cibele Santos

Muito obrigada Gleisser, fico feliz em saber, espero que tenha auxiliado ai no desenvolvimento.