widget_with_codeview

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um widget do Flutter que exibe o código-fonte ao lado de sua saída renderizada em um layout lado a lado. Ideal para documentação, tutoriais ou aplicativos educacionais onde os usuários precisam ver o código e seu resultado visual simultaneamente. O widget oferece destaque de sintaxe e é compatível com todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

Tutoriais interativos de codificação
Documentação com exemplos ao vivo
Aplicativos educacionais para aprender Flutter
Demonstração de código em aplicativos
Integração de visualização em tempo real do código

Principais recursos

Exibição lado a lado de código e visualização
Sintaxe de destaque
Compatibilidade multiplataforma
Integração fácil com projetos Flutter
Suporta múltidas linguagens de programação

Indicado para

Desenvolvedores criando materiais de aprendizagem
Educadores do Flutter
criadores de conteúdo técnico
Desenvolvedores de aplicativos exibindo exemplos de código
Equipes construindo documentação interativa

Considerações

Requer configuração adequada de realce de sintaxe
Pode afetar o desempenho com blocos de código grandes
Opções limitadas de personalização para o layout
Depende de bibliotecas externas de análise sintática
Mais adequado para trechos de código estáticos ou semi-dinâmicos

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

GitHub

A widget with side-by-side source code view. Extracted from the flutter-catalog open-source app.

Usage

First make sure to add the source file to the app's assets by editing pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  widget_with_codeview:
flutter:
  assets:
    # Include a single source code file:
    - lib/my_awesome_source_code.dart
    # Include all files under a subfoler by adding trailing "/":
    - lib/my_awesome_source_code_subdir/
    - ...

Then wrap the widget from that source file by a WidgetWithCodeView:

WidgetWithCodeView(
  child: MyAwesomeWidget(), // ⚡️ If null, will only show the source code view.
  filePath: 'lib/my_awesome_source_code.dart',
  /// [codeLinkPrefix] is optional. When it's specified, two more buttons
  /// (open-code-in-browser, copy-code-link) will be added in the code view.
  codeLinkPrefix: 'https://github.com/<my_username>/<my_project>/blob/master/',
),

You can also choose to only show the code by not setting the child argument.

See example/lib/main.dart for a concrete example.

Buscar pacotes, repositórios e categorias de apps