widget_with_codeview

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter widget that displays source code alongside its rendered output in a side-by-side layout. Ideal for documentation, tutorials, or educational apps where users need to see both the code and its visual result simultaneously. The widget supports syntax highlighting and is compatible across all major platforms including Android, iOS, Web, macOS, Windows, and Linux.

Use cases

Interactive coding tutorials
Documentation with live examples
Educational apps for learning Flutter
Code demonstration in apps
Real-time code-preview integration

Key features

Side-by-side code and preview display
Syntax highlighting
Cross-platform compatibility
Easy integration with Flutter projects
Supports multiple programming languages

Suitable for

Developers creating learning materials
Flutter educators
Technical content creators
App developers showcasing code examples
Teams building interactive documentation

Considerations

Requires proper setup of syntax highlighting
May impact performance with large code blocks
Limited customization options for layout
Depends on external syntax parsing libraries
Best suited for static or semi-dynamic code snippets

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Search packages, repositories and app categories