widget_with_codeview

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Widget, das den Quellcode zusammen mit seiner gerenderten Ausgabe in einer Seiten-zu-Seiten-Anordnung anzeigt. Ideal für Dokumentation, Tutorials oder Bildungsanwendungen, bei denen Benutzer sowohl den Code als auch sein visuelles Ergebnis gleichzeitig sehen müssen. Das Widget unterstützt Syntax-Highlighting und ist auf allen wichtigen Plattformen kompatibel, einschließlich Android, iOS, Web, macOS, Windows und Linux.

Anwendungsfälle

Interaktive Coding-Tutorials
Dokumentation mit Live-Beispielen
Lern-Apps für Flutter
Code-Demonstration in Apps
Echtzeit-Code-Vorschau-Integration

Hauptmerkmale

Seitlich angeordnete Anzeige von Code und Vorschau
Syntax-Hervorhebung
Plattformübergreifende Kompatibilität
Einfache Integration in Flutter-Projekte
Unterstützt mehrere Programmiersprachen

Geeignet für

Entwickler erstellen Lernmaterialien
Flutter-Ausbilder
Technik-Inhaltscreator
App-Entwickler, die Codebeispiele präsentieren
Teams, die interaktive Dokumentation erstellen

Hinweise

Erforderliche korrekte Einstellung der Syntax-Highlighting
Kann die Leistung bei großen Codeblöcken beeinträchtigen
Begrenzte Anpassungsmöglichkeiten für das Layout
Abhängig von externen Syntaxanalyse-Bibliotheken
Am besten geeignet für statische oder halb-dynamische Code-Ausschnitte

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

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.

Pakete, Repositories und App-Kategorien suchen