DartDoc: How do I display DartPad in the documentation for my Flutter app

475 Views Asked by At

I'm trying to create documentation using DartDoc for my components in my Flutter app for my colleagues to use. So far I have managed to display the docs. But I need to provide a sample code in dartpad using Snippets.

This is the code:

/// A basic button, which consists of a content, typically a text, in a filled container.
///
/// {@tool snippet}
/// TEST: Create snippet...
///
/// ```dart
/// CircleAvatar(
///   backgroundImage: NetworkImage(userAvatarUrl),
/// )
/// ```
/// {@end-tool}
///
/// {@tool dartpad}
/// TEST: Create dartpad snippet...
///
/// ** See code in examples/api/lib/widgets/atoms/button/button.0.dart **
/// {@end-tool}
class NeuButton extends StatelessWidget {

However, the @tool tag doesn't render as it should. The result looked like this:

@tool not rendering

Tried setting up dartdoc_options.yaml like so:

dartdoc:
  include: [Atoms, Components, Templates, Helpers]
  tools:
    snippet:
      command:
        [ 'bin/cache/dart-sdk/bin/dart', 'pub', 'global', 'run', 'snippets', '--output-directory=doc/snippets', '--type=snippet' ]
      description: 'Creates sample code documentation output from embedded documentation samples.'
    sample:
      command:
        [ 'bin/cache/dart-sdk/bin/dart', 'pub', 'global', 'run', 'snippets', '--output-directory=doc/snippets', '--type=sample' ]
      description: 'Creates full application sample code documentation output from embedded documentation samples.'
    dartpad:
      command:
        [ 'bin/cache/dart-sdk/bin/dart', 'pub', 'global', 'run', 'snippets', '--output-directory=doc/snippets', '--type=dartpad' ]
      description: 'Creates full application sample code documentation output from embedded documentation samples and displays it in an embedded DartPad.'

I wasn't sure how to use the bin/cache/dart-sdk/bin/dart part, so I just copied the bin folder from the Flutter repo, but that still didn't work.

So the question is how do I make the snippet work, especially the {@tool dartpad}?


Just in case, this is the command process how I run the dartdoc:

  1. flutter pub global activate dartdoc
  2. dart pub global activate snippets
  3. flutter pub global run dartdoc .
  4. flutter pub global activate dhttpd
  5. dhttpd --path doc/api

Versions:

  • dartdoc 5.1.2
  • snippets 0.2.5
  • dhttpd 4.0.1

My flutter doctor -v result:

[✓] Flutter (Channel stable, 2.10.4, on macOS 11.6.6 20G624 darwin-x64, locale en-ID)
    • Flutter version 2.10.4 at /Users/lpt530/Library/Flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c860cba910 (2 months ago), 2022-03-25 00:23:12 -0500
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/lpt530/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • ANDROID_HOME = /Users/lpt530/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 12.5.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.67.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.42.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.6.6 20G624 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 102.0.5005.61

[✓] HTTP Host Availability
    • All required HTTP hosts are available
0

There are 0 best solutions below