widget_with_codeview

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 小部件，以並排佈局顯示原始碼及其呈現輸出。非常適合用於文件、教學或教育類應用，讓使用者能同時看到程式碼及其視覺結果。此小部件支援語法強調，並可在所有主要平台（包括 Android、iOS、Web、macOS、Windows 和 Linux）上相容使用。

適用情境

互動編碼教程
帶有即時範例的文件
學習Flutter的教育類應用程式
應用程式中的程式碼示範
即時程式碼預覽整合

主要特色

並排顯示程式碼和預覽
語法高亮
跨平台相容性
與 Flutter 專案的輕鬆整合
支援多種程式語言

適合對象

開發人員創建學習資料
Flutter 教育者
技術內容創作者
應用開發者展示程式碼範例
建構互動式文件的團隊

使用建議

需要正確設置語法高亮
可能影響大型程式碼區塊的效能
佈局的自定義選項有限
依賴外部語法解析程式庫
最適合靜態或半動態程式碼片段

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

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.

搜尋套件、儲存庫與 APP 分類