widget_with_codeview

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

소스 코드와 렌더링된 출력을 옆으로 배치하는 레이아웃으로 표시하는 플러터 위젯입니다. 문서, 튜토리얼 또는 교육용 앱에서 사용자가 코드와 시각적 결과를 동시에 볼 수 있도록 설계되었습니다. 구문 강조 기능을 지원하며, Android, iOS, 웹, macOS, Windows, Linux 등 모든 주요 플랫폼과 호환됩니다.

사용 사례

인터랙티브 코딩 튜토리얼
실시간 예제가 포함된 문서
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.

패키지, 저장소 및 앱 카테고리 검색