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:
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:
flutter pub global activate dartdoc
dart pub global activate snippets
flutter pub global run dartdoc .
flutter pub global activate dhttpd
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