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.

パッケージ、リポジトリ、アプリカテゴリを検索